set expand/collapse

FalkorDB · Jan 24, 2024 · fab8f07 · fab8f07
1 parent fc8c392
commit fab8f07
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/app/providers.tsx b/app/providers.tsx
@@ -5,7 +5,8 @@ import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/componen
 import { Info, LogOut, Waypoints } from "lucide-react";
 import { SessionProvider, signOut } from "next-auth/react";
 import { ThemeProvider } from 'next-themes'
-import { useState } from "react";
+import { useRef, useState } from "react";
+import { ImperativePanelHandle } from "react-resizable-panels";
 
 type Props = {
   children?: React.ReactNode;
@@ -34,13 +35,24 @@ const LINKS = [
 export const NextAuthProvider = ({ children }: Props) => {
 
   const [isCollapsed, setCollapsed] = useState(false)
+  let navPanel = useRef<ImperativePanelHandle>(null)
+
+  function onExpand(){
+    if(navPanel.current){
+      if(navPanel.current.isCollapsed()){
+        navPanel.current.expand()
+      } else {
+        navPanel.current.collapse()
+      }
+    }
+  }
 
   return (
     <SessionProvider>
       <ThemeProvider attribute="class" enableSystem={true}>
         <ResizablePanelGroup direction="horizontal" className='min-h-screen'>
-          <ResizablePanel defaultSize={20} maxSize={20} collapsedSize={6} collapsible={true} minSize={20} onCollapse={() => { setCollapsed(true) }} onExpand={() => { setCollapsed(false) }}>
-            <Navbar links={LINKS} collapsed={isCollapsed} />
+          <ResizablePanel ref={navPanel} defaultSize={20} maxSize={20} collapsedSize={6} collapsible={true} minSize={20} onCollapse={() => { setCollapsed(true) }} onExpand={() => { setCollapsed(false) }}>
+            <Navbar links={LINKS} collapsed={isCollapsed} onExpand={onExpand}/>
           </ResizablePanel>
           <ResizableHandle withHandle />
           <ResizablePanel defaultSize={80}>{children}</ResizablePanel>

diff --git a/components/custom/navbar.tsx b/components/custom/navbar.tsx
@@ -15,7 +15,7 @@ export interface LinkDefinition {
   onClick?: () => void
 }
 
-export default function Navbar(params: { links: LinkDefinition[], collapsed: boolean }) {
+export default function Navbar(params: { links: LinkDefinition[], collapsed: boolean, onExpand:()=>void }) {
   const { data: session, status } = useSession()
   const { theme, setTheme, systemTheme } = useTheme()
 
@@ -37,24 +37,24 @@ export default function Navbar(params: { links: LinkDefinition[], collapsed: boo
   let darkmode = theme == "dark" || (theme == "system" && systemTheme == "dark")
   return (
     <nav className="w-full h-full bg-gray-100 dark:bg-gray-800 p-5 space-y-4 flex flex-col">
+      <div className="flex items-center space-x-2 border-b">
+        <Link href="" onClick={params.onExpand}><Menu className="h-6 w-6" /></Link>
+        {!params.collapsed && (<span className="font-bold">FalkorDB Browser</span>)}
+      </div>
       {
         mounted &&
         <div className="flex items-center space-x-2">
           <Switch id="dark-mode" checked={darkmode} onCheckedChange={setDarkMode} />
           {!params.collapsed && (<Label htmlFor="dark-mode">{`${theme} mode`}</Label>)}
         </div>
       }
-      <div className="flex items-center space-x-2 border-b">
-        <Menu className="h-6 w-6" />
-        {!params.collapsed && (<span className="font-bold">FalkorDB Browser</span>)}
-      </div>
       {status === "authenticated" &&
         <ul className="space-y-4">
           {
             params.links.map((link, index) => {
               return (
                 <li key={index} className="flex items-center space-x-2">
-                  <Link className="underline underline-offset-2 flex space-x-2" href={link.href} onClick={link.onClick}>
+                  <Link title={link.name} className="underline underline-offset-2 flex space-x-2" href={link.href} onClick={link.onClick}>
                     {link.icon} {!params.collapsed && (<p> {link.name}</p>)}
                   </Link>
                 </li>