konnosDashboard
index.tsx67 lines · main
1import { useBreakpoint } from 'common'
2import { useEffect } from 'react'
3import { cn, ResizableHandle, ResizablePanel } from 'ui'
4
5import { SIDEBAR_KEYS, type TYPEOF_SIDEBAR_KEYS } from './LayoutSidebarProvider'
6import { useMobileSheet } from '@/components/layouts/Navigation/NavigationBar/MobileSheetContext'
7import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
8
9function isSidebarId(content: unknown): content is TYPEOF_SIDEBAR_KEYS {
10 return (
11 typeof content === 'string' &&
12 Object.values(SIDEBAR_KEYS).includes(content as TYPEOF_SIDEBAR_KEYS)
13 )
14}
15
16interface LayoutSidebarProps {
17 minSize?: string | number
18 maxSize?: string | number
19 defaultSize?: string | number
20}
21
22export const LayoutSidebar = ({
23 minSize = '30',
24 maxSize = '50',
25 defaultSize = '30',
26}: LayoutSidebarProps) => {
27 const { activeSidebar } = useSidebarManagerSnapshot()
28 const isMobile = useBreakpoint('md')
29 const { content: sheetContent, setContent: setMobileSheetContent } = useMobileSheet()
30
31 useEffect(() => {
32 if (!isMobile) {
33 setMobileSheetContent(null)
34 return
35 }
36 if (activeSidebar?.component) {
37 setMobileSheetContent(activeSidebar.id)
38 } else if (isSidebarId(sheetContent)) {
39 setMobileSheetContent(null)
40 }
41 }, [isMobile, activeSidebar, sheetContent, setMobileSheetContent])
42
43 if (!activeSidebar?.component) return null
44 if (isMobile) return null
45
46 return (
47 <>
48 <ResizableHandle withHandle />
49 <ResizablePanel
50 id="panel-side"
51 key={activeSidebar?.id ?? 'default'}
52 defaultSize={defaultSize}
53 minSize={minSize}
54 maxSize={maxSize}
55 className={cn(
56 'border-l bg fixed z-40 right-0 top-0 bottom-0',
57 'h-dvh',
58 'md:absolute md:h-auto md:w-1/2',
59 'lg:w-2/5',
60 'xl:relative xl:border-l-0'
61 )}
62 >
63 {activeSidebar?.component()}
64 </ResizablePanel>
65 </>
66 )
67}