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',
  display: 'flex',
  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%',
    flexDirection: 'column',
    justifyContent: 'space-between',
    alignItems: 'stretch',
  },
})

const PrimaryNavItemGroup = styled('div')({
  display: 'flex',
  alignItems: 'center',
  '@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>
            <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>
              )
            }
          </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