|
- import * as React from 'react';
-
- export interface RootProps extends React.HTMLProps<HTMLDivElement> {
- sidebarBaseWidget?: React.ReactNode;
- topBarWidget?: React.ReactNode;
- };
-
- export const Root = React.forwardRef<HTMLDivElement, RootProps>(({
- children,
- topBarWidget,
- sidebarBaseWidget,
- ...etcProps
- }, ref) => (
- <>
- {topBarWidget}
- {sidebarBaseWidget}
- <div
- {...etcProps}
- ref={ref}
- data-viewfinder="main"
- className="box-border pb-menu md:pb-0 md:pl-[calc(50%-(var(--base-width)*0.5))]"
- >
- {children}
- </div>
- </>
- ));
-
- export interface ContentContainerProps extends React.HTMLProps<HTMLDivElement> {}
-
- export const MainContentContainer = React.forwardRef<HTMLDivElement, ContentContainerProps>(({
- children,
- }, ref) => (
- <div
- className="px-8 box-border w-full max-w-[calc(var(--base-width)*2)] mx-auto md:ml-0"
- ref={ref}
- >
- {children}
- </div>
- ));
-
- MainContentContainer.displayName = 'MainContentContainer'
-
- export interface SidebarMainContainerProps extends React.HTMLProps<HTMLDivElement> {}
-
- export const SidebarContentContainer = React.forwardRef<HTMLDivElement, SidebarMainContainerProps>(({
- children,
- ...etcProps
- }, ref) => (
- <div
- {...etcProps}
- className="px-8 box-border w-full max-w-[calc(var(--base-width)*2)] mx-auto md:max-w-none"
- ref={ref}
- >
- {children}
- </div>
- ));
-
- SidebarContentContainer.displayName = 'SidebarMainContainer';
-
- export interface SidebarMenuItemIconProps extends React.HTMLProps<HTMLSpanElement> {}
-
- export const SidebarMenuItemIcon = React.forwardRef<HTMLSpanElement, SidebarMenuItemIconProps>(({
- children,
- ...etcProps
- }, ref) => (
- <span
- {...etcProps}
- className="block md:w-menu md:h-menu md:flex md:justify-center md:items-center"
- ref={ref}
- >
- {children}
- </span>
- ));
-
- SidebarMenuItemIcon.displayName = 'SidebarMenuItemIcon';
-
- export const SidebarMenuContainer = React.forwardRef<HTMLSpanElement, SidebarMainContainerProps>(({
- children,
- ...etcProps
- }, ref) => (
- <span
- {...etcProps}
- className="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"
- ref={ref}
- >
- {children}
- </span>
- ));
-
- SidebarMenuContainer.displayName = 'SidebarMenuContainer';
-
-
- export const MoreSidebarMenuItemIcon = React.forwardRef<HTMLSpanElement, SidebarMenuItemIconProps>(({
- children,
- ...etcProps
- }, ref) => (
- <span
- {...etcProps}
- className="block mr-4 md:w-menu md:h-menu md:flex md:justify-center md:items-center md:mr-0"
- ref={ref}
- >
- {children}
- </span>
- ));
-
- MoreSidebarMenuItemIcon.displayName = 'MoreSidebarMenuItemIcon';
-
- export const MoreSidebarMenuContainer = React.forwardRef<HTMLSpanElement, SidebarMainContainerProps>(({
- children,
- ...etcProps
- }, ref) => (
- <span
- {...etcProps}
- className="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"
- ref={ref}
- >
- {children}
- </span>
- ));
-
- MoreSidebarMenuContainer.displayName = 'MoreSidebarMenuContainer';
|