viewfinder/packages/react/src/widgets/LeftSidebarWithMenuBase/index.tsx

// TODO figure out how to refactor left sidebar with menu widget

import * as React from 'react';
import {SpanValues as 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>
  )
});