- import * as React from 'react'
- import styled from 'styled-components'
- import {applyBackgroundColor, minWidthFactor} from '../../utilities/mixins'
- import {configVar} from '../../utilities/helpers'
-
- const Base = styled('div')({
- position: 'fixed',
- top: 0,
- left: 0,
- width: '100%',
- height: 'var(--height-topbar, 4rem)',
- zIndex: 2,
- ...applyBackgroundColor(),
- '~ *': {
- paddingTop: 'var(--height-topbar, 4rem)',
- },
- '~ main ~ *': {
- paddingTop: 0,
- },
- ...minWidthFactor(3)({
- '~ main ~ *': {
- paddingTop: 'var(--height-topbar, 4rem)',
- },
- }),
- })
-
- const Container = styled('div')({
- padding: '0 1rem',
- boxSizing: 'border-box',
- margin: '0 auto',
- maxWidth: `calc(${configVar('base-width')} * 2)`,
- width: '100%',
- height: '100%',
- display: 'flex',
- alignItems: 'center',
- })
-
- const WideContainer = styled(Container)({
- ...minWidthFactor(3)({
- maxWidth: `calc(${configVar('base-width')} * 3)`,
- }),
- })
-
- const BrandContainer = styled('div')({
- })
-
- const CenterContainer = styled('div')({
- flex: 'auto',
- padding: '0 1rem',
- boxSizing: 'border-box',
- ':first-child': {
- paddingLeft: 0,
- },
- })
-
- const ActionContainer = styled('div')({
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'flex-end',
- height: '100%',
- whiteSpace: 'nowrap',
- ...minWidthFactor(2)({
- minWidth: '8rem',
- }),
- })
-
- const LinkContainer = styled('div')({
- width: 'var(--height-topbar, 4rem)',
- height: '100%',
- '> *': {
- width: '100%',
- height: '100%',
- display: 'inline-grid',
- placeContent: 'center',
- },
- })
-
- const MenuLinkContainer = styled(LinkContainer)({
- ...minWidthFactor(3)({
- position: 'absolute',
- left: -999999,
- }),
- })
-
- type Props = {
- wide?: boolean,
- brand?: React.ReactNode,
- menuLink?: React.ReactNode,
- userLink?: React.ReactNode,
- }
-
- const TopBar: React.FC<Props> = ({
- wide,
- brand,
- menuLink,
- userLink,
- children,
- }) => {
- const ContainerComponent = wide ? WideContainer : Container
- return (
- <Base>
- <ContainerComponent>
- {
- Boolean(brand as unknown)
- && (
- <BrandContainer>
- {brand}
- </BrandContainer>
- )
- }
- <CenterContainer>
- {children}
- </CenterContainer>
- <ActionContainer>
- {
- Boolean(menuLink as unknown)
- && (
- <MenuLinkContainer>
- {menuLink}
- </MenuLinkContainer>
- )
- }
- {
- Boolean(userLink as unknown)
- && (
- <LinkContainer>
- {userLink}
- </LinkContainer>
- )
- }
- </ActionContainer>
- </ContainerComponent>
- </Base>
- )
- }
-
- export default TopBar
|