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

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

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

const RightSidebar = styled('div')({
	'--width-base': '360px',
	boxSizing: 'border-box',
	backgroundColor: 'var(--color-bg, white)',
	'@media (prefers-color-scheme: dark)': {
		backgroundColor: 'var(--color-bg, black)',
	},

	'@media (min-width: 1080px)': {
		position: 'fixed',
		top: 0,
		right: 0,
		width: 'calc(50% - var(--width-base, 360px) * 0.5)',
		height: '100%',
	},
})

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

export default LeftSidebarLayout