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

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

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

const SidebarContainer = styled('div')({
	padding: '0 1rem',
	boxSizing: 'border-box',
	'@media (min-width: 1080px)': {
		width: 'var(--width-base, 360px)',
	},
})

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)': {
		marginRight: 0,
	},
})

const LeftSidebarLayoutTemplate = ({
	query,
}) => {
	return (
		<RightSidebarLayout
			query={query}
			sidebar={
				<SidebarOverflow>
					<SidebarContainer>
						<DummyContent />
					</SidebarContainer>
				</SidebarOverflow>
			}
		>
			<Container>
				<DummyContent />
			</Container>
		</RightSidebarLayout>
	)
}

export default LeftSidebarLayoutTemplate