tesseract-design
/
viewfinder


			
				
					
						
						
							
							import type { NextPage } from 'next'
import { Layouts, Widgets } from '@tesseract-design/viewfinder-react';
import {Span} from '@tesseract-design/viewfinder-base';
import {useRouter} from 'next/router';
import {useMemo} from 'react';
import Link from 'next/link';
import {Brand} from '../../components/Brand';
import {DummyLinks} from '../../components/DummyLinks';

const LeftSidebarLayoutPage: NextPage = () => {
  const router = useRouter();
  const sidebarOpen = useMemo(() => router.query.open === 'sidebar', [router]);

  return (
    <Layouts.LeftSidebar.Root
      sidebarBaseWidget={
        <Widgets.LeftSidebarBase
          span={Span.WIDE}
          open={sidebarOpen}
          style={{
            backgroundColor: 'inherit',
          }}
        >
          <Layouts.LeftSidebar.SidebarContentContainer>
            Sidebar
          </Layouts.LeftSidebar.SidebarContentContainer>
        </Widgets.LeftSidebarBase>
      }
      topBarWidget={
        <Widgets.TopBar
          brand={
            <Brand />
          }
          style={{
            backgroundColor: 'inherit',
          }}
          menuLink={
            <Link
              href={{
                query: {
                  open: 'sidebar',
                },
              }}
            >
              Open
            </Link>
          }
          span={Span.WIDE}
        >
          <DummyLinks />
        </Widgets.TopBar>
      }
    >
      <Layouts.LeftSidebar.MainContentContainer>
        Hello
      </Layouts.LeftSidebar.MainContentContainer>
    </Layouts.LeftSidebar.Root>
  )
}

export default LeftSidebarLayoutPage