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

import * as React from 'react'
import styled from 'styled-components'
import * as T from '@tesseract-design/react-common'
import {LeftSidebarWithMenu} from '@theoryofnekomata/viewfinder'
import DummyContent from '../../molecules/DummyContent'
import Link from '../../molecules/Link'
import Brand from '../../molecules/Brand'

const TopBarComponent = styled('div')({
	backgroundColor: 'var(--color-bg, white)',
	'::before': {
		content: "''",
		width: '100%',
		height: '100%',
		position: 'absolute',
		top: 0,
		left: 0,
		pointerEvents: 'none',
	},
	'::after': {
		backgroundColor: 'black',
		opacity: 0.5,
		content: "''",
		width: '100%',
		height: '100%',
		position: 'absolute',
		top: 0,
		left: 0,
		pointerEvents: 'none',
	},
})

const SidebarMainComponent = styled('div')({
	backgroundColor: 'var(--color-bg, white)',
	zIndex: 2,
	'::after': {
		backgroundColor: 'black',
		opacity: 0.25,
		content: "''",
		width: '100%',
		height: '100%',
		position: 'absolute',
		top: 0,
		left: 0,
		pointerEvents: 'none',
	},
})

const SidebarMenuComponent = styled('div')({
	backgroundColor: 'var(--color-bg, white)',
	'::after': {
		backgroundColor: 'black',
		opacity: 0.4,
		content: "''",
		width: '100%',
		height: '100%',
		position: 'absolute',
		top: 0,
		left: 0,
		pointerEvents: 'none',
	},
})

type Props = {
	query: string
	menuLinkLabel: string
	userLinkLabel: string
	searchQueryKey: string
	searchLabel: string
	searchHint: string
	popupQueryKey: string
	moreSubpageQueryValue: string
	sidebarSubpageQueryValue: string
	moreLinkLabel: string
	sidebarMenuItems: LeftSidebarWithMenu.MenuItem[]
	userPopupQueryValue: string
	subpageQueryKey: string
	subpage: string
}

const LeftSidebarLayoutTemplate: React.FC<Props> = ({
	query,
	menuLinkLabel,
	userLinkLabel,
	searchQueryKey,
	searchLabel,
	searchHint,
	popupQueryKey,
	moreSubpageQueryValue,
	sidebarSubpageQueryValue,
	moreLinkLabel,
	sidebarMenuItems,
	userPopupQueryValue,
	subpageQueryKey,
	subpage,
}) => {
	return (
		<LeftSidebarWithMenu.Layout
			brand={<Brand />}
			sidebarMainComponent={SidebarMainComponent}
			sidebarMenuComponent={SidebarMenuComponent}
			topBarComponent={TopBarComponent}
			topBarCenter={
				<form>
					<T.TextInput
						name={searchQueryKey}
						label={searchLabel}
						hint={searchHint}
						defaultValue={query}
						border
						alternate
					/>
				</form>
			}
			menuLink={
				<Link
					href={{
						query: {
							[subpageQueryKey]: sidebarSubpageQueryValue,
						},
					}}
				>
					<T.Icon name="menu" label={menuLinkLabel} />
				</Link>
			}
			userLink={
				<Link
					href={{
						query: {
							[popupQueryKey]: userPopupQueryValue,
						},
					}}
				>
					<T.Icon name="user" label={userLinkLabel} />
				</Link>
			}
			moreLinkMenuItem={{
				label: moreLinkLabel,
				url: {
					query: {
						[subpageQueryKey]: moreSubpageQueryValue,
					},
				},
				icon: <T.Icon name="more-horizontal" label="" />,
			}}
			moreItemsOpen={subpage === moreSubpageQueryValue}
			moreLinkComponent={({url, icon, label}) => (
				<Link href={url}>
					<LeftSidebarWithMenu.MoreSidebarMenuContainer>
						<LeftSidebarWithMenu.MoreSidebarMenuItemIcon>{icon}</LeftSidebarWithMenu.MoreSidebarMenuItemIcon>
						{label}
					</LeftSidebarWithMenu.MoreSidebarMenuContainer>
				</Link>
			)}
			linkComponent={({url, icon, label}) => (
				<Link href={url}>
					<LeftSidebarWithMenu.SidebarMenuContainer>
						<LeftSidebarWithMenu.SidebarMenuItemIcon>{icon}</LeftSidebarWithMenu.SidebarMenuItemIcon>
						{label}
					</LeftSidebarWithMenu.SidebarMenuContainer>
				</Link>
			)}
			sidebarMainOpen={subpage === sidebarSubpageQueryValue}
			sidebarMain={
				<LeftSidebarWithMenu.SidebarMainContainer>
					<DummyContent />
				</LeftSidebarWithMenu.SidebarMainContainer>
			}
			sidebarMenuItems={sidebarMenuItems}
		>
			<LeftSidebarWithMenu.ContentContainer>
				<DummyContent />
			</LeftSidebarWithMenu.ContentContainer>
		</LeftSidebarWithMenu.Layout>
	)
}

export default LeftSidebarLayoutTemplate