|
- import {LeftSidebarWithMenu} from '@theoryofnekomata/viewfinder';
- import Brand from '../../../molecules/brand/Brand';
- import Link from '../../../molecules/navigation/Link';
- import OmnisearchForm from '../../forms/Omnisearch';
- import {moreLinkMenuItem, sidebarMenuItems} from '../../../../data/layout';
- import {FC, FormEventHandler} from 'react';
- import {Session} from '@auth0/nextjs-auth0';
- import styled from 'styled-components';
- import Avatar from '../../../molecules/presentation/Avatar';
-
- const TopBarComponent = styled('div')({
- backgroundColor: 'var(--color-bg, white)',
- position: 'relative',
- '::before': {
- content: "''",
- position: 'absolute',
- bottom: 0,
- left: 0,
- width: '100%',
- height: '0.0625rem',
- pointerEvents: 'none',
- backgroundColor: 'currentcolor',
- opacity: 0.25,
- },
- })
-
- const SidebarMenuComponent = styled('div')({
- backgroundColor: 'var(--color-bg, white)',
- '::before': {
- content: "''",
- position: 'absolute',
- top: 0,
- right: 0,
- height: '100%',
- width: '0.0625rem',
- pointerEvents: 'none',
- backgroundColor: 'currentcolor',
- opacity: 0.25,
- },
- })
-
- type Props = {
- onSearch?: FormEventHandler,
- session?: Partial<Session>,
- }
-
- const BasicLayout: FC<Props> = ({
- onSearch,
- session,
- children,
- }) => {
- return (
- <LeftSidebarWithMenu.Layout
- brand={
- <Brand />
- }
- userLink={
- <Link
- href={{
- query: {
- popup: 'user',
- },
- }}
- >
- <Avatar
- src={session.user.picture}
- />
- </Link>
- }
- topBarComponent={TopBarComponent}
- sidebarMenuComponent={SidebarMenuComponent}
- topBarCenter={
- <OmnisearchForm
- labels={{
- form: 'Search',
- query: 'Query',
- }}
- onSubmit={onSearch}
- action="/api/a/search"
- />
- }
- linkComponent={({ url, icon, label, }) => (
- <Link
- href={url}
- >
- <LeftSidebarWithMenu.SidebarMenuContainer>
- <LeftSidebarWithMenu.SidebarMenuItemIcon>
- {icon}
- </LeftSidebarWithMenu.SidebarMenuItemIcon>
- {label}
- </LeftSidebarWithMenu.SidebarMenuContainer>
- </Link>
- )}
- moreLinkMenuItem={moreLinkMenuItem}
- moreLinkComponent={({ url, icon, label, }) => (
- <Link
- href={url}
- >
- <LeftSidebarWithMenu.MoreSidebarMenuContainer>
- <LeftSidebarWithMenu.MoreSidebarMenuItemIcon>
- {icon}
- </LeftSidebarWithMenu.MoreSidebarMenuItemIcon>
- {label}
- </LeftSidebarWithMenu.MoreSidebarMenuContainer>
- </Link>
- )}
- sidebarMenuItems={sidebarMenuItems}
- >
- {children}
- </LeftSidebarWithMenu.Layout>
- )
- }
-
- export default BasicLayout
|