starter/src/components/organisms/layouts/LeftSidebar/index.tsx

import * as React from 'react';
import styled, {createGlobalStyle} from 'styled-components';
import TopBar from '../../widgets/TopBar';
import {UrlObject} from 'url';

const DisableScrolling = createGlobalStyle({
	'body': {
		overflow: 'hidden',
		'@media (min-width: 1080px)': {
			overflow: 'auto',
		},
	},
})

const Main = styled('main')({
	boxSizing: 'border-box',
	'@media (min-width: 1080px)': {
		paddingLeft: 'calc(50% - var(--width-base, 360px) * 0.5)',
	},
})

const SidebarOverflow = styled('div')({
	width: '100%',
	height: '100%',
	overflow: 'auto',
	scrollbarWidth: 'none',
	'::-webkit-scrollbar': {
		display: 'none',
	},
})

const LeftSidebar = styled('div')({
	'--width-base': '360px',
	'--size-menu': '4rem',
	boxSizing: 'border-box',
	position: 'fixed',
	top: 0,
	left: '-100%',
	width: '100%',
	height: '100%',
	backgroundColor: 'var(--color-bg, white)',
	overflow: 'hidden',
	'@media (prefers-color-scheme: dark)': {
		backgroundColor: 'var(--color-bg, black)',
	},
	'@media (min-width: 1080px)': {
		width: 'calc(50% - var(--width-base, 360px) * 0.5)',
		left: 0,
	},
})

const OpenLeftSidebar = styled(LeftSidebar)({
	left: 0,
})

export const SidebarContainer = styled('div')({
	margin: '0 auto',
	padding: '0 1rem',
	boxSizing: 'border-box',
	maxWidth: 'calc(var(--width-base, 360px) * 2)',
	'@media (min-width: 1080px)': {
		width: 'var(--width-base, 360px)',
		marginRight: 0,
	},
})

export const Container = styled('div')({
	padding: '0 1rem',
	boxSizing: 'border-box',

	width: '100%',
	maxWidth: 'calc(var(--width-base, 360px) * 2)',
	marginRight: 'auto',
	marginLeft: 'auto',
	'@media (min-width: 1080px)': {
		marginLeft: 0,
	},
})

type Props = {
	query?: string,
	onSearch?: React.FormEventHandler,
	searchLabel?: string,
	searchName?: string,
	searchHint?: string,
	brand?: React.ReactNode,
	linkComponent?: React.ElementType,
	sidebarMain?: React.ReactChild,
	sidebarMainOpen?: boolean,
	menuLink?: UrlObject,
	userLink?: UrlObject,
	menuLinkLabel?: string,
	userLinkLabel?: string,
}

const LeftSidebarLayout: React.FC<Props> = ({
	query,
	sidebarMain,
	sidebarMainOpen,
	children,
	onSearch,
	searchLabel,
	searchName,
	searchHint,
	brand,
	linkComponent,
	menuLinkLabel,
	menuLink,
	userLink,
	userLinkLabel,
}) => {
	const LeftSidebarComponent = sidebarMainOpen ? OpenLeftSidebar : LeftSidebar

	return (
		<>
			{
				sidebarMainOpen
				&& (
					<DisableScrolling />
				)
			}
			<TopBar
				wide
				query={query}
				withMenu
				onSearch={onSearch}
				searchHint={searchHint}
				searchLabel={searchLabel}
				searchName={searchName}
				brand={brand}
				linkComponent={linkComponent}
				menuLink={menuLink}
				menuLinkLabel={menuLinkLabel}
				userLink={userLink}
				userLinkLabel={userLinkLabel}
			/>
			<LeftSidebarComponent>
				<SidebarOverflow>
					{sidebarMain}
				</SidebarOverflow>
			</LeftSidebarComponent>
			<Main>
				{children}
			</Main>
		</>
	)
}

export default LeftSidebarLayout