Modify groupings

Group "more" and the sidebar into one subpage key.

src/components/templates/LeftSidebarLayout/index.tsx

@@ -7,7 +7,6 @@ import Brand from '../../molecules/Brand'
 
 type Props = {
 	query: string,
-	sidebarMainOpen: boolean,
 	menuLinkLabel: string,
 	userLinkLabel: string,
 	searchQueryKey: string,
@@ -15,12 +14,13 @@ type Props = {
 	searchHint: string,
 	popupQueryKey: string,
 	userPopupQueryValue: string,
-	sidebarQueryKey: string,
+	sidebarSubpageQueryValue: string,
+	subpageQueryKey: string,
+	subpage: string,
 }
 
 const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 	query,
-	sidebarMainOpen,
 	menuLinkLabel,
 	userLinkLabel,
 	searchQueryKey,
@@ -28,14 +28,16 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 	searchHint,
 	popupQueryKey,
 	userPopupQueryValue,
-	sidebarQueryKey,
+	sidebarSubpageQueryValue,
+	subpageQueryKey,
+	subpage,
 }) => {
 	return (
 		<LeftSidebar.Layout
 			brand={
 				<Brand />
 			}
-			sidebarMainOpen={sidebarMainOpen}
+			sidebarMainOpen={subpage === sidebarSubpageQueryValue}
 			topBarCenter={
 				<form>
 					<T.TextInput
@@ -52,7 +54,7 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 				<Link
 					href={{
 						query: {
-							[sidebarQueryKey]: '',
+							[subpageQueryKey]: sidebarSubpageQueryValue,
 						},
 					}}
 				>

src/components/templates/LeftSidebarWithMenuLayout/index.tsx

@@ -7,36 +7,36 @@ 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,
+	moreSubpageQueryValue: string,
+	sidebarSubpageQueryValue: string,
 	moreLinkLabel: string,
 	sidebarMenuItems: LeftSidebarWithMenu.MenuItem[],
 	userPopupQueryValue: string,
+	subpageQueryKey: string,
+	subpage: string,
 }
 
 const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 	query,
-	sidebarMainOpen,
 	menuLinkLabel,
 	userLinkLabel,
-	moreItemsOpen,
 	searchQueryKey,
 	searchLabel,
 	searchHint,
 	popupQueryKey,
-	moreQueryKey,
-	sidebarQueryKey,
+	moreSubpageQueryValue,
+	sidebarSubpageQueryValue,
 	moreLinkLabel,
 	sidebarMenuItems,
 	userPopupQueryValue,
+	subpageQueryKey,
+	subpage,
 }) => {
 	return (
 		<LeftSidebarWithMenu.Layout
@@ -59,7 +59,7 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 				<Link
 					href={{
 						query: {
-							[sidebarQueryKey]: '',
+							[subpageQueryKey]: sidebarSubpageQueryValue,
 						},
 					}}
 				>
@@ -87,7 +87,7 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 				label: moreLinkLabel,
 				url: {
 					query: {
-						[moreQueryKey]: '',
+						[subpageQueryKey]: moreSubpageQueryValue,
 					},
 				},
 				icon: (
@@ -97,7 +97,7 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 					/>
 				),
 			}}
