viewfinder/packages/react/src/layouts/LeftSidebarWithMenu/index.tsx

import * as React from 'react';
import clsx from 'clsx';

export interface RootProps extends React.HTMLProps<HTMLDivElement> {
  sidebarBaseWidget?: React.ReactNode;
  topBarWidget?: React.ReactNode;
}

export const Root = React.forwardRef<HTMLDivElement, RootProps>(({
  children,
  topBarWidget,
  sidebarBaseWidget,
	className,
  ...etcProps
}, ref) => (
  <>
    {topBarWidget}
    {sidebarBaseWidget}
    <div
      {...etcProps}
      ref={ref}
			data-viewfinder="main"
      className={clsx(
				'box-border pb-menu md:pb-0 md:pl-[calc(50%-(var(--base-width)*0.5))]',
				className,
			)}
    >
      {children}
    </div>
  </>
));

export interface ContentContainerProps extends React.HTMLProps<HTMLDivElement> {}

export const MainContentContainer = React.forwardRef<HTMLDivElement, ContentContainerProps>(({
  children,
	className,
	...etcProps
}, ref) => (
  <div
		{...etcProps}
    className={clsx(
			'px-8 box-border w-full max-w-[calc(var(--base-width)*2)] mx-auto md:ml-0',
			className,
		)}
    ref={ref}
  >
    {children}
  </div>
));

MainContentContainer.displayName = 'MainContentContainer'

export interface SidebarMainContainerProps extends React.HTMLProps<HTMLDivElement> {}

export const SidebarContentContainer = React.forwardRef<HTMLDivElement, SidebarMainContainerProps>(({
  children,
	className,
  ...etcProps
}, ref) => (
  <div
    {...etcProps}
    className={clsx(
			'px-8 box-border w-full max-w-[calc(var(--base-width)*2)] mx-auto md:max-w-none',
			className,
		)}
    ref={ref}
  >
    {children}
  </div>
));

SidebarContentContainer.displayName = 'SidebarMainContainer';

export interface SidebarMenuItemIconProps extends React.HTMLProps<HTMLSpanElement> {}

export const SidebarMenuItemIcon = React.forwardRef<HTMLSpanElement, SidebarMenuItemIconProps>(({
  children,
	className,
  ...etcProps
}, ref) => (
  <span
    {...etcProps}
    className={clsx(
			'block md:w-menu md:h-menu md:flex md:justify-center md:items-center',
			className,
		)}
    ref={ref}
  >
    {children}
  </span>
));

SidebarMenuItemIcon.displayName = 'SidebarMenuItemIcon';

export const SidebarMenuContainer = React.forwardRef<HTMLSpanElement, SidebarMainContainerProps>(({
  children,
	className,
  ...etcProps
}, ref) => (
  <span
    {...etcProps}
    className={clsx(
			'box-border flex flex-col justify-center items-center w-full text-center md:justify-start md:ml-auto md:text-left md:w-[var(--base-width)] md:flex-row',
			className,
		)}
    ref={ref}
  >
    {children}
  </span>
));

SidebarMenuContainer.displayName = 'SidebarMenuContainer';


export const MoreSidebarMenuItemIcon = React.forwardRef<HTMLSpanElement, SidebarMenuItemIconProps>(({
  children,
	className,
  ...etcProps
}, ref) => (
  <span
    {...etcProps}
    className={clsx(
			'block mr-4 md:w-menu md:h-menu md:flex md:justify-center md:items-center md:mr-0',
			className,
		)}
    ref={ref}
  >
    {children}
  </span>
));

MoreSidebarMenuItemIcon.displayName = 'MoreSidebarMenuItemIcon';

export const MoreSidebarMenuContainer = React.forwardRef<HTMLSpanElement, SidebarMainContainerProps>(({
  children,
	className,
  ...etcProps
}, ref) => (
  <span
    {...etcProps}
    className={clsx(
			'flex justify-start items-center w-[calc(var(--base-width)*2)] mx-auto px-8 text-left box-border md:mr-0 md:w-[var(--base-width)] md:pl-0',
			className,
		)}
    ref={ref}
  >
    {children}
  </span>
));

MoreSidebarMenuContainer.displayName = 'MoreSidebarMenuContainer';