1import { Box } from '@chakra-ui/react';
 2import { PanelGroup, Panel, PanelResizeHandle, ImperativePanelHandle } from 'react-resizable-panels';
 3import { Footer } from 'components/footer';
 4import { Header } from 'components/header';
 5import { Sidebar } from 'components/sidebar';
 6import { Suspense, useRef } from 'react';
 7import { Outlet } from 'react-router-dom';
 8import { useDashboard } from 'stores';
 9
10export const ConsoleLayout = () => {
11  const ref = useRef<ImperativePanelHandle>(null);
12  const { collapseSidebar, expandSidebar } = useDashboard();
13
14  return (
15    <PanelGroup autoSaveId="sidebar-ratio" direction="horizontal">
16      <Panel collapsible onExpand={expandSidebar} onCollapse={collapseSidebar} collapsedSize={5} defaultSize={20} maxSize={20} minSize={10} ref={ref}>
17        <Sidebar />
18      </Panel>
19      <PanelResizeHandle />
20      <Panel minSize={30} >
21        <Box overflowY="auto" h="100vh" >
22          <Header />
23          <Box p="6">
24            <Suspense>
25              <Outlet />
26            </Suspense>
27          </Box>
28        </Box>
29      </Panel>
30      <Footer bottom={3} />
31    </PanelGroup>
32  );
33};
34
35export default ConsoleLayout;