starter/src/pages/layouts/left-sidebar/with-menu/index.tsx

import * as React from 'react'
import * as T from '@tesseract-design/react-common'
import {GetServerSideProps, NextPage} from 'next'
import Template from '../../../../components/templates/LeftSidebarWithMenuLayout'
import {MORE, POPUP, QUERY, SIDEBAR} from '../../../../utilities/queryKeys'
import {USER} from '../../../../utilities/popups'

type Props = {
	query: string,
	sidebarMainOpen: boolean,
	moreItemsOpen: boolean,
}

const Page: NextPage<Props> = ({
	query,
	sidebarMainOpen,
	moreItemsOpen,
}) => {
	return (
		<Template
			query={query}
			moreQueryKey={MORE}
			userLinkLabel="User"
			searchQueryKey={QUERY}
			searchLabel="Search"
			searchHint="e.g. keywords, names&hellip;"
			popupQueryKey={POPUP}
			userPopupQueryValue={USER}
			menuLinkLabel="Menu"
			sidebarQueryKey={SIDEBAR}
			sidebarMainOpen={sidebarMainOpen}
			moreLinkLabel="More"
			moreItemsOpen={moreItemsOpen}
			sidebarMenuItems={[
				{
					id: '1',
					label: 'P1',
					url: {
						pathname: '/hello',
					},
					icon: (
						<T.Icon
							name="square"
							label=""
						/>
					),
				},
				{
					id: '2',
					label: 'P2',
					url: {
						pathname: '/hello',
					},
					icon: (
						<T.Icon
							name="square"
							label=""
						/>
					),
				},
				{
					id: '3',
					label: 'P3',
					url: {
						pathname: '/hello',
					},
					icon: (
						<T.Icon
							name="square"
							label=""
						/>
					),
				},
				{
					id: '100',
					label: 'P4',
					url: {
						pathname: '/hello',
					},
					icon: (
						<T.Icon
							name="square"
							label=""
						/>
					),
				},
				{
					id: '101',
					label: 'P5',
					url: {
						pathname: '/hello',
					},
					icon: (
						<T.Icon
							name="square"
							label=""
						/>
					),
				},
				{
					id: '4',
					label: 'S1',
					url: {
						pathname: '/hello',
					},
					icon: (
						<T.Icon
							name="square"
							label=""
						/>
					),
					secondary: true,
				},
				{
					id: '5',
					label: 'S2',
					url: {
						pathname: '/hello',
					},
					icon: (
						<T.Icon
							name="square"
							label=""
						/>
					),
					secondary: true,
				},
			]}
		/>
	)
}

export default Page

export const getServerSideProps: GetServerSideProps = async (ctx) => {
	const { q: query = '', } = ctx.query
	return {
		props: {
			query,
			sidebarMainOpen: 'sidebar' in ctx.query,
			moreItemsOpen: 'more' in ctx.query,
		}
	}
}