Merge pull request #160 from FalkorDB/styling-navbar

fix #158 Styling navbar

app/providers.tsx

@@ -1,38 +1,13 @@
 "use client";
 
-import Navbar from "@/components/custom/navbar";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
-import { Activity, Info, LogOut, Waypoints } from "lucide-react";
-import { SessionProvider, signOut } from "next-auth/react";
+import { SessionProvider } from "next-auth/react";
 import { ThemeProvider } from 'next-themes'
 import { useEffect, useRef, useState } from "react";
 import { ImperativePanelHandle } from "react-resizable-panels";
+import Navbar from "@/components/custom/navbar";
 import useScreenSize from "./useScreenSize";
 
-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: "Monitor",
-    href: "/monitor",
-    icon: (<Activity className="h-6 w-6" />),
-  },
-  {
-    name: "Disconnect",
-    href: "",
-    icon: (<LogOut className="h-6 w-6" />),
-    onClick: () => { signOut({ callbackUrl: '/login' }) }
-  },
-]
-
 export default function NextAuthProvider({ children }: { children: React.ReactNode }) {
 
   const { screenSize } = useScreenSize();
@@ -60,8 +35,8 @@ export default function NextAuthProvider({ children }: { children: React.ReactNo
       }
     }
   }
-  const panelSize = isSmallScreen ? 40 : 10
-  const collapsedSize = isSmallScreen ? 20 : 3
+  const panelSize = 9
+  const collapsedSize = 3
 
   return (
     <SessionProvider>
@@ -76,7 +51,7 @@ export default function NextAuthProvider({ children }: { children: React.ReactNo
             minSize={panelSize}
             onCollapse={() => { setCollapsed(true) }}
             onExpand={() => { setCollapsed(false) }}>
-            <Navbar links={LINKS} collapsed={isCollapsed} onExpand={onExpand} />
+            <Navbar collapsed={isCollapsed} onExpand={onExpand} />
           </ResizablePanel>
           <ResizableHandle withHandle />
           <ResizablePanel defaultSize={100 - panelSize}>{children}</ResizablePanel>

components/custom/navbar.tsx

@@ -1,14 +1,16 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import { Menu } from "lucide-react";
-import { useSession } from "next-auth/react";
+import { Activity, Info, LogOut, Menu, Settings, Waypoints } from "lucide-react";
+import { signOut, useSession } from "next-auth/react";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { useTheme } from "next-themes";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils"
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
 import { Switch } from "../ui/switch";
 import { Label } from "../ui/label";
 import GithubMark from "./GithubMark";
+import { DropdownMenu, DropdownMenuContent } from "../ui/dropdown-menu";
 
 export interface LinkDefinition {
   name: string,
@@ -17,10 +19,36 @@ export interface LinkDefinition {
   onClick?: () => void
 }
 
-export default function Navbar({ links, collapsed, onExpand }: { links: LinkDefinition[], collapsed: boolean, onExpand:()=>void }) {
+const linksUp: LinkDefinition[] = [
+  {
+    name: "Graph",
+    href: "/graph",
+    icon: (<Waypoints className="h-6 w-6" />),
+  },
+  {
+    name: "Monitor",
+    href: "/monitor",
+    icon: (<Activity className="h-6 w-6" />),
+  },
+]
+
+const linksDown: LinkDefinition[] = [
+  {
+    name: "Connection Details",
+    href: "/details",
+    icon: (<Info className="h-6 w-6" />),
+  },
+  {
+    name: "Disconnect",
+    href: "",
+    icon: (<LogOut className="h-6 w-6" />),
+    onClick: () => { signOut({ callbackUrl: '/login' }) }
+  },
+]
+
+export default function Navbar({ collapsed, onExpand }: { collapsed: boolean, onExpand: () => void }) {
   const { status } = useSession()
   const { theme, setTheme, systemTheme } = useTheme()
-
   const [mounted, setMounted] = useState(false)
   const pathName = usePathname()
   useEffect(() => {
@@ -37,42 +65,94 @@ export default function Navbar({ links, collapsed, onExpand }: { links: LinkDefi
 
   const 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">
+    <nav className={`w-full h-full bg-gray-100 dark:bg-gray-800 py-7 flex flex-col justify-between ${collapsed ? "items-center" : "justify-start"}`}>
+      <div className={`${!collapsed && "pl-2"}`}>
         <Link href="" onClick={onExpand}>
           <Menu className="h-6 w-6" />
         </Link>
-        {!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} />
-          {!collapsed && (<Label htmlFor="dark-mode">{`${theme} mode`}</Label>)}
-        </div>
-      }
-      {status === "authenticated" &&
-        <ul className="space-y-4">
-          {
-            links.map((link, index) => (
+        {status === "authenticated" &&
+          <ul className="flex flex-col gap-5 pt-5">
+            {
+              linksUp.map((link, index) => (
                 // eslint-disable-next-line react/no-array-index-key
-                <li key={index} className="flex items-center space-x-2">
-                  <Link title={link.name} className={cn("underline underline-offset-2 flex space-x-2", pathName === link.href ? 'text-blue-300' : '')}
-                     href={link.href} onClick={link.onClick}>
-                    {link.icon} {!collapsed && (<p> {link.name}</p>)}
+                <li key={index}>
+                  <Link
+                    className={cn("underline underline-offset-2 flex gap-2", pathName === link.href ? 'text-blue-300' : '')}
+                    href={link.href} onClick={link.onClick}
+                  >
+                    {link.icon}
+                    {
+                      !collapsed &&
+                      <div className="flex flex-col">
+                        {/* eslint-disable-next-line react/no-array-index-key */}
+                        {link.name.split(" ").map((str, strIndex) => <p key={strIndex}>{str}</p>)}
+                      </div>}
                   </Link>
                 </li>
               ))
+            }
+          </ul>
+        }
+      </div>
+      <div className={`${!collapsed && "pl-2"}`}>
+        <ul className="flex flex-col gap-5">
+          <li key={0}>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <div className="flex flex-row gap-2">
+                  <Settings />
+                  {
+                    !collapsed &&
+                    <p className="underline underline-offset-2">Settings</p>
+                  }
+                </div>
+              </DropdownMenuTrigger>
+              {
+                mounted &&
+                <DropdownMenuContent side="right" className="flex flex-col justify-center p-3">
+                  <div className="flex items-center gap-2">
+                    <Switch id="dark-mode" checked={darkmode} onCheckedChange={setDarkMode} />
+                    <Label htmlFor="dark-mode">{`${theme} mode`}</Label>
+                  </div>
+                </DropdownMenuContent>
+              }
+            </DropdownMenu>
+          </li>
+          {
+            linksDown.map((link, index) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <li key={index + 1}>
+                <Link
+                  title={link.name}
+                  className={cn("underline underline-offset-2 flex gap-2", pathName === link.href ? 'text-blue-300' : '')}
+                  href={link.href} onClick={link.onClick}
+                >
+                  {link.icon}
+                  {
+                    !collapsed &&
+                    <div className="flex flex-col">
+                      {/* eslint-disable-next-line react/no-array-index-key */}
+                      {link.name.split(" ").map((str, strIndex) => <p key={strIndex}>{str}</p>)}
+                    </div>}
+                </Link>
+              </li>
+            ))
           }
+          <li key={linksDown.length + 1} className={`${!collapsed ? "flex flex-row items-center gap-1" : "flex justify-center"}`}>
+            <a href="https://github.com/falkordb/falkordb-browser" className="flex justify-center" title="Github repository" aria-label="Github repository">
+              <GithubMark darkMode={darkmode} className="h-4 w-4" />
+            </a>
+            {
+              !collapsed && (
+                <>
+                  <p className="text-xs">Made by</p>
+                  <a className="underline text-xs" href="https://www.falkordb.com">FalkorDB</a>
+                </>
+              )
+            }
+          </ 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" title="Github repository" aria-label="Github repository">
-          <GithubMark darkMode={darkmode} className="h-4 w-4" />
-        </a>
-        <span>Made by</span>
-        <a className="underline" href="https://www.falkordb.com">FalkorDB</a>
-      </footer>
+      </div>
     </nav>
   )
 }

e2e/homePage.spec.ts

@@ -1,18 +1,17 @@
 import { expect, test } from '@playwright/test';
 
 test.beforeEach(async ({ page }) => {
-  await page.goto('http://localhost:3000/');
+    await page.goto('http://localhost:3000/');
 });
 
 test('connect', async ({ page }) => {
     await page.getByRole('button').click();
     await page.waitForURL('http://localhost:3000/login');
     expect(page.url()).toBe('http://localhost:3000/login');
-
 });
 
 test('themes', async ({ page }) => {
-  await page.getByLabel('system mode').click();
-  await page.getByLabel('dark mode').click();
-  await page.getByLabel('light mode').click();
+    await page.getByLabel('system mode').click();
+    await page.getByLabel('dark mode').click();
+    await page.getByLabel('light mode').click();
 });