79 lines
2.9 KiB
TypeScript
79 lines
2.9 KiB
TypeScript
"use client"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
import { useIsXs } from "@/hooks/use-xs"
|
|
import { Icon, addCollection } from "@iconify/react"
|
|
import { icons as mdiIcons } from "@iconify-json/mdi"
|
|
import { SidebarCreateDialogs } from "@/components/gmail/sidebar/sidebar-create-dialogs"
|
|
import { SidebarHeader } from "@/components/gmail/sidebar/sidebar-header"
|
|
import { SidebarNavPanel } from "@/components/gmail/sidebar/sidebar-nav-panel"
|
|
import {
|
|
useSidebarState,
|
|
type SidebarProps,
|
|
} from "@/components/gmail/sidebar/use-sidebar-state"
|
|
|
|
addCollection(mdiIcons)
|
|
|
|
export function Sidebar(props: SidebarProps) {
|
|
const { splitView = false, folderUnreadCounts = {}, selectedFolder, onSelectFolder } =
|
|
props
|
|
const isXs = useIsXs()
|
|
const state = useSidebarState(props)
|
|
|
|
return (
|
|
<aside
|
|
ref={state.sidebarRef}
|
|
data-sidebar
|
|
data-sidebar-overlay={state.isOverlayOpen ? "" : undefined}
|
|
onMouseEnter={state.handleMouseEnter}
|
|
onMouseLeave={state.handleMouseLeave}
|
|
className={cn(
|
|
"absolute left-0 top-0 bottom-0 z-40 flex flex-col overflow-x-hidden transition-[width,transform] duration-200 ease-linear select-none",
|
|
state.panelSurfaceClass,
|
|
state.isExpanded ? "w-60" : "w-[68px]",
|
|
splitView && "border-r border-gray-200",
|
|
!state.touchNav && state.hoverExpanded && "shadow-xl border-r border-gray-200 mail-sidebar-hover-frosted",
|
|
state.isOverlayOpen && "z-50 shadow-xl border-r border-gray-200",
|
|
props.collapsed && isXs && "-translate-x-full pointer-events-none"
|
|
)}
|
|
>
|
|
<SidebarHeader
|
|
splitView={splitView}
|
|
isExpanded={state.isExpanded}
|
|
panelSurfaceClass={state.panelSurfaceClass}
|
|
splitViewLogoHeaderClass={state.splitViewLogoHeaderClass}
|
|
splitViewLogoIconClass={state.splitViewLogoIconClass}
|
|
touchNav={state.touchNav}
|
|
/>
|
|
|
|
<SidebarNavPanel
|
|
selectedFolder={selectedFolder}
|
|
onSelectFolder={onSelectFolder}
|
|
folderUnreadCounts={folderUnreadCounts}
|
|
splitView={splitView}
|
|
state={state}
|
|
/>
|
|
|
|
<SidebarCreateDialogs
|
|
folderDialogOpen={state.folderDialogOpen}
|
|
setFolderDialogOpen={state.setFolderDialogOpen}
|
|
labelDialogOpen={state.labelDialogOpen}
|
|
setLabelDialogOpen={state.setLabelDialogOpen}
|
|
newFolderName={state.newFolderName}
|
|
setNewFolderName={state.setNewFolderName}
|
|
newFolderParent={state.newFolderParent}
|
|
setNewFolderParent={state.setNewFolderParent}
|
|
newLabelName={state.newLabelName}
|
|
setNewLabelName={state.setNewLabelName}
|
|
newFolderNameInputRef={state.newFolderNameInputRef}
|
|
newLabelNameInputRef={state.newLabelNameInputRef}
|
|
folderParentOptions={state.folderParentOptions}
|
|
onSubmitNewFolder={state.handleSubmitNewFolder}
|
|
onSubmitNewLabel={state.handleSubmitNewLabel}
|
|
/>
|
|
</aside>
|
|
)
|
|
}
|
|
|
|
export type { SidebarProps }
|