From 96c84e88013241ed7e38f1c78cb03ba7e0d0ee16 Mon Sep 17 00:00:00 2001 From: TheoryOfNekomata Date: Sun, 25 Apr 2021 09:31:33 +0800 Subject: [PATCH] Make Left Sidebar w/ Menu fully mobile-functional This implements the router based on Next.js for left-sidebar-with-menu layout. In addition, the other layouts have been genericized for wider framework support, although the underlying API is still based on Next.js components. --- src/components/molecules/Link/index.tsx | 20 + .../organisms/layouts/Basic/index.tsx | 44 ++- .../organisms/layouts/LeftSidebar/index.tsx | 63 +++- .../layouts/LeftSidebarWithMenu/index.tsx | 351 +++++++++++++++++- .../organisms/layouts/RightSidebar/index.tsx | 66 +++- .../organisms/widgets/TopBar/index.tsx | 79 ++-- .../templates/BasicLayout/index.tsx | 28 +- .../templates/LeftSidebarLayout/index.tsx | 50 ++- .../LeftSidebarWithMenuLayout/index.tsx | 203 ++++++---- .../templates/RightSidebarLayout/index.tsx | 49 ++- src/pages/layouts/basic/index.tsx | 17 +- src/pages/layouts/left-sidebar/index.tsx | 16 + .../layouts/left-sidebar/with-menu/index.tsx | 20 + src/pages/layouts/right-sidebar/index.tsx | 16 + 14 files changed, 833 insertions(+), 189 deletions(-) create mode 100644 src/components/molecules/Link/index.tsx diff --git a/src/components/molecules/Link/index.tsx b/src/components/molecules/Link/index.tsx new file mode 100644 index 0000000..b85b4f1 --- /dev/null +++ b/src/components/molecules/Link/index.tsx @@ -0,0 +1,20 @@ +import NextLink from 'next/link' + +const Link = ({ href, as, prefetch, replace, shallow, component: Component = 'a', ...etcProps }) => { + return ( + + + + ) +} + +export default Link diff --git a/src/components/organisms/layouts/Basic/index.tsx b/src/components/organisms/layouts/Basic/index.tsx index c824093..e98dabc 100644 --- a/src/components/organisms/layouts/Basic/index.tsx +++ b/src/components/organisms/layouts/Basic/index.tsx @@ -1,20 +1,62 @@ import * as React from 'react' import styled from 'styled-components'; import TopBar from '../../widgets/TopBar'; +import {UrlObject} from 'url'; const Main = styled('main')({ boxSizing: 'border-box', }) +export const Container = styled('div')({ + padding: '0 1rem', + boxSizing: 'border-box', + margin: '0 auto', + maxWidth: 'calc(var(--width-base, 360px) * 2)', + width: '100%', +}) + type Props = { query?: string, + brand?: React.ReactNode, + onSearch?: React.FormEventHandler, + searchLabel?: string, + searchName?: string, + searchHint?: string, + linkComponent?: React.ElementType, + menuLink?: UrlObject, + userLink?: UrlObject, + menuLinkLabel?: string, + userLinkLabel?: string, } -const BasicLayout: React.FC = ({ query, children }) => { +const BasicLayout: React.FC = ({ + query, + children, + brand, + onSearch, + searchLabel, + searchName, + searchHint, + linkComponent, + menuLinkLabel, + menuLink, + userLink, + userLinkLabel, +}) => { return ( <>
{children} diff --git a/src/components/organisms/layouts/LeftSidebar/index.tsx b/src/components/organisms/layouts/LeftSidebar/index.tsx index 65c64f6..1bc699e 100644 --- a/src/components/organisms/layouts/LeftSidebar/index.tsx +++ b/src/components/organisms/layouts/LeftSidebar/index.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import styled, {createGlobalStyle} from 'styled-components'; import TopBar from '../../widgets/TopBar'; +import {UrlObject} from 'url'; const DisableScrolling = createGlobalStyle({ 'body': { @@ -52,11 +53,61 @@ const OpenLeftSidebar = styled(LeftSidebar)({ left: 0, }) -const LeftSidebarLayout = ({ +export const SidebarContainer = styled('div')({ + margin: '0 auto', + padding: '0 1rem', + boxSizing: 'border-box', + maxWidth: 'calc(var(--width-base, 360px) * 2)', + '@media (min-width: 1080px)': { + width: 'var(--width-base, 360px)', + marginRight: 0, + }, +}) + +export const Container = styled('div')({ + padding: '0 1rem', + boxSizing: 'border-box', + + width: '100%', + maxWidth: 'calc(var(--width-base, 360px) * 2)', + marginRight: 'auto', + marginLeft: 'auto', + '@media (min-width: 1080px)': { + marginLeft: 0, + }, +}) + +type Props = { + query?: string, + onSearch?: React.FormEventHandler, + searchLabel?: string, + searchName?: string, + searchHint?: string, + brand?: React.ReactNode, + linkComponent?: React.ElementType, + sidebarMain?: React.ReactChild, + sidebarMainOpen?: boolean, + menuLink?: UrlObject, + userLink?: UrlObject, + menuLinkLabel?: string, + userLinkLabel?: string, +} + +const LeftSidebarLayout: React.FC = ({ query, sidebarMain, sidebarMainOpen, children, + onSearch, + searchLabel, + searchName, + searchHint, + brand, + linkComponent, + menuLinkLabel, + menuLink, + userLink, + userLinkLabel, }) => { const LeftSidebarComponent = sidebarMainOpen ? OpenLeftSidebar : LeftSidebar @@ -72,6 +123,16 @@ const LeftSidebarLayout = ({ wide query={query} withMenu + onSearch={onSearch} + searchHint={searchHint} + searchLabel={searchLabel} + searchName={searchName} + brand={brand} + linkComponent={linkComponent} + menuLink={menuLink} + menuLinkLabel={menuLinkLabel} + userLink={userLink} + userLinkLabel={userLinkLabel} /> diff --git a/src/components/organisms/layouts/LeftSidebarWithMenu/index.tsx b/src/components/organisms/layouts/LeftSidebarWithMenu/index.tsx index 79cd187..cc576c8 100644 --- a/src/components/organisms/layouts/LeftSidebarWithMenu/index.tsx +++ b/src/components/organisms/layouts/LeftSidebarWithMenu/index.tsx @@ -1,6 +1,8 @@ import * as React from 'react'; +import * as T from '@tesseract-design/react-common'; import styled, { createGlobalStyle } from 'styled-components'; import TopBar from '../../widgets/TopBar'; +import {UrlObject} from 'url'; const DisableScrolling = createGlobalStyle({ 'body': { @@ -14,6 +16,7 @@ const DisableScrolling = createGlobalStyle({ const Wrapper = styled('div')({ '--width-base': '360px', '--size-menu': '4rem', + '--height-topbar': '4rem', }) const Main = styled('main')({ @@ -86,8 +89,8 @@ const SidebarMenu = styled('div')({ left: 0, width: '100%', height: 'var(--size-menu, 4rem)', - backgroundColor: 'var(--color-bg, white)', zIndex: 1, + backgroundColor: 'var(--color-bg, white)', '@media (prefers-color-scheme: dark)': { backgroundColor: 'var(--color-bg, black)', }, @@ -117,7 +120,7 @@ const SidebarMenuSize = styled('div')({ }, }) -export const SidebarMenuGroup = styled('div')({ +const SidebarMenuGroup = styled('div')({ display: 'contents', '@media (min-width: 1080px)': { width: '100%', @@ -125,19 +128,85 @@ export const SidebarMenuGroup = styled('div')({ }, }) -export const SidebarMenuItem = styled('a')({ - height: 'var(--size-menu, 4rem)', - display: 'flex', - alignItems: 'center', - textDecoration: 'none', +const MoreItems = styled('div')({ + position: 'fixed', + top: 0, + left: '-100%', + width: '100%', + height: '100%', + paddingTop: 'var(--height-topbar, 4rem)', + paddingBottom: 'var(--size-menu, 4rem)', + backgroundColor: 'var(--color-bg, white)', + zIndex: -1, + boxSizing: 'border-box', + '@media (prefers-color-scheme: dark)': { + backgroundColor: 'var(--color-bg, black)', + }, + '@media (min-width: 1080px)': { + display: 'contents', + }, +}) + +const OpenMoreItems = styled(MoreItems)({ + left: 0, +}) + +const MoreItemsScroll = styled('div')({ + width: '100%', + height: '100%', + overflow: 'auto', + '@media (min-width: 1080px)': { + display: 'contents', + }, +}) + +const MorePrimarySidebarMenuGroup = styled(SidebarMenuGroup)({ + '@media (min-width: 1080px)': { + flex: 'auto', + }, +}) + +const MoreSecondarySidebarMenuGroup = styled(SidebarMenuGroup)({ + '@media (min-width: 1080px)': { + order: 4, + }, +}) + +const SidebarMenuItem = styled('span')({ width: 0, flex: 'auto', + height: 'var(--size-menu, 4rem)', + '> *': { + height: '100%', + }, + '@media (min-width: 1080px)': { + width: 'auto !important', + flex: '0 1 auto', + '> *': { + height: 'auto', + } + }, +}) + +const MoreSidebarMenuItem = styled('span')({ + display: 'block', + height: 'var(--size-menu, 4rem)', + '> *': { + height: '100%', + }, + '@media (min-width: 1080px)': { + width: 'auto !important', + flex: '0 1 auto', + }, +}) + +const MoreToggleSidebarMenuItem = styled(SidebarMenuItem)({ '@media (min-width: 1080px)': { - width: 'auto', + display: 'none', }, }) -export const SidebarMenuItemIcon = styled('span')({ +const SidebarMenuItemIcon = styled('span')({ display: 'block', '@media (min-width: 1080px)': { width: 'var(--size-menu, 4rem)', @@ -147,7 +216,19 @@ export const SidebarMenuItemIcon = styled('span')({ }, }) -export const SidebarMenuContainer = styled('span')({ +const MoreSidebarMenuItemIcon = styled('span')({ + marginRight: '1rem', + display: 'block', + '@media (min-width: 1080px)': { + width: 'var(--size-menu, 4rem)', + height: 'var(--size-menu, 4rem)', + display: 'grid', + placeContent: 'center', + marginRight: 0, + }, +}) + +const SidebarMenuContainer = styled('span')({ boxSizing: 'border-box', display: 'grid', placeContent: 'center', @@ -161,22 +242,117 @@ export const SidebarMenuContainer = styled('span')({ marginLeft: 'auto', paddingRight: '1rem', textAlign: 'left', + boxSizing: 'border-box', + }, +}) + +const MoreSidebarMenuContainer = styled('div')({ + display: 'flex', + justifyContent: 'flex-start', + alignItems: 'center', + width: 'calc(var(--width-base, 360px) * 2)', + margin: '0 auto', + padding: '0 1rem', + textAlign: 'left', + boxSizing: 'border-box', + '@media (min-width: 1080px)': { + marginRight: 0, + width: 'var(--width-base, 360px)', + paddingLeft: 0, }, }) -const LeftSidebarWithMenuLayout = ({ +export const Container = styled('div')({ + padding: '0 1rem', + boxSizing: 'border-box', + + width: '100%', + maxWidth: 'calc(var(--width-base, 360px) * 2)', + marginRight: 'auto', + marginLeft: 'auto', + '@media (min-width: 1080px)': { + marginLeft: 0, + }, +}) + +export const SidebarMainContainer = styled('div')({ + padding: '0 1rem', + boxSizing: 'border-box', + width: '100%', + maxWidth: 'calc(var(--width-base, 360px) * 2)', + margin: '0 auto', + '@media (min-width: 1080px)': { + maxWidth: 'none', + }, +}) + +type MenuItem = { + id: string, + label: string, + url: UrlObject, + secondary?: boolean, + icon: React.ReactChild, +} + +type Props = { + query?: string, + onSearch?: React.FormEventHandler, + searchLabel?: string, + searchName?: string, + searchHint?: string, + brand?: React.ReactNode, + linkComponent?: React.ElementType, + sidebarMain?: React.ReactChild, + sidebarMenuItems?: MenuItem[], + sidebarMainOpen?: boolean, + menuLink?: UrlObject, + userLink?: UrlObject, + menuLinkLabel?: string, + userLinkLabel?: string, + moreItemsOpen?: boolean, +} + +const LeftSidebarWithMenuLayout: React.FC = ({ query, children, sidebarMain, - sidebarMenu, + sidebarMenuItems, sidebarMainOpen, + brand, + onSearch, + searchLabel, + searchName, + searchHint, + linkComponent: LinkComponent = 'a', + menuLinkLabel, + menuLink, + userLink, + userLinkLabel, + moreItemsOpen, }) => { const SidebarMainComponent = sidebarMainOpen ? OpenSidebarMain : SidebarMain + const MoreItemsComponent = moreItemsOpen ? OpenMoreItems : MoreItems + const primarySidebarMenuItems = sidebarMenuItems.filter(s => !s.secondary) + const secondarySidebarMenuItems = sidebarMenuItems.filter(s => s.secondary) + + + const visibleSecondarySidebarMenuItems = secondarySidebarMenuItems.slice(0, 1) + const moreSecondarySidebarMenuItems = secondarySidebarMenuItems.slice(1) + const visiblePrimarySidebarMenuItems = ( + visibleSecondarySidebarMenuItems.length === 1 + ? primarySidebarMenuItems.slice(0, 3) + : primarySidebarMenuItems.slice(0, 4) + ) + const morePrimarySidebarMenuItems = ( + visibleSecondarySidebarMenuItems.length === 1 + ? primarySidebarMenuItems.slice(3) + : primarySidebarMenuItems.slice(4) + ) return ( <> { - sidebarMainOpen + (sidebarMainOpen || moreItemsOpen) && ( ) @@ -186,11 +362,158 @@ const LeftSidebarWithMenuLayout = ({ withMenu query={query} wide + brand={brand} + onSearch={onSearch} + linkComponent={LinkComponent} + searchHint={searchHint} + searchLabel={searchLabel} + searchName={searchName} + menuLink={menuLink} + menuLinkLabel={menuLinkLabel} + userLink={userLink} + userLinkLabel={userLinkLabel} /> - {sidebarMenu} + + {visiblePrimarySidebarMenuItems.map((item) => { + return ( + + + + + {item.icon} + + {item.label} + + + + ) + })} + + + + + {morePrimarySidebarMenuItems.map((item) => { + return ( + + + + + {item.icon} + + {item.label} + + + + ) + })} + + + {moreSecondarySidebarMenuItems.map((item) => { + return ( + + + + + {item.icon} + + {item.label} + + + + ) + })} + + + + + + + + + + + More + + + + + { + visibleSecondarySidebarMenuItems.length > 0 + && ( + + {visibleSecondarySidebarMenuItems.map((item, i) => ( + + + + + {item.icon} + + {item.label} + + + + ))} + + ) + } diff --git a/src/components/organisms/layouts/RightSidebar/index.tsx b/src/components/organisms/layouts/RightSidebar/index.tsx index a062951..f2faf9b 100644 --- a/src/components/organisms/layouts/RightSidebar/index.tsx +++ b/src/components/organisms/layouts/RightSidebar/index.tsx @@ -1,5 +1,7 @@ +import * as React from 'react'; import styled from 'styled-components'; import TopBar from '../../widgets/TopBar'; +import {UrlObject} from 'url'; const Main = styled('main')({ boxSizing: 'border-box', @@ -32,22 +34,80 @@ const RightSidebar = styled('div')({ }, }) -const RightSidebarLayout = ({ +export const SidebarContainer = styled('div')({ + padding: '0 1rem', + boxSizing: 'border-box', + width: '100%', + maxWidth: 'calc(var(--width-base, 360px) * 2)', + margin: '0 auto', + '@media (min-width: 1080px)': { + width: 'var(--width-base, 360px)', + marginLeft: 0, + }, +}) + +export const Container = styled('div')({ + padding: '0 1rem', + boxSizing: 'border-box', + width: '100%', + maxWidth: 'calc(var(--width-base, 360px) * 2)', + margin: '0 auto', + '@media (min-width: 1080px)': { + marginRight: 0, + }, +}) + +type Props = { + query?: string, + onSearch?: React.FormEventHandler, + searchLabel?: string, + searchName?: string, + searchHint?: string, + brand?: React.ReactNode, + linkComponent?: React.ElementType, + sidebarMain?: React.ReactChild, + menuLink: UrlObject, + userLink: UrlObject, + menuLinkLabel?: string, + userLinkLabel?: string, +} + +const RightSidebarLayout: React.FC = ({ query, - sidebar, + sidebarMain, children, + brand, + linkComponent, + searchHint, + searchName, + searchLabel, + onSearch, + menuLinkLabel, + menuLink, + userLink, + userLinkLabel, }) => { return ( <>
{children}
- {sidebar} + {sidebarMain} ) diff --git a/src/components/organisms/widgets/TopBar/index.tsx b/src/components/organisms/widgets/TopBar/index.tsx index ce58cc6..dae1c92 100644 --- a/src/components/organisms/widgets/TopBar/index.tsx +++ b/src/components/organisms/widgets/TopBar/index.tsx @@ -1,17 +1,16 @@ import * as React from 'react' import styled from 'styled-components' import * as T from '@tesseract-design/react-common' +import {UrlObject} from 'url'; const Base = styled('div')({ - '--width-base': '360px', - '--height-topbar': '4rem', position: 'fixed', top: 0, left: 0, width: '100%', height: 'var(--height-topbar, 4rem)', backgroundColor: 'var(--color-bg, white)', - zIndex: 1, + zIndex: 2, '@media (prefers-color-scheme: dark)': { backgroundColor: 'var(--color-bg, black)', }, @@ -56,6 +55,9 @@ const SearchContainer = styled('form')({ flex: 'auto', padding: '0 1rem', boxSizing: 'border-box', + ':first-child': { + paddingLeft: 0, + }, }) const UserContainer = styled('div')({ @@ -67,21 +69,13 @@ const UserContainer = styled('div')({ }, }) -const UserLink = styled('a')({ - width: 'var(--height-topbar, 4rem)', - height: '100%', - display: 'inline-grid', - placeContent: 'center', -}) - -const MenuUserLink = styled(UserLink)({ +const MenuUserLinkContainer = styled('span')({ '@media (min-width: 1080px)': { position: 'absolute', left: -999999, }, }) - type Props = { query?: string, onSearch?: React.FormEventHandler, @@ -90,6 +84,12 @@ type Props = { searchHint?: string, wide?: boolean, withMenu?: boolean, + brand?: React.ReactNode, + linkComponent?: React.ElementType, + menuLink: UrlObject, + userLink: UrlObject, + menuLinkLabel?: string, + userLinkLabel?: string, } const TopBar: React.FC = ({ @@ -100,14 +100,25 @@ const TopBar: React.FC = ({ searchHint = 'e.g. keywords, names…', wide, withMenu, + brand, + linkComponent: LinkComponent = 'a', + menuLink, + menuLinkLabel = 'Menu', + userLink, + userLinkLabel = 'Guest', }) => { const ContainerComponent = wide ? WideContainer : Container return ( - - Brand - + { + Boolean(brand) + && ( + + {brand} + + ) + } @@ -130,22 +141,38 @@ const TopBar: React.FC = ({ { withMenu && ( - - - + + + + + ) } - + - + diff --git a/src/components/templates/BasicLayout/index.tsx b/src/components/templates/BasicLayout/index.tsx index 1ca6a19..a0590b6 100644 --- a/src/components/templates/BasicLayout/index.tsx +++ b/src/components/templates/BasicLayout/index.tsx @@ -1,26 +1,34 @@ import * as React from 'react' -import styled from 'styled-components' -import Basic from '../../organisms/layouts/Basic' +import Basic, { Container } from '../../organisms/layouts/Basic' import DummyContent from '../../molecules/DummyContent'; - -const Container = styled('div')({ - padding: '0 1rem', - boxSizing: 'border-box', - margin: '0 auto', - maxWidth: 'calc(var(--width-base, 360px) * 2)', - width: '100%', -}) +import {UrlObject} from 'url'; type Props = { query: string, + linkComponent: React.ElementType, + menuLink: UrlObject, + userLink: UrlObject, + menuLinkLabel: string, + userLinkLabel: string, } const BasicLayoutTemplate: React.FC = ({ query, + linkComponent, + menuLinkLabel, + menuLink, + userLink, + userLinkLabel, }) => { return ( diff --git a/src/components/templates/LeftSidebarLayout/index.tsx b/src/components/templates/LeftSidebarLayout/index.tsx index b1eabed..8adf984 100644 --- a/src/components/templates/LeftSidebarLayout/index.tsx +++ b/src/components/templates/LeftSidebarLayout/index.tsx @@ -1,41 +1,37 @@ import * as React from 'react' -import styled from 'styled-components'; -import LeftSidebarLayout from '../../organisms/layouts/LeftSidebar'; +import LeftSidebarLayout, { SidebarContainer, Container } from '../../organisms/layouts/LeftSidebar'; import DummyContent from '../../molecules/DummyContent'; +import {UrlObject} from 'url'; -const SidebarContainer = styled('div')({ - margin: '0 auto', - padding: '0 1rem', - boxSizing: 'border-box', - maxWidth: 'calc(var(--width-base, 360px) * 2)', - '@media (min-width: 1080px)': { - width: 'var(--width-base, 360px)', - marginRight: 0, - }, -}) - -const Container = styled('div')({ - padding: '0 1rem', - boxSizing: 'border-box', - - width: '100%', - maxWidth: 'calc(var(--width-base, 360px) * 2)', - marginRight: 'auto', - marginLeft: 'auto', - '@media (min-width: 1080px)': { - marginLeft: 0, - }, -}) - +type Props = { + query: string, + linkComponent: React.ElementType, + sidebarMainOpen: boolean, + menuLink: UrlObject, + userLink: UrlObject, + menuLinkLabel: string, + userLinkLabel: string, +} -const LeftSidebarLayoutTemplate = ({ +const LeftSidebarLayoutTemplate: React.FC = ({ query, sidebarMainOpen, + linkComponent, + menuLinkLabel, + menuLink, + userLink, + userLinkLabel, }) => { return ( diff --git a/src/components/templates/LeftSidebarWithMenuLayout/index.tsx b/src/components/templates/LeftSidebarWithMenuLayout/index.tsx index 1478e36..7c303a8 100644 --- a/src/components/templates/LeftSidebarWithMenuLayout/index.tsx +++ b/src/components/templates/LeftSidebarWithMenuLayout/index.tsx @@ -1,102 +1,145 @@ import * as React from 'react' -import styled from 'styled-components'; import * as T from '@tesseract-design/react-common'; import LeftSidebarWithMenuLayout, { - SidebarMenuItemIcon, - SidebarMenuContainer, - SidebarMenuGroup, - SidebarMenuItem, + Container, + SidebarMainContainer, } from '../../organisms/layouts/LeftSidebarWithMenu'; import DummyContent from '../../molecules/DummyContent'; +import {UrlObject} from 'url'; -const Container = styled('div')({ - padding: '0 1rem', - boxSizing: 'border-box', - - width: '100%', - maxWidth: 'calc(var(--width-base, 360px) * 2)', - marginRight: 'auto', - marginLeft: 'auto', - '@media (min-width: 1080px)': { - marginLeft: 0, - }, -}) - -const SidebarMainContainer = styled('div')({ - padding: '0 1rem', - boxSizing: 'border-box', - width: '100%', - maxWidth: 'calc(var(--width-base, 360px) * 2)', - margin: '0 auto', - '@media (min-width: 1080px)': { - maxWidth: 'none', - }, -}) +type Props = { + query: string, + linkComponent: React.ElementType, + sidebarMainOpen: boolean, + menuLink: UrlObject, + userLink: UrlObject, + menuLinkLabel: string, + userLinkLabel: string, + moreItemsOpen: boolean, +} -const LeftSidebarLayoutTemplate = ({ +const LeftSidebarLayoutTemplate: React.FC = ({ query, sidebarMainOpen, + linkComponent, + menuLinkLabel, + menuLink, + userLink, + userLinkLabel, + moreItemsOpen, }) => { return ( } - sidebarMenu={ - <> - - - - - - - Hello - - - - - - - - Hello - - - - - - - - Hello - - - - - - - - - - World - - - - + menuLink={menuLink} + menuLinkLabel={menuLinkLabel} + userLink={userLink} + userLinkLabel={userLinkLabel} + sidebarMenuItems={ + [ + { + id: '1', + label: 'P1', + url: { + href: '/hello', + }, + icon: ( + + ), + }, + { + id: '2', + label: 'P2', + url: { + href: '/hello', + }, + icon: ( + + ), + }, + { + id: '3', + label: 'P3', + url: { + href: '/hello', + }, + icon: ( + + ), + }, + { + id: '100', + label: 'P4', + url: { + href: '/hello', + }, + icon: ( + + ), + }, + { + id: '101', + label: 'P5', + url: { + href: '/hello', + }, + icon: ( + + ), + }, + { + id: '4', + label: 'S1', + url: { + href: '/hello', + }, + icon: ( + + ), + secondary: true, + }, + { + id: '5', + label: 'S2', + url: { + href: '/hello', + }, + icon: ( + + ), + secondary: true, + }, + ] } > diff --git a/src/components/templates/RightSidebarLayout/index.tsx b/src/components/templates/RightSidebarLayout/index.tsx index ee1300d..e11113b 100644 --- a/src/components/templates/RightSidebarLayout/index.tsx +++ b/src/components/templates/RightSidebarLayout/index.tsx @@ -1,38 +1,35 @@ import * as React from 'react' -import styled from 'styled-components'; -import RightSidebarLayout from '../../organisms/layouts/RightSidebar'; +import RightSidebarLayout, { SidebarContainer, Container } from '../../organisms/layouts/RightSidebar'; import DummyContent from '../../molecules/DummyContent'; +import {UrlObject} from 'url'; -const SidebarContainer = styled('div')({ - padding: '0 1rem', - boxSizing: 'border-box', - width: '100%', - maxWidth: 'calc(var(--width-base, 360px) * 2)', - margin: '0 auto', - '@media (min-width: 1080px)': { - width: 'var(--width-base, 360px)', - marginLeft: 0, - }, -}) - -const Container = styled('div')({ - padding: '0 1rem', - boxSizing: 'border-box', - width: '100%', - maxWidth: 'calc(var(--width-base, 360px) * 2)', - margin: '0 auto', - '@media (min-width: 1080px)': { - marginRight: 0, - }, -}) +type Props = { + query: string, + linkComponent: React.ElementType, + menuLink: UrlObject, + userLink: UrlObject, + menuLinkLabel: string, + userLinkLabel: string, +} -const RightSidebarLayoutTemplate = ({ +const RightSidebarLayoutTemplate: React.FC = ({ query, + linkComponent, + menuLinkLabel, + menuLink, + userLink, + userLinkLabel, }) => { return ( diff --git a/src/pages/layouts/basic/index.tsx b/src/pages/layouts/basic/index.tsx index 45b4502..f9753ef 100644 --- a/src/pages/layouts/basic/index.tsx +++ b/src/pages/layouts/basic/index.tsx @@ -1,5 +1,6 @@ import {GetServerSideProps, NextPage} from 'next' import Template from '../../../components/templates/BasicLayout' +import Link from '../../../components/molecules/Link'; type Props = { query: string, @@ -10,7 +11,22 @@ const Page: NextPage = ({ }) => { return (