diff --git a/src/components/organisms/layouts/LeftSidebar/index.tsx b/src/components/organisms/layouts/LeftSidebar/index.tsx index 6f0a19b..65c64f6 100644 --- a/src/components/organisms/layouts/LeftSidebar/index.tsx +++ b/src/components/organisms/layouts/LeftSidebar/index.tsx @@ -1,5 +1,15 @@ -import styled from 'styled-components'; -import WideTopBar from '../../widgets/WideTopBar'; +import * as React from 'react'; +import styled, {createGlobalStyle} from 'styled-components'; +import TopBar from '../../widgets/TopBar'; + +const DisableScrolling = createGlobalStyle({ + 'body': { + overflow: 'hidden', + '@media (min-width: 1080px)': { + overflow: 'auto', + }, + }, +}) const Main = styled('main')({ boxSizing: 'border-box', @@ -8,14 +18,24 @@ const Main = styled('main')({ }, }) +const SidebarOverflow = styled('div')({ + width: '100%', + height: '100%', + overflow: 'auto', + scrollbarWidth: 'none', + '::-webkit-scrollbar': { + display: 'none', + }, +}) + const LeftSidebar = styled('div')({ '--width-base': '360px', '--size-menu': '4rem', boxSizing: 'border-box', position: 'fixed', top: 0, - left: 'calc(var(--width-base, 360px) * -1)', - width: 'calc(50% - var(--width-base, 360px) * 0.5)', + left: '-100%', + width: '100%', height: '100%', backgroundColor: 'var(--color-bg, white)', overflow: 'hidden', @@ -23,23 +43,41 @@ const LeftSidebar = styled('div')({ backgroundColor: 'var(--color-bg, black)', }, '@media (min-width: 1080px)': { + width: 'calc(50% - var(--width-base, 360px) * 0.5)', left: 0, }, }) +const OpenLeftSidebar = styled(LeftSidebar)({ + left: 0, +}) + const LeftSidebarLayout = ({ query, - sidebar, + sidebarMain, + sidebarMainOpen, children, }) => { + const LeftSidebarComponent = sidebarMainOpen ? OpenLeftSidebar : LeftSidebar + return ( <> - + ) + } + - - {sidebar} - + + + {sidebarMain} + +
{children}
diff --git a/src/components/organisms/layouts/LeftSidebarWithMenu/index.tsx b/src/components/organisms/layouts/LeftSidebarWithMenu/index.tsx new file mode 100644 index 0000000..79cd187 --- /dev/null +++ b/src/components/organisms/layouts/LeftSidebarWithMenu/index.tsx @@ -0,0 +1,208 @@ +import * as React from 'react'; +import styled, { createGlobalStyle } from 'styled-components'; +import TopBar from '../../widgets/TopBar'; + +const DisableScrolling = createGlobalStyle({ + 'body': { + overflow: 'hidden', + '@media (min-width: 1080px)': { + overflow: 'auto', + }, + }, +}) + +const Wrapper = styled('div')({ + '--width-base': '360px', + '--size-menu': '4rem', +}) + +const Main = styled('main')({ + boxSizing: 'border-box', + paddingBottom: 'var(--size-menu, 4rem)', + '@media (min-width: 1080px)': { + paddingLeft: 'calc(50% - var(--width-base, 360px) * 0.5)', + paddingBottom: 0, + }, +}) + +const LeftSidebar = styled('div')({ + boxSizing: 'border-box', + backgroundColor: 'var(--color-bg, white)', + overflow: 'hidden', + display: 'contents', + left: 'calc(var(--width-base, 360px) * -1)', + '@media (prefers-color-scheme: dark)': { + backgroundColor: 'var(--color-bg, black)', + }, + '@media (min-width: 1080px)': { + position: 'fixed', + top: 0, + left: 0, + width: 'calc(50% - var(--width-base, 360px) * 0.5)', + height: '100%', + display: 'block', + }, +}) + +const SidebarMain = styled('div')({ + scrollbarWidth: 'none', + backgroundColor: 'var(--color-bg, white)', + boxSizing: 'border-box', + position: 'fixed', + top: 0, + right: '100%', + width: '100%', + height: '100%', + overflow: 'auto', + paddingTop: 'inherit', + paddingBottom: 'var(--size-menu, 4rem)', + '@media (prefers-color-scheme: dark)': { + backgroundColor: 'var(--color-bg, black)', + }, + '::-webkit-scrollbar': { + display: 'none', + }, + '@media (min-width: 1080px)': { + position: 'absolute', + right: 0, + width: 'calc(var(--width-base, 360px) - var(--size-menu, 4rem))', + marginLeft: 'auto', + paddingBottom: 0, + }, +}) + +const OpenSidebarMain = styled(SidebarMain)({ + right: 0, +}) + +const SidebarMenu = styled('div')({ + boxSizing: 'border-box', + scrollbarWidth: 'none', + '::-webkit-scrollbar': { + display: 'none', + }, + position: 'fixed', + bottom: 0, + left: 0, + width: '100%', + height: 'var(--size-menu, 4rem)', + backgroundColor: 'var(--color-bg, white)', + zIndex: 1, + '@media (prefers-color-scheme: dark)': { + backgroundColor: 'var(--color-bg, black)', + }, + '@media (min-width: 1080px)': { + top: 0, + marginLeft: 'auto', + position: 'absolute', + height: '100%', + paddingTop: 'inherit', + overflow: 'auto', + zIndex: 'auto', + }, +}) + +const SidebarMenuSize = styled('div')({ + display: 'flex', + width: '100%', + height: '100%', + maxWidth: 'calc(var(--width-base, 360px) * 2)', + margin: '0 auto', + '@media (min-width: 1080px)': { + maxWidth: 'none', + marginRight: 0, + flexDirection: 'column', + justifyContent: 'space-between', + alignItems: 'flex-end', + }, +}) + +export const SidebarMenuGroup = styled('div')({ + display: 'contents', + '@media (min-width: 1080px)': { + width: '100%', + display: 'block', + }, +}) + +export const SidebarMenuItem = styled('a')({ + height: 'var(--size-menu, 4rem)', + display: 'flex', + alignItems: 'center', + textDecoration: 'none', + width: 0, + flex: 'auto', + '@media (min-width: 1080px)': { + width: 'auto', + }, +}) + +export const SidebarMenuItemIcon = styled('span')({ + display: 'block', + '@media (min-width: 1080px)': { + width: 'var(--size-menu, 4rem)', + height: 'var(--size-menu, 4rem)', + display: 'grid', + placeContent: 'center', + }, +}) + +export const SidebarMenuContainer = styled('span')({ + boxSizing: 'border-box', + display: 'grid', + placeContent: 'center', + width: '100%', + textAlign: 'center', + '@media (min-width: 1080px)': { + display: 'flex', + justifyContent: 'flex-start', + alignItems: 'center', + width: 'var(--width-base, 360px)', + marginLeft: 'auto', + paddingRight: '1rem', + textAlign: 'left', + }, +}) + +const LeftSidebarWithMenuLayout = ({ + query, + children, + sidebarMain, + sidebarMenu, + sidebarMainOpen, +}) => { + const SidebarMainComponent = sidebarMainOpen ? OpenSidebarMain : SidebarMain + + return ( + <> + { + sidebarMainOpen + && ( + + ) + } + + + + + + {sidebarMenu} + + + + {sidebarMain} + + +
+ {children} +
+ + + ) +} + +export default LeftSidebarWithMenuLayout diff --git a/src/components/organisms/layouts/RightSidebar/index.tsx b/src/components/organisms/layouts/RightSidebar/index.tsx index bb6e5a8..a062951 100644 --- a/src/components/organisms/layouts/RightSidebar/index.tsx +++ b/src/components/organisms/layouts/RightSidebar/index.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import WideTopBar from '../../widgets/WideTopBar'; +import TopBar from '../../widgets/TopBar'; const Main = styled('main')({ boxSizing: 'border-box', @@ -12,12 +12,19 @@ const RightSidebar = styled('div')({ '--width-base': '360px', boxSizing: 'border-box', backgroundColor: 'var(--color-bg, white)', + // prevent collapse of margin + '::after': { + content: "''", + display: 'block', + paddingBottom: 1, + marginTop: -1, + boxSizing: 'border-box', + }, '@media (prefers-color-scheme: dark)': { backgroundColor: 'var(--color-bg, black)', }, - '@media (min-width: 1080px)': { - position: 'fixed', + position: 'absolute', top: 0, right: 0, width: 'calc(50% - var(--width-base, 360px) * 0.5)', @@ -25,15 +32,16 @@ const RightSidebar = styled('div')({ }, }) -const LeftSidebarLayout = ({ +const RightSidebarLayout = ({ query, sidebar, children, }) => { return ( <> -
{children} @@ -45,4 +53,4 @@ const LeftSidebarLayout = ({ ) } -export default LeftSidebarLayout +export default RightSidebarLayout diff --git a/src/components/organisms/widgets/TopBar/index.tsx b/src/components/organisms/widgets/TopBar/index.tsx index 55b1df9..ce58cc6 100644 --- a/src/components/organisms/widgets/TopBar/index.tsx +++ b/src/components/organisms/widgets/TopBar/index.tsx @@ -18,6 +18,14 @@ const Base = styled('div')({ '~ *': { paddingTop: 'var(--height-topbar, 4rem)', }, + '~ main ~ *': { + paddingTop: 0, + }, + '@media (min-width: 1080px)': { + '~ main ~ *': { + paddingTop: 'var(--height-topbar, 4rem)', + }, + }, }) const Container = styled('div')({ @@ -31,6 +39,12 @@ const Container = styled('div')({ alignItems: 'center', }) +const WideContainer = styled(Container)({ + '@media (min-width: 1080px)': { + maxWidth: 'calc(var(--width-base, 360px) * 3)', + }, +}) + const BrandContainer = styled('div')({ width: '6rem', '@media (min-width: 720px)': { @@ -46,17 +60,36 @@ const SearchContainer = styled('form')({ const UserContainer = styled('div')({ textAlign: 'right', + height: '100%', + whiteSpace: 'nowrap', '@media (min-width: 720px)': { minWidth: '8rem', }, }) +const UserLink = styled('a')({ + width: 'var(--height-topbar, 4rem)', + height: '100%', + display: 'inline-grid', + placeContent: 'center', +}) + +const MenuUserLink = styled(UserLink)({ + '@media (min-width: 1080px)': { + position: 'absolute', + left: -999999, + }, +}) + + type Props = { query?: string, onSearch?: React.FormEventHandler, searchLabel?: string, searchName?: string, searchHint?: string, + wide?: boolean, + withMenu?: boolean, } const TopBar: React.FC = ({ @@ -65,10 +98,13 @@ const TopBar: React.FC = ({ searchLabel = 'Search', searchName = 'q', searchHint = 'e.g. keywords, names…', + wide, + withMenu, }) => { + const ContainerComponent = wide ? WideContainer : Container return ( - + Brand @@ -82,12 +118,36 @@ const TopBar: React.FC = ({ defaultValue={query} border alternate + indicator={ + + } /> - User + { + withMenu + && ( + + + + ) + } + + + - + ) } diff --git a/src/components/organisms/widgets/WideTopBar/index.tsx b/src/components/organisms/widgets/WideTopBar/index.tsx deleted file mode 100644 index db63d26..0000000 --- a/src/components/organisms/widgets/WideTopBar/index.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import * as React from 'react' -import styled from 'styled-components' -import * as T from '@tesseract-design/react-common' - -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, - '@media (prefers-color-scheme: dark)': { - backgroundColor: 'var(--color-bg, black)', - }, - '~ *': { - paddingTop: 'var(--height-topbar, 4rem)', - }, -}) - -const Container = styled('div')({ - padding: '0 1rem', - boxSizing: 'border-box', - margin: '0 auto', - width: '100%', - height: '100%', - display: 'flex', - alignItems: 'center', - maxWidth: 'calc(var(--width-base, 360px) * 2)', - '@media (min-width: 1080px)': { - maxWidth: 'calc(var(--width-base, 360px) * 3)', - }, -}) - -const BrandContainer = styled('div')({ - width: '6rem', - '@media (min-width: 720px)': { - width: '8rem', - }, -}) - -const SearchContainer = styled('form')({ - flex: 'auto', - padding: '0 1rem', - boxSizing: 'border-box', -}) - -const UserContainer = styled('div')({ - textAlign: 'right', - '@media (min-width: 720px)': { - minWidth: '8rem', - }, -}) - -type Props = { - query?: string, - onSearch?: React.FormEventHandler, - searchLabel?: string, - searchName?: string, - searchHint?: string, -} - -const TopBar: React.FC = ({ - query, - onSearch, - searchLabel = 'Search', - searchName = 'q', - searchHint = 'e.g. keywords, names…', -}) => { - return ( - - - - Brand - - - - - - User - - - - ) -} - -export default TopBar diff --git a/src/components/templates/LeftSidebarLayout/index.tsx b/src/components/templates/LeftSidebarLayout/index.tsx index 39b535a..b1eabed 100644 --- a/src/components/templates/LeftSidebarLayout/index.tsx +++ b/src/components/templates/LeftSidebarLayout/index.tsx @@ -3,21 +3,15 @@ import styled from 'styled-components'; import LeftSidebarLayout from '../../organisms/layouts/LeftSidebar'; import DummyContent from '../../molecules/DummyContent'; -const SidebarOverflow = styled('div')({ - width: '100%', - height: '100%', - overflow: 'auto', - scrollbarWidth: 'none', - '::-webkit-scrollbar': { - display: 'none', - }, -}) - const SidebarContainer = styled('div')({ - width: 'var(--width-base, 360px)', - marginLeft: 'auto', + 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')({ @@ -36,16 +30,16 @@ const Container = styled('div')({ const LeftSidebarLayoutTemplate = ({ query, + sidebarMainOpen, }) => { return ( - - - - + sidebarMainOpen={sidebarMainOpen} + sidebarMain={ + + + } > diff --git a/src/components/templates/LeftSidebarWithMenuLayout/index.tsx b/src/components/templates/LeftSidebarWithMenuLayout/index.tsx index 2bb134d..1478e36 100644 --- a/src/components/templates/LeftSidebarWithMenuLayout/index.tsx +++ b/src/components/templates/LeftSidebarWithMenuLayout/index.tsx @@ -1,75 +1,14 @@ import * as React from 'react' import styled from 'styled-components'; -import LeftSidebarLayout from '../../organisms/layouts/LeftSidebar'; +import * as T from '@tesseract-design/react-common'; +import LeftSidebarWithMenuLayout, { + SidebarMenuItemIcon, + SidebarMenuContainer, + SidebarMenuGroup, + SidebarMenuItem, +} from '../../organisms/layouts/LeftSidebarWithMenu'; import DummyContent from '../../molecules/DummyContent'; -const SidebarMenuGroup = styled('div')({ - width: '100%', -}) - -const SidebarMenuItem = styled('a')({ - height: 'var(--size-menu, 4rem)', - display: 'flex', - alignItems: 'center', - textDecoration: 'none', -}) - -const SidebarMenuItemIcon = styled('span')({ - width: 'var(--size-menu, 4rem)', - height: 'var(--size-menu, 4rem)', - display: 'grid', - placeContent: 'center', -}) - -const SidebarMenu = styled('div')({ - top: 0, - marginLeft: 'auto', - position: 'absolute', - height: '100%', - width: '100%', - paddingTop: 'inherit', - display: 'flex', - flexDirection: 'column', - justifyContent: 'space-between', - alignItems: 'flex-end', - boxSizing: 'border-box', - overflow: 'auto', - scrollbarWidth: 'none', - '::-webkit-scrollbar': { - display: 'none', - }, -}) - -const SidebarMenuContainer = styled('span')({ - width: 'var(--width-base, 360px)', - marginLeft: 'auto', - paddingRight: '1rem', - boxSizing: 'border-box', - display: 'flex', - alignItems: 'center', -}) - -const SidebarMain = styled('div')({ - width: 'calc(var(--width-base, 360px) - var(--size-menu, 4rem))', - marginLeft: 'auto', - height: '100%', - padding: '0 1rem', - paddingTop: 'inherit', - boxSizing: 'border-box', - overflow: 'auto', - position: 'absolute', - top: 0, - right: 0, - scrollbarWidth: 'none', - backgroundColor: 'var(--color-bg, white)', - '@media (prefers-color-scheme: dark)': { - backgroundColor: 'var(--color-bg, black)', - }, - '::-webkit-scrollbar': { - display: 'none', - }, -}) - const Container = styled('div')({ padding: '0 1rem', boxSizing: 'border-box', @@ -83,63 +22,87 @@ const Container = styled('div')({ }, }) +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', + }, +}) const LeftSidebarLayoutTemplate = ({ query, + sidebarMainOpen, }) => { return ( - + + + } + sidebarMenu={ <> - - - - - - A - - Hello - - - - - - B - - Hello - - - - - - C - - Hello - - - - - - - - D - - World - - - - - - - + + + + + + + Hello + + + + + + + + Hello + + + + + + + + Hello + + + + + + + + + + World + + + } > - + ) } diff --git a/src/components/templates/RightSidebarLayout/index.tsx b/src/components/templates/RightSidebarLayout/index.tsx index 4660d6a..ee1300d 100644 --- a/src/components/templates/RightSidebarLayout/index.tsx +++ b/src/components/templates/RightSidebarLayout/index.tsx @@ -3,49 +3,39 @@ import styled from 'styled-components'; import RightSidebarLayout from '../../organisms/layouts/RightSidebar'; import DummyContent from '../../molecules/DummyContent'; -const SidebarOverflow = styled('div')({ - width: '100%', - height: '100%', - overflow: 'auto', - scrollbarWidth: 'none', - '::-webkit-scrollbar': { - display: 'none', - }, -}) - 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)', - marginRight: 'auto', - marginLeft: 'auto', + margin: '0 auto', '@media (min-width: 1080px)': { marginRight: 0, }, }) -const LeftSidebarLayoutTemplate = ({ +const RightSidebarLayoutTemplate = ({ query, }) => { return ( - - - - + + + } > @@ -55,4 +45,4 @@ const LeftSidebarLayoutTemplate = ({ ) } -export default LeftSidebarLayoutTemplate +export default RightSidebarLayoutTemplate diff --git a/src/pages/layouts/left-sidebar/index.tsx b/src/pages/layouts/left-sidebar/index.tsx index d59de0e..256ce31 100644 --- a/src/pages/layouts/left-sidebar/index.tsx +++ b/src/pages/layouts/left-sidebar/index.tsx @@ -3,14 +3,17 @@ import Template from '../../../components/templates/LeftSidebarLayout' type Props = { query: string, + sidebarMainOpen: boolean, } const Page: NextPage = ({ query, + sidebarMainOpen, }) => { return (