|
- // TODO figure out how to refactor left sidebar with menu widget
-
- import * as React from 'react';
- import {Span} from '@tesseract-design/viewfinder-base';
- import clsx from 'clsx';
-
- type BaseMenuItem = {
- label: React.ReactNode,
- icon: React.ReactNode,
- url: unknown,
- }
-
- export type MenuItem = BaseMenuItem & {
- id: string,
- secondary?: boolean,
- }
-
- export type LeftSidebarWithMenuBaseProps = Omit<React.HTMLProps<HTMLDivElement>, 'span'> & {
- span?: Span,
- items?: MenuItem[],
- linkComponent?: React.ElementType,
- moreLinkComponent?: React.ElementType,
- moreLinkItem?: BaseMenuItem,
- moreItemsOpen?: boolean,
- open?: boolean,
- }
-
- export const LeftSidebarWithMenuBase = React.forwardRef<HTMLDivElement, LeftSidebarWithMenuBaseProps>(({
- children,
- span = 'wide',
- open = false,
- items: sidebarMenuItems = [],
- linkComponent: LinkComponent = 'a',
- moreLinkComponent: MoreLinkComponent = LinkComponent,
- moreLinkItem,
- moreItemsOpen = false,
- ...etcProps
- }, ref) => {
- 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)
- )
- const hasMoreSidebarMenuItems = (
- morePrimarySidebarMenuItems.length > 0
- || moreSecondarySidebarMenuItems.length > 0
- )
-
- return (
- <div
- className="left-sidebar-with-menu-base box-border overflow-hidden contents left-[calc(var(--base-width)*-1)] md:fixed md:top-0 md:left-0 md:w-[calc(50%-var(--base-width)*0.5)] md:h-full md:block"
- {...etcProps}
- ref={ref}
- >
- <div
- data-viewfinder="menu"
- className="box-border scrollbar-hidden overflow-auto fixed bottom-0 left-0 w-full h-menu z-[3] bg-bg md:top-0 md:ml-auto md:absolute md:h-full md:pt-inherit md:overflow-auto md:z-auto"
- >
- <div className="w-full h-full bg-bg">
- <div
- className="flex w-full h-full max-w-[calc(var(--base-width)*2)] mx-auto relative z-[1] md:max-w-none md:mr-0 md:flex-col md:justify-between md:items-end"
- >
- <div
- className="contents md:w-full md:block"
- >
- {visiblePrimarySidebarMenuItems.map(({ id, ...item }) => (
- <span
- key={id}
- className="w-0 flex-auto h-menu md:flex-shrink-0 md:flex-grow"
- data-viewfinder="menu-item"
- >
- <LinkComponent
- {...item}
- />
- </span>
- ))}
- </div>
- <div
- className={clsx(
- 'fixed top-0 w-full h-full pt-topbar pb-menu -z-[1] box-border md:contents',
- moreItemsOpen ? 'left-0': '-left-full',
- )}
- >
- <div
- className="w-full h-full overflow-auto bg-bg md:contents"
- >
- <div
- className="contents md:w-full md:block md:flex-auto"
- >
- {morePrimarySidebarMenuItems.map(({ id, ...item }) => (
- <span
- key={id}
- data-viewfinder="menu-item"
- className="h-menu block md:flex-shrink-0 md:flex-grow md:flex-auto"
- >
- <MoreLinkComponent
- {...item}
- />
- </span>
- ))}
- </div>
- <div
- className="contents md:w-full md:block md:order-4"
- >
- {moreSecondarySidebarMenuItems.map(({ id, ...item }) => (
- <span
- key={id}
- data-viewfinder="menu-item"
- className="h-menu block md:flex-shrink-0 md:flex-grow md:flex-auto"
- >
- <MoreLinkComponent
- {...item}
- />
- </span>
- ))}
- </div>
- </div>
- </div>
- {hasMoreSidebarMenuItems && (
- <span
- className="contents md:hidden"
- >
- <span
- className="w-0 flex-auto h-menu md:flex-shrink-0 md:flex-grow md:flex-auto"
- data-viewfinder="menu-item"
- >
- <LinkComponent
- {...moreLinkItem}
- />
- </span>
- </span>
- )}
- {visibleSecondarySidebarMenuItems.length > 0 && (
- <div
- className="contents md:w-full md:block"
- >
- {visibleSecondarySidebarMenuItems.map(({ id, ...item }) => (
- <span
- key={id}
- className="w-0 flex-auto h-menu md:flex-shrink-0 md:flex-grow md:flex-auto"
- data-viewfinder="menu-item"
- >
- <LinkComponent
- {...item}
- />
- </span>
- ))}
- </div>
- )}
- </div>
- </div>
- </div>
- {children && (
- <div
- className={clsx(
- 'box-border fixed top-0 w-full h-full pt-inherit pb-menu z-[2] bg-bg',
- open ? 'right-0': 'right-full',
- 'md:absolute md:right-0 md:ml-0 md:pb-0 md:w-[calc(var(--base-width)-var(--size-menu,4rem))]'
- )}
- >
- <div
- className="bg-bg w-full h-full overflow-auto scrollbar-hidden relative z-[1]"
- >
- {children}
- </div>
- </div>
- )}
- </div>
- )
- });
|