zeichen-web-app/src/components/PrimaryNavItem/PrimaryNavItem.tsx

import * as React from 'react'
import * as PropTypes from 'prop-types'
import Link from 'next/link'
import styled from 'styled-components'
import Icon from '../Icon/Icon'

const Base = styled('div')({
  width: 0,
  height: '4rem',
  flex: 'auto',
  padding: '0.25rem',
  boxSizing: 'border-box',
  position: 'relative',
  '@media (min-width: 1080px)': {
    width: '4rem',
    height: '4rem',
  },
})

const ClickArea = styled('a')({
  display: 'grid',
  color: 'inherit',
  placeContent: 'center',
  width: '100%',
  height: '100%',
  position: 'absolute',
  top: 0,
  left: 0,
  textDecoration: 'none',
})

const ClickAreaContent = styled('span')({
  display: 'block',
  textAlign: 'center',
  lineHeight: 1,
})

const Highlight = styled('div')({
  width: '100%',
  height: '100%',
  backgroundColor: 'var(--color-primary)',
  opacity: 0.5,
  borderRadius: '0.25rem',
  [`+ ${ClickArea}`]: {
    opacity: 0.75,
  },
})

const Title = styled('small')({
  display: 'block',
  fontWeight: 'bolder',
  position: 'absolute',
  left: -999999,
})

const MobileBase = styled(Base)({
  '@media (min-width: 1080px)': {
    display: 'none',
  },
})

const propTypes = {
  href: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
  iconName: PropTypes.string.isRequired,
  title: PropTypes.string,
  mobileOnly: PropTypes.bool,
  active: PropTypes.bool,
}

type Props = PropTypes.InferProps<typeof propTypes>

const PrimaryNavItem: React.FC<Props> = ({
  href,
  iconName,
  title,
  mobileOnly = false,
  active = false,
}) => {
  const BaseComponent = mobileOnly ? MobileBase : Base
  return (
    <BaseComponent>
      {
        active
        && (
          <Highlight />
        )
      }
      <Link
        href={href}
        passHref
        shallow
      >
        <ClickArea
          title={title}
        >
          <ClickAreaContent>
            <Icon
              name={iconName}
            />
            <Title>
              {title}
            </Title>
          </ClickAreaContent>
        </ClickArea>
      </Link>
    </BaseComponent>
  )
}

PrimaryNavItem.propTypes = propTypes

export default PrimaryNavItem