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

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

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

export const LeftSidebarBase = React.forwardRef<HTMLDivElement, LeftSidebarBaseProps>(({
  children,
  open = false,
  ...etcProps
}, ref) => {
  return (
    <div
      className={clsx(
				'box-border fixed top-0 -left-full w-full h-full bg-bg md:left-0 md:w-[calc(50%-(var(--base-width)*0.5))] scrollbar-hidden',
				open && 'left-0',
			)}
      {...etcProps}
      ref={ref}
    >
      <div
        className="w-full h-full overflow-auto relative z-[1]"
      >
        {children}
      </div>
    </div>
  );
});

LeftSidebarBase.displayName = 'LeftSidebarBase'