-			moreItemsOpen={moreItemsOpen}
+			moreItemsOpen={subpage === moreSubpageQueryValue}
 			moreLinkComponent={({ url, icon, label, }) => (
 				<Link
 					href={url}
@@ -122,7 +122,7 @@ const LeftSidebarLayoutTemplate: React.FC<Props> = ({
 					</LeftSidebarWithMenu.SidebarMenuContainer>
 				</Link>
 			)}
-			sidebarMainOpen={sidebarMainOpen}
+			sidebarMainOpen={subpage === sidebarSubpageQueryValue}
 			sidebarMain={
 				<LeftSidebarWithMenu.SidebarMainContainer>
 					<DummyContent />

src/pages/layouts/left-sidebar/index.tsx

@@ -1,21 +1,22 @@
 import {GetServerSideProps, NextPage} from 'next'
 import Template from '../../../components/templates/LeftSidebarLayout'
-import {POPUP, QUERY, SIDEBAR} from '../../../utilities/queryKeys'
+import {POPUP, QUERY, SUBPAGE} from '../../../utilities/queryKeys'
 import {USER} from '../../../utilities/popups'
+import {SIDEBAR} from '../../../utilities/subpages'
 
 type Props = {
 	query: string,
-	sidebarMainOpen: boolean,
+	subpage: string,
 }
 
 const Page: NextPage<Props> = ({
 	query,
-	sidebarMainOpen,
+	subpage,
 }) => {
 	return (
 		<Template
+			subpage={subpage}
 			query={query}
-			sidebarMainOpen={sidebarMainOpen}
 			userLinkLabel="User"
 			searchQueryKey={QUERY}
 			searchLabel="Search"
@@ -23,7 +24,8 @@ const Page: NextPage<Props> = ({
 			popupQueryKey={POPUP}
 			userPopupQueryValue={USER}
 			menuLinkLabel="Menu"
-			sidebarQueryKey={SIDEBAR}
+			subpageQueryKey={SUBPAGE}
+			sidebarSubpageQueryValue={SIDEBAR}
 		/>
 	)
 }
@@ -31,11 +33,11 @@ const Page: NextPage<Props> = ({
 export default Page
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
-	const { [QUERY]: query = '', } = ctx.query
+	const { [QUERY]: query = '', [SUBPAGE]: subpage = null, } = ctx.query
 	return {
 		props: {
 			query,
-			sidebarMainOpen: 'sidebar' in ctx.query,
+			subpage,
 		}
 	}
 }

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

@@ -2,24 +2,23 @@ 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 {POPUP, QUERY, SUBPAGE} from '../../../../utilities/queryKeys'
 import {USER} from '../../../../utilities/popups'
+import {MORE, SIDEBAR} from '../../../../utilities/subpages'
 
 type Props = {
 	query: string,
-	sidebarMainOpen: boolean,
-	moreItemsOpen: boolean,
+	subpage: string,
 }
 
 const Page: NextPage<Props> = ({
 	query,
-	sidebarMainOpen,
-	moreItemsOpen,
+	subpage,
 }) => {
 	return (
 		<Template
 			query={query}
-			moreQueryKey={MORE}
+			subpage={subpage}
 			userLinkLabel="User"
 			searchQueryKey={QUERY}
 			searchLabel="Search"
@@ -27,10 +26,10 @@ const Page: NextPage<Props> = ({
 			popupQueryKey={POPUP}
 			userPopupQueryValue={USER}
 			menuLinkLabel="Menu"
-			sidebarQueryKey={SIDEBAR}
-			sidebarMainOpen={sidebarMainOpen}
 			moreLinkLabel="More"
-			moreItemsOpen={moreItemsOpen}
+			subpageQueryKey={SUBPAGE}
+			sidebarSubpageQueryValue={SIDEBAR}
+			moreSubpageQueryValue={MORE}
 			sidebarMenuItems={[
 				{
 					id: '1',
@@ -133,12 +132,11 @@ const Page: NextPage<Props> = ({
 export default Page
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
-	const { q: query = '', } = ctx.query
+	const { [QUERY]: query = '', [SUBPAGE]: subpage = null, } = ctx.query
 	return {
 		props: {
 			query,
-			sidebarMainOpen: 'sidebar' in ctx.query,
-			moreItemsOpen: 'more' in ctx.query,
+			subpage,
 		}
 	}
 }

src/utilities/queryKeys.ts

@@ -2,6 +2,4 @@ export const QUERY = 'q'
 
 export const POPUP = 'popup'
 
-export const SIDEBAR = 'sidebar'
-
-export const MORE = 'more'
+export const SUBPAGE = 'subpage'

src/utilities/subpages.ts

@@ -0,0 +1,3 @@
+export const SIDEBAR = 'sidebar'
+
+export const MORE = 'more'