Browse Source

Modify groupings

Group "more" and the sidebar into one subpage key.
master
TheoryOfNekomata 3 years ago
parent
commit
8d7fa95ed6
6 changed files with 43 additions and 40 deletions
  1. +8
    -6
      src/components/templates/LeftSidebarLayout/index.tsx
  2. +12
    -12
      src/components/templates/LeftSidebarWithMenuLayout/index.tsx
  3. +9
    -7
      src/pages/layouts/left-sidebar/index.tsx
  4. +10
    -12
      src/pages/layouts/left-sidebar/with-menu/index.tsx
  5. +1
    -3
      src/utilities/queryKeys.ts
  6. +3
    -0
      src/utilities/subpages.ts

+ 8
- 6
src/components/templates/LeftSidebarLayout/index.tsx View File

@@ -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,
},
}}
>


+ 12
- 12
src/components/templates/LeftSidebarWithMenuLayout/index.tsx View File

@@ -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 />


+ 9
- 7
src/pages/layouts/left-sidebar/index.tsx View File

@@ -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,
}
}
}


+ 10
- 12
src/pages/layouts/left-sidebar/with-menu/index.tsx View File

@@ -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,
}
}
}


+ 1
- 3
src/utilities/queryKeys.ts View File

@@ -2,6 +2,4 @@ export const QUERY = 'q'

export const POPUP = 'popup'

export const SIDEBAR = 'sidebar'

export const MORE = 'more'
export const SUBPAGE = 'subpage'

+ 3
- 0
src/utilities/subpages.ts View File

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

export const MORE = 'more'

Loading…
Cancel
Save