From 7d70e910f1f669f523f006c4dec094d631f97e30 Mon Sep 17 00:00:00 2001
From: Anchel135 <yakoveidelman1@gmail.com>
Date: Thu, 23 Jan 2025 15:11:24 +0200
Subject: [PATCH] Enhance Header component with new help features

- Added a Sheet component for displaying additional information about the application.
---
 app/components/Header.tsx | 118 ++++++++++++++++++++++++--------------
 1 file changed, 74 insertions(+), 44 deletions(-)

diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index 66c0591..ed08c08 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -9,6 +9,9 @@ import { cn } from "@/lib/utils";
 import { useRouter, usePathname } from "next/navigation";
 import { signOut, useSession } from "next-auth/react";
 import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from "@/components/ui/navigation-menu";
+import { Sheet, SheetContent, SheetDescription, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+import pkg from '@/package.json';
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import Button from "./ui/Button";
 import CreateGraph from "./CreateGraph";
 
@@ -22,7 +25,7 @@ export default function Header({ onSetGraphName }: Props) {
     const type = pathname.includes("/schema") ? "Schema" : "Graph"
     const inCreate = pathname.includes("/create")
     const { data: session } = useSession()
-    
+
     return (
         <div className="flex flex-col">
             <div className="py-5 px-10 flex justify-between items-center Header">
@@ -49,52 +52,79 @@ export default function Header({ onSetGraphName }: Props) {
                     </div>
                 </div>
                 <div className="flex gap-6 items-center">
-                    <NavigationMenu>
-                        <NavigationMenuList className="gap-6 bg-foreground rounded-lg px-4 py-2">
-                            <NavigationMenuLink className="bg-foreground" asChild>
+                    <Sheet>
+                        <NavigationMenu>
+                            <NavigationMenuList className="gap-6 bg-foreground rounded-lg px-4 py-2">
+                                <NavigationMenuLink className="bg-foreground" asChild>
+                                    <Button
+                                        label="Settings"
+                                        onClick={() => router.push("/settings")}
+                                        disabled={session?.user?.role !== "Admin"}
+                                    >
+                                        <Settings size={25} />
+                                    </Button>
+                                </NavigationMenuLink>
+                                <NavigationMenuItem>
+                                    <NavigationMenuTrigger className="gap-2 bg-foreground">
+                                        <LifeBuoy size={25} />
+                                        <p>Help</p>
+                                    </NavigationMenuTrigger>
+                                    <NavigationMenuContent className="w-full p-6">
+                                        <ul className="h-full w-full flex flex-col gap-2 p-2">
+                                            <li>
+                                                <a href="https://docs.falkordb.com/" target="_blank" rel="noreferrer">
+                                                    Documentation
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a href="https://www.falkordb.com/contact-us/" target="_blank" rel="noreferrer">
+                                                    Support
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <SheetTrigger asChild>
+                                                    <Button
+                                                        label="About"
+                                                        className="bg-foreground"
+                                                    />
+                                                </SheetTrigger>
+                                            </li>
+                                        </ul>
+                                    </NavigationMenuContent>
+                                </NavigationMenuItem>
+                                {
+                                    !inCreate &&
+                                    <CreateGraph
+                                        onSetGraphName={onSetGraphName!}
+                                        type={type}
+                                    />
+                                }
                                 <Button
-                                    label="Settings"
-                                    onClick={() => router.push("/settings")}
-                                    disabled={session?.user?.role !== "Admin"}
+                                    title="Log Out"
+                                    onClick={() => signOut({ callbackUrl: "/login" })}
                                 >
-                                    <Settings size={25} />
+                                    <LogOut size={25} />
                                 </Button>
-                            </NavigationMenuLink>
-                            <NavigationMenuItem>
-                                <NavigationMenuTrigger className="gap-2 bg-foreground">
-                                    <LifeBuoy size={25} />
-                                    <p>Help</p>
-                                </NavigationMenuTrigger>
-                                <NavigationMenuContent className="w-full p-6">
-                                    <ul className="h-full w-full flex flex-col gap-2 p-2">
-                                        <li>
-                                            <a href="https://docs.falkordb.com/" target="_blank" rel="noreferrer">
-                                                Documentation
-                                            </a>
-                                        </li>
-                                        <li>
-                                            <a href="https://www.falkordb.com/contact-us/" target="_blank" rel="noreferrer">
-                                                Support
-                                            </a>
-                                        </li>
-                                    </ul>
-                                </NavigationMenuContent>
-                            </NavigationMenuItem>
-                            {
-                                !inCreate &&
-                                <CreateGraph
-                                    onSetGraphName={onSetGraphName!}
-                                    type={type}
-                                />
-                            }
-                            <Button
-                                title="Log Out"
-                                onClick={() => signOut({ callbackUrl: "/login" })}
-                            >
-                                <LogOut size={25} />
-                            </Button>
-                        </NavigationMenuList>
-                    </NavigationMenu>
+                            </NavigationMenuList>
+                        </NavigationMenu>
+                        <SheetContent className="bg-popover-foreground flex flex-col gap-4 items-center text-foreground !max-w-[30rem]">
+                            <VisuallyHidden><SheetTitle /></VisuallyHidden>
+                            <VisuallyHidden><SheetDescription /></VisuallyHidden>
+                            <div className="h-1 grow flex flex-col gap-8 items-center justify-center">
+                                <Image priority src="/ColorLogo.svg" alt="Loading..." width={120} height={1} />
+                                <h1 className="text-3xl font-bold">We Make AI Reliable</h1>
+                                <p className="text-xl text-center">
+                                    Delivering a scalable,
+                                    low-latency graph database designed for development teams managing
+                                    structured and unstructured interconnected data in real-time or interactive environments.
+                                </p>
+                            </div>
+                            <div className="flex flex-col gap-8 items-center">
+                                <p>Version: {`{${pkg.version}}`}</p>
+                                <p className="text-sm text-nowrap">All Rights Reserved © 2024 - {new Date().getFullYear()} falkordb.com</p>
+                            </div>
+                        </SheetContent>
+                    </Sheet>
                 </div>
             </div>
             <div className="h-2 Top" />