Merge pull request #49 from FalkorDB/collapse

fix #48 Collapse to toolbar
FalkorDB · Jan 24, 2024 · a3f76ba · a3f76ba
2 parents 523c780 + fab8f07
commit a3f76ba
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 58 deletions.
diff --git a/app/providers.tsx b/app/providers.tsx
@@ -2,20 +2,57 @@
 
 import Navbar from "@/components/custom/navbar";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
-import { SessionProvider } from "next-auth/react";
+import { Info, LogOut, Waypoints } from "lucide-react";
+import { SessionProvider, signOut } from "next-auth/react";
 import { ThemeProvider } from 'next-themes'
+import { useRef, useState } from "react";
+import { ImperativePanelHandle } from "react-resizable-panels";
 
 type Props = {
   children?: React.ReactNode;
 };
 
+
+const LINKS = [
+  {
+    name: "Connection Details",
+    href: "/details",
+    icon: (<Info className="h-6 w-6" />),
+  },
+  {
+    name: "Graph",
+    href: "/graph",
+    icon: (<Waypoints className="h-6 w-6" />),
+  },
+  {
+    name: "Sign Out",
+    href: "/",
+    icon: (<LogOut className="h-6 w-6" />),
+    onClick: () => { signOut({ callbackUrl: '/' }) }
+  },
+]
+
 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={30} collapsible={true} minSize={10}>
-            <Navbar />
+          <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
@@ -1,13 +1,21 @@
-import { Info, LogOut, Menu, Waypoints } from "lucide-react";
-import { signOut, useSession } from "next-auth/react";
+import { Menu } from "lucide-react";
+import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { Switch } from "../ui/switch";
 import { Label } from "../ui/label";
 import { useEffect, useState } from "react";
 import { useTheme } from "next-themes";
 import { GithubMark } from "./GithubMark";
 
-export default function Navbar() {
+
+export interface LinkDefinition {
+  name: string,
+  href: string,
+  icon: JSX.Element,
+  onClick?: () => void
+}
+
+export default function Navbar(params: { links: LinkDefinition[], collapsed: boolean, onExpand:()=>void }) {
   const { data: session, status } = useSession()
   const { theme, setTheme, systemTheme } = useTheme()
 
@@ -29,68 +37,39 @@ export default function Navbar() {
   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} />
-          <Label htmlFor="dark-mode">{`${theme} mode`}</Label>
+          {!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" />
-        <span className="font-bold">FalkorDB Browser</span>
-      </div>
       {status === "authenticated" &&
-        <ul className="space-y-2">
-          {/* <li className="flex items-center space-x-2">
-          <AirVentIcon className="h-6 w-6" />
-          <span>Employees</span>
-        </li>
-        <li className="flex items-center space-x-2">
-          <AirVentIcon className="h-6 w-6" />
-          <span>Company</span>
-        </li>
-        <li className="flex items-center space-x-2">
-          <AirVentIcon className="h-6 w-6" />
-          <span>Candidate</span>
-        </li>
-        <li className="flex items-center space-x-2">
-          <AirVentIcon className="h-6 w-6" />
-          <span>Calendar</span>
-        </li> */}
-
-          {/* <li className="flex items-center space-x-2">
-            <AirVentIcon className="h-6 w-6" />
-            <span>Profile</span>
-          </li> */}
-
-          <li className="flex items-center space-x-2">
-            <Info className="h-6 w-6" />
-            <Link className="underline underline-offset-2" href="/details">
-              Connection Details
-            </Link>
-          </li>
-          <li className="flex items-center space-x-2">
-            <Waypoints className="h-6 w-6" />
-            <Link className="underline underline-offset-2" href="/graph">
-              Graph
-            </Link>
-          </li>
-          <li className="flex items-center space-x-2">
-            <LogOut className="h-6 w-6" />
-            <Link className="underline underline-offset-2" href="/" onClick={() => signOut({ callbackUrl: '/' })}>
-              Sign Out
-            </Link>
-          </li>
+        <ul className="space-y-4">
+          {
+            params.links.map((link, index) => {
+              return (
+                <li key={index} className="flex items-center space-x-2">
+                  <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>
+              )
+            })
+          }
         </ul>
       }
       <footer className="flex flex-row items-center space-x-1 fixed bottom-1 text-xs">
-          <a href="https://github.com/falkordb/falkordb-browser">{
-              <GithubMark darkMode={darkmode} className="h-4 w-4" />
-          }
-          </a> 
-          <span>Made by</span>
-          <a className="underline" href="https://www.falkordb.com">FalkorDB</a>
+        <a href="https://github.com/falkordb/falkordb-browser">{
+          <GithubMark darkMode={darkmode} className="h-4 w-4" />
+        }
+        </a>
+        <span>Made by</span>
+        <a className="underline" href="https://www.falkordb.com">FalkorDB</a>
       </footer>
     </nav>
   )