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

import * as React from 'react'
import styled from 'styled-components'
import SecondaryNavItem from '../SecondaryNavItem/SecondaryNavItem'
import PrimaryNavItem from '../PrimaryNavItem/PrimaryNavItem'

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')({
  height: '100%',
  position: 'relative',
  backgroundColor: 'var(--color-bg)',
  '::before': {
    content: "''",
    display: 'block',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    position: 'absolute',
    backgroundColor: 'black',
    opacity: 0.03125,
  },
  '@media (min-width: 1080px)': {
    flex: 'auto',
  },
})

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

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 Navbar = ({
  secondaryVisible,
  primaryItemsStart = [],
  primaryItemsEnd = [],
  secondaryItemsHeader = [],
  secondaryItems = [],
}) => {
  const SecondaryNavItemsComponent = secondaryVisible ? VisibleSecondaryNavItems : SecondaryNavItems
  return (
    <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>
          <SecondaryNavItemsComponent>
            <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>
          </SecondaryNavItemsComponent>
        </NavbarItems>
      </NavbarContainer>
    </Base>
  )
}

export default Navbar