viewfinder/src/widgets/TopBar/index.tsx

import * as React from 'react'
import styled from 'styled-components'
import {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,
	'> *': {
		display: 'block',
		width: '100%',
		height: '100%',
		backgroundColor: 'white',
	},
	'~ *': {
		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')} * 3)`,
	width: '100%',
	height: '100%',
	display: 'flex',
	alignItems: 'center',
	position: 'relative',
	zIndex: 1,
})

const NarrowContainer = styled(Container)({
	maxWidth: configVar('base-width'),
})

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,
	},
})

const CONTAINER_COMPONENTS = {
	narrow: NarrowContainer,
	normal: Container,
	wide: WideContainer,
}

type Props = {
	span?: keyof typeof CONTAINER_COMPONENTS,
	brand?: React.ReactNode,
	menuLink?: React.ReactNode,
	userLink?: React.ReactNode,
	baseComponent?: React.ElementType,
}

const TopBar: React.FC<Props> = ({
	span = 'normal',
	brand,
	menuLink,
	userLink,
	children,
	baseComponent: BaseComponent = 'div',
}) => {
	const { [span as keyof typeof CONTAINER_COMPONENTS]: ContainerComponent = Container } = CONTAINER_COMPONENTS
	return (
		<Base>
			<BaseComponent>
				<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>
			</BaseComponent>
		</Base>
	)
}

export default TopBar