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

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

type Props = {
	query: string,
	sidebarMainOpen: boolean,
	menuLinkLabel: string,
	userLinkLabel: string,
	moreItemsOpen: boolean,
	searchQueryKey: string,
	searchLabel: string,
	searchHint: string,
	popupQueryKey: string,
	moreQueryKey: string,
	sidebarQueryKey: string,
	moreLinkLabel: string,
	sidebarMenuItems: LeftSidebarWithMenu.MenuItem[],
	userPopupQueryValue: string,
}

const LeftSidebarLayoutTemplate: React.FC<Props> = ({
	query,
	sidebarMainOpen,
	menuLinkLabel,
	userLinkLabel,
	moreItemsOpen,
	searchQueryKey,
	searchLabel,
	searchHint,
	popupQueryKey,
	moreQueryKey,
	sidebarQueryKey,
	moreLinkLabel,
	sidebarMenuItems,
	userPopupQueryValue,
}) => {
	return (
		<LeftSidebarWithMenu.Layout
			brand={
				<Brand />
			}
			topBarCenter={
				<form>
					<T.TextInput
						name={searchQueryKey}
						label={searchLabel}
						hint={searchHint}
						defaultValue={query}
						border
						alternate
					/>
				</form>
			}
			menuLink={
				<Link
					href={{
						query: {
							[sidebarQueryKey]: '',
						},
					}}
				>
					<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: {
						[moreQueryKey]: '',
					},
				},
				icon: (
					<T.Icon
						name="more-horizontal"
						label=""
					/>
				),
			}}
			moreItemsOpen={moreItemsOpen}
			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={sidebarMainOpen}
			sidebarMain={
				<LeftSidebarWithMenu.SidebarMainContainer>
					<DummyContent />
				</LeftSidebarWithMenu.SidebarMainContainer>
			}
			sidebarMenuItems={sidebarMenuItems}
		>
			<LeftSidebarWithMenu.ContentContainer>
				<DummyContent />
			</LeftSidebarWithMenu.ContentContainer>
		</LeftSidebarWithMenu.Layout>
	)
}

export default LeftSidebarLayoutTemplate