From fc8c3929e5a13bcb21e11c458e0f8510372c783a Mon Sep 17 00:00:00 2001 From: Guy Korland Date: Wed, 24 Jan 2024 17:38:55 +0200 Subject: [PATCH 01/29] collapse to toolbar --- app/providers.tsx | 31 ++++++++++++-- components/custom/navbar.tsx | 83 ++++++++++++++---------------------- 2 files changed, 59 insertions(+), 55 deletions(-) diff --git a/app/providers.tsx b/app/providers.tsx index b702f77..94e51d3 100644 --- a/app/providers.tsx +++ b/app/providers.tsx @@ -2,20 +2,45 @@ 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 { useState } from "react"; type Props = { children?: React.ReactNode; }; + +const LINKS = [ + { + name: "Connection Details", + href: "/details", + icon: (), + }, + { + name: "Graph", + href: "/graph", + icon: (), + }, + { + name: "Sign Out", + href: "/", + icon: (), + onClick: () => { signOut({ callbackUrl: '/' }) } + }, +] + export const NextAuthProvider = ({ children }: Props) => { + + const [isCollapsed, setCollapsed] = useState(false) + return ( - - + { setCollapsed(true) }} onExpand={() => { setCollapsed(false) }}> + {children} diff --git a/components/custom/navbar.tsx b/components/custom/navbar.tsx index 9b313c3..05aadbd 100644 --- a/components/custom/navbar.tsx +++ b/components/custom/navbar.tsx @@ -1,5 +1,5 @@ -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"; @@ -7,7 +7,15 @@ 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 }) { const { data: session, status } = useSession() const { theme, setTheme, systemTheme } = useTheme() @@ -33,64 +41,35 @@ export default function Navbar() { mounted &&
- + {!params.collapsed && ()}
}
- FalkorDB Browser + {!params.collapsed && (FalkorDB Browser)}
{status === "authenticated" && -
    - {/*
  • - - Employees -
    • -
  • - - Company -
    • -
  • - - Candidate -
    • -
  • - - Calendar -
    • */} - - {/*
  • - - Profile -
    • */} - -
  • - - - Connection Details - -
    • -
  • - - - Graph - -
    • -
  • - - signOut({ callbackUrl: '/' })}> - Sign Out - -
    • +
      + { + params.links.map((link, index) => { + return ( +
    • + + {link.icon} {!params.collapsed && (

      {link.name}

      )} + +
      • + ) + }) + }
    } ) From fab8f07d3d315d5520b22cf4ad0010754e1d5507 Mon Sep 17 00:00:00 2001 From: Guy Korland Date: Wed, 24 Jan 2024 21:06:04 +0200 Subject: [PATCH 02/29] set expand/collapse --- app/providers.tsx | 18 +++++++++++++++--- components/custom/navbar.tsx | 12 ++++++------ 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/app/providers.tsx b/app/providers.tsx index 94e51d3..e568715 100644 --- 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(null) + + function onExpand(){ + if(navPanel.current){ + if(navPanel.current.isCollapsed()){ + navPanel.current.expand() + } else { + navPanel.current.collapse() + } + } + } return ( - { setCollapsed(true) }} onExpand={() => { setCollapsed(false) }}> - + { setCollapsed(true) }} onExpand={() => { setCollapsed(false) }}> + {children} diff --git a/components/custom/navbar.tsx b/components/custom/navbar.tsx index 05aadbd..be0dc98 100644 --- 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,6 +37,10 @@ export default function Navbar(params: { links: LinkDefinition[], collapsed: boo let darkmode = theme == "dark" || (theme == "system" && systemTheme == "dark") return (