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 {LayoutArgs, layouts, Span} from '@tesseract-design/viewfinder-base';

export type LeftSidebarWithMenuBaseProps = Omit<React.HTMLProps<HTMLDivElement>, 'span'> & {
  span?: Span,
}

export const LeftSidebarWithMenuBase = React.forwardRef<HTMLDivElement, LeftSidebarWithMenuBaseProps>(({
  children,
  span = Span.WIDE,
  open = false,
  ...etcProps
}, ref) => {
  const args = React.useMemo<LayoutArgs>(() => ({
    span,
    mainSidebarOpen: open,
  }), [
    span,
    open,
  ]);

  return (
    <div
      className={layouts.LeftSidebarWithMenu.SidebarBase()}
      {...etcProps}
      ref={ref}
    >
      <div
        className={layouts.LeftSidebarWithMenu.SidebarMenu()}
      >
        <div
          className={layouts.LeftSidebarWithMenu.SidebarMenuSize()}
        >
          // TODO
        </div>
      </div>
      <div
        className={layouts.LeftSidebarWithMenu.SidebarMain(args)}
      >
        <div
          className={layouts.LeftSidebarWithMenu.SidebarMainOverflow()}
        >
          {children}
        </div>
      </div>
    </div>
  )
});