starter/src/components/templates/LeftSidebarWithMenuLayout/index.tsx

import * as React from 'react'
import styled from 'styled-components';
import LeftSidebarLayout from '../../organisms/layouts/LeftSidebar';
import DummyContent from '../../molecules/DummyContent';

const SidebarMenuGroup = styled('div')({
	width: '100%',
})

const SidebarMenuItem = styled('a')({
	height: 'var(--size-menu, 4rem)',
	display: 'flex',
	alignItems: 'center',
	textDecoration: 'none',
})

const SidebarMenuItemIcon = styled('span')({
	width: 'var(--size-menu, 4rem)',
	height: 'var(--size-menu, 4rem)',
	display: 'grid',
	placeContent: 'center',
})

const SidebarMenu = styled('div')({
	top: 0,
	marginLeft: 'auto',
	position: 'absolute',
	height: '100%',
	width: '100%',
	paddingTop: 'inherit',
	display: 'flex',
	flexDirection: 'column',
	justifyContent: 'space-between',
	alignItems: 'flex-end',
	boxSizing: 'border-box',
	overflow: 'auto',
	scrollbarWidth: 'none',
	'::-webkit-scrollbar': {
		display: 'none',
	},
})

const SidebarMenuContainer = styled('span')({
	width: 'var(--width-base, 360px)',
	marginLeft: 'auto',
	paddingRight: '1rem',
	boxSizing: 'border-box',
	display: 'flex',
	alignItems: 'center',
})

const SidebarMain = styled('div')({
	width: 'calc(var(--width-base, 360px) - var(--size-menu, 4rem))',
	marginLeft: 'auto',
	height: '100%',
	padding: '0 1rem',
	paddingTop: 'inherit',
	boxSizing: 'border-box',
	overflow: 'auto',
	position: 'absolute',
	top: 0,
	right: 0,
	scrollbarWidth: 'none',
	backgroundColor: 'var(--color-bg, white)',
	'@media (prefers-color-scheme: dark)': {
		backgroundColor: 'var(--color-bg, black)',
	},
	'::-webkit-scrollbar': {
		display: 'none',
	},
})

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


const LeftSidebarLayoutTemplate = ({
	query,
}) => {
	return (
		<LeftSidebarLayout
			query={query}
			sidebar={
				<>
					<SidebarMenu>
						<SidebarMenuGroup>
							<SidebarMenuItem>
								<SidebarMenuContainer>
									<SidebarMenuItemIcon>
										A
									</SidebarMenuItemIcon>
									Hello
								</SidebarMenuContainer>
							</SidebarMenuItem>
							<SidebarMenuItem>
								<SidebarMenuContainer>
									<SidebarMenuItemIcon>
										B
									</SidebarMenuItemIcon>
									Hello
								</SidebarMenuContainer>
							</SidebarMenuItem>
							<SidebarMenuItem>
								<SidebarMenuContainer>
									<SidebarMenuItemIcon>
										C
									</SidebarMenuItemIcon>
									Hello
								</SidebarMenuContainer>
							</SidebarMenuItem>
						</SidebarMenuGroup>
						<SidebarMenuGroup>
							<SidebarMenuItem>
								<SidebarMenuContainer>
									<SidebarMenuItemIcon>
										D
									</SidebarMenuItemIcon>
									World
								</SidebarMenuContainer>
							</SidebarMenuItem>
						</SidebarMenuGroup>
					</SidebarMenu>
					<SidebarMain>
						<DummyContent />
					</SidebarMain>
				</>
			}
		>
			<Container>
				<DummyContent />
			</Container>
		</LeftSidebarLayout>
	)
}

export default LeftSidebarLayoutTemplate