zeichen-web-app/src/components/SecondaryNavItem/SecondaryNavItem.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 NoteLink = styled('a')({
  display: 'flex',
  textDecoration: 'none',
  color: 'inherit',
  alignItems: 'center',
  position: 'relative',
  flex: 'auto',
  padding: '0 1rem',
  boxSizing: 'border-box',
})

const NoteLinkPrimary = styled('span')({
  display: 'block',
  flex: 'auto',
})

const NoteLinkTitle = styled('strong')({
  display: 'block',
  height: '1.25em',
  position: 'relative',
})

const NoteLinkTitleOverflow = styled('span')({
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  textOverflow: 'ellipsis',
})

const LinkContainer = styled('div')({
  position: 'relative',
  color: 'var(--color-primary, blue)',
  display: 'flex',
  alignItems: 'stretch',
  height: '4rem',
})

const NoteActions = styled('div')({
  display: 'flex',
  alignItems: 'stretch',
  height: '100%',
  position: 'relative',
  '@media (min-width: 1080px)': {
    opacity: 0,
    [`${LinkContainer}:hover &`]: {
      opacity: 1,
    },
  },
})

const NoteAction = styled('button')({
  height: '100%',
  width: '4rem',
  background: 'transparent',
  border: 0,
  color: 'inherit',
  cursor: 'pointer',
  outline: 0,
  padding: 0,
})

const NoteLinkBackground = styled('span')({
  '::before': {
    content: "''",
    position: 'absolute',
    top: 0,
    left: 0,
    width: '0.25rem',
    height: '100%',
    display: 'block',
    backgroundColor: 'currentColor',
  },
  '::after': {
    content: "''",
    opacity: 0.125,
    backgroundColor: 'currentColor',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    position: 'absolute',
  },
})

const IconContainer = styled('span')({
  display: 'inline-block',
  verticalAlign: 'middle',
  marginRight: '0.5rem',
})

const PostMeta = styled('small')({
  opacity: 0.5,
  height: '1.25rem',
  display: 'block',
  lineHeight: 1.25,
})

const propTypes = {
  active: PropTypes.bool,
  href: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
  replace: PropTypes.bool,
  iconName: PropTypes.string,
  title: PropTypes.string,
  subtitle: PropTypes.node,
  actions: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string.isRequired,
    onClick: PropTypes.func,
    iconName: PropTypes.string,
  })),
}

type Props = PropTypes.InferProps<typeof propTypes>

const SecondaryNavItem: React.FC<Props> = ({
  active = false,
  href,
  replace = false,
  iconName,
  title,
  subtitle,
  actions,
}) => (
  <LinkContainer>
    {
      active
      && (
        <NoteLinkBackground />
      )
    }
    <Link
      href={href}
      replace={replace}
      passHref
      shallow
    >
      <NoteLink>
        <IconContainer>
          {
            iconName
            && (
              <Icon
                name={iconName}
              />
            )
          }
        </IconContainer>
        <NoteLinkPrimary>
          <NoteLinkTitle
            style={{ opacity: title.length > 0 ? 1 : 0.5, }}
          >
            <NoteLinkTitleOverflow>
              {title.length > 0 ? title : '(untitled)'}
            </NoteLinkTitleOverflow>
          </NoteLinkTitle>
          {
            subtitle
            && (
              <React.Fragment>
                {' '}
                <PostMeta>
                  {subtitle}
                </PostMeta>
              </React.Fragment>
            )
          }
        </NoteLinkPrimary>
      </NoteLink>
    </Link>
    {
      Array.isArray(actions)
      && (
        <NoteActions>
          {actions.map(a => (
            <NoteAction
              key={a.id}
              onClick={a.onClick}
            >
              <Icon
                name={a.iconName}
              />
            </NoteAction>
          ))}
        </NoteActions>
      )
    }
  </LinkContainer>
)

SecondaryNavItem.propTypes = propTypes

export default SecondaryNavItem