@@ -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, | |||
}, | |||
}} | |||
> | |||
@@ -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 /> | |||
@@ -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, | |||
} | |||
} | |||
} | |||
@@ -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, | |||
} | |||
} | |||
} | |||
@@ -2,6 +2,4 @@ export const QUERY = 'q' | |||
export const POPUP = 'popup' | |||
export const SIDEBAR = 'sidebar' | |||
export const MORE = 'more' | |||
export const SUBPAGE = 'subpage' |
@@ -0,0 +1,3 @@ | |||
export const SIDEBAR = 'sidebar' | |||
export const MORE = 'more' |