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

import styled from 'styled-components';
import WideTopBar from '../../widgets/WideTopBar';

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

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

const LeftSidebarLayout = ({
	query,
	sidebar,
	children,
}) => {
	return (
		<>
			<WideTopBar
				query={query}
			/>
			<LeftSidebar>
				{sidebar}
			</LeftSidebar>
			<Main>
				{children}
			</Main>
		</>
	)
}

export default LeftSidebarLayout