zeichen-legacy/packages/app/src/components/Navbar/Navbar.tsx

import * as React from 'react'
import styled, { createGlobalStyle } from 'styled-components'
import SecondaryNavItem from '../SecondaryNavItem/SecondaryNavItem'
import PrimaryNavItem from '../PrimaryNavItem/PrimaryNavItem'
import Link from 'next/link'

const Base = styled('aside')({
  width: 360,
  height: '100%',
  position: 'fixed',
  top: 0,
  left: -360,
  backgroundColor: 'var(--color-fg)',
  color: 'var(--color-bg)',
  zIndex: 1,
  '@media (min-width: 1080px)': {
    width: `${100 / 3}%`,
    left: 0,
  },
})

const PrimaryNavItems = styled('nav')({
  width: '100%',
  height: '4rem',
  position: 'fixed',
  bottom: 0,
  left: 0,
  zIndex: 1,
  backgroundColor: 'var(--color-fg)',
  color: 'var(--color-bg)',
  justifyContent: 'center',
  '@media (min-width: 1080px)': {
    position: 'static',
    bottom: 'auto',
    left: 'auto',
    width: '4rem',
    height: '100%',
  },
})

const PrimaryNavItemsContainer = styled('div')({
  width: '100%',
  height: '100%',
  maxWidth: 720,
  display: 'flex',
  margin: '0 auto',
  '@media (min-width: 1080px)': {
    width: '100%',
    flexDirection: 'column',
    justifyContent: 'space-between',
    alignItems: 'stretch',
  },
})

const PrimaryNavItemGroup = styled('div')({
  display: 'contents',
  '@media (min-width: 1080px)': {
    display: 'block',
  },
})

const SecondaryNavItems = styled('nav')({
  width: '100%',
  height: '100%',
  position: 'fixed',
  top: 0,
  left: 0,
  paddingBottom: '4rem',
  boxSizing: 'border-box',
  pointerEvents: 'none',
  '@media (min-width: 1080px)': {
    position: 'relative',
    top: 'auto',
    left: 'auto',
    flex: 'auto',
    width: 'auto',
    paddingBottom: 0,
    pointerEvents: 'initial',
  },
})

const SecondaryNavItemsFg = styled('div')({
  height: '100%',
  backgroundColor: 'var(--color-bg)',
  width: 360,
  position: 'absolute',
  top: 0,
  left: -360,
  paddingBottom: '4rem',
  boxSizing: 'border-box',
  transitionProperty: 'left',
  transitionDuration: '350ms',
  transitionTimingFunction: 'ease-out',
  '::before': {
    content: "''",
    display: 'block',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    position: 'absolute',
    backgroundColor: 'black',
    opacity: 0.03125,
  },
  '@media (min-width: 1080px)': {
    position: 'relative',
    top: 'auto',
    left: 'auto',
    flex: 'auto',
    width: 'auto',
    paddingBottom: 0,
  },
})

const SecondaryNavItemsBg = styled('a')({
  opacity: 0,
  transitionProperty: 'opacity',
  transitionDuration: '350ms',
  transitionTimingFunction: 'ease-out',
  '::before': {
    content: "''",
    display: 'block',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    position: 'absolute',
    backgroundColor: 'black',
    opacity: 0.75,
  },
})

const SecondaryNavItemsOverflow = styled('div')({
  overflow: 'auto',
  width: '100%',
  height: '100%',
  position: 'relative',
})

const NavbarItems = styled('div')({
  display: 'flex',
  width: '100%',
  height: '100%',
})

const NavbarContainer = styled('div')({
  display: 'block',
  width: '100%',
  height: '100%',
  margin: '0 0 0 auto',
  boxSizing: 'border-box',
  maxWidth: 360,
})

const SecondaryVisibleDummy = styled('div')({
  display: 'none',
})

const Visible = createGlobalStyle({
  [`div + ${SecondaryNavItems}`]: {
    pointerEvents: 'initial',
  },
  [`div + ${SecondaryNavItems} ${SecondaryNavItemsFg}`]: {
    left: 0,
  },
  [`div + ${SecondaryNavItems} ${SecondaryNavItemsBg}`]: {
    opacity: 1,
  },
  '@media (min-width: 1080px)': {
    [`div + ${SecondaryNavItems} ${SecondaryNavItemsFg}`]: {
      left: 'auto',
    },
    [`div + ${SecondaryNavItems} ${SecondaryNavItemsBg}`]: {
      opacity: 0,
    },
  }
})

const Navbar = ({
  closeHref,
  secondaryVisible,
  primaryItemsStart = [],
  primaryItemsEnd = [],
  secondaryItemsHeader = [],
  secondaryItems = [],
}) => (
  <React.Fragment>
    <Visible />
    <Base>
      <NavbarContainer>
        <NavbarItems>
          <PrimaryNavItems>
            <PrimaryNavItemsContainer>
              <PrimaryNavItemGroup>
                {
                  Array.isArray(primaryItemsStart!)
                  && primaryItemsStart.map(i => (
                    <PrimaryNavItem
                      key={i.id}
                      mobileOnly={i.mobileOnly}
                      href={i.href}
                      iconName={i.iconName}
                      title={i.title}
                      active={i.active}
                    />
                  ))
                }
              </PrimaryNavItemGroup>
              {
                Array.isArray(primaryItemsEnd!)
                && (
                  <PrimaryNavItemGroup>
                    {
                      primaryItemsEnd.map(i => (
                        <PrimaryNavItem
                          key={i.id}
                          href={i.href}
                          iconName={i.iconName}
                          title={i.title}
                          active={i.active}
                        />
                      ))
                    }
                  </PrimaryNavItemGroup>
                )
              }
            </PrimaryNavItemsContainer>
          </PrimaryNavItems>
          {
            secondaryVisible
            && (
              <SecondaryVisibleDummy />
            )
          }
          <SecondaryNavItems>
            <Link
              href={closeHref}
              passHref
              shallow
            >
              <SecondaryNavItemsBg />
            </Link>
            <SecondaryNavItemsFg>
              <SecondaryNavItemsOverflow>
                {
                  secondaryItemsHeader.map(i => (
                    <SecondaryNavItem
                      key={i.id}
                      active={i.active}
                      href={i.href}
                      replace={i.replace}
                      iconName={i.iconName}
                      title={i.title}
                      subtitle={i.subtitle}
                      actions={i.actions}
                    />
                  ))
                }
                {
                  secondaryItems.map(i => (
                    <SecondaryNavItem
                      key={i.id}
                      active={i.active}
                      href={i.href}
                      replace={i.replace}
                      iconName={i.iconName}
                      title={i.title}
                      subtitle={i.subtitle}
                      actions={i.actions}
                    />
                  ))
                }
              </SecondaryNavItemsOverflow>
            </SecondaryNavItemsFg>
          </SecondaryNavItems>
        </NavbarItems>
      </NavbarContainer>
    </Base>
  </React.Fragment>
)

export default Navbar