feat(frontend): sidebar migration started

frontend/src/components/navBar/Admin.tsx

@@ -0,0 +1,72 @@
+import { Server, Settings, User, type LucideIcon } from "lucide-react";
+import { userAccess, type UserRoles } from "../../lib/authClient";
+import {
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarGroupLabel,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+} from "../ui/sidebar";
+import { Link } from "@tanstack/react-router";
+
+type Items = {
+    title: string;
+    url: string;
+    icon: LucideIcon;
+    role: UserRoles["role"][];
+    module: string;
+    active: boolean;
+};
+export default function Admin() {
+    const items: Items[] = [
+        {
+            title: "Users",
+            url: "/lst/app/admin/users",
+            icon: User,
+            role: ["systemAdmin", "admin"],
+            module: "admin",
+            active: true,
+        },
+        {
+            title: "Settings",
+            url: "/lst/app/admin/settings",
+            icon: Settings,
+            role: ["systemAdmin", "admin"],
+            module: "admin",
+            active: true,
+        },
+        {
+            title: "Servers",
+            url: "/lst/app/admin/servers",
+            icon: Server,
+            role: ["systemAdmin", "admin"],
+            module: "admin",
+            active: true,
+        },
+    ];
+    return (
+        <SidebarGroup>
+            <SidebarGroupLabel>Admin</SidebarGroupLabel>
+            <SidebarGroupContent>
+                <SidebarMenu>
+                    {items.map((item) => (
+                        <SidebarMenuItem key={item.title}>
+                            <>
+                                {userAccess(item.module, item.role) &&
+                                    item.active && (
+                                        <SidebarMenuButton asChild>
+                                            <Link to={item.url}>
+                                                <item.icon />
+                                                <span>{item.title}</span>
+                                            </Link>
+                                        </SidebarMenuButton>
+                                    )}
+                            </>
+                        </SidebarMenuItem>
+                    ))}
+                </SidebarMenu>
+            </SidebarGroupContent>
+        </SidebarGroup>
+    );
+}

frontend/src/components/navBar/Header.tsx

@@ -0,0 +1,36 @@
+import { Link } from "@tanstack/react-router";
+import {
+    SidebarHeader,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+} from "../ui/sidebar";
+
+export function Header() {
+    return (
+        <SidebarHeader>
+            <SidebarMenu>
+                <SidebarMenuItem>
+                    <Link to="/">
+                        <SidebarMenuButton size="lg" asChild>
+                            <div className="flex flex-row">
+                                <img
+                                    src={"imgs/dkLst.png"}
+                                    alt="Description"
+                                    className="size-8"
+                                />
+
+                                <div className="flex flex-col gap-0.5 leading-none">
+                                    <span className="font-semibold">
+                                        Logistics Support Tool
+                                    </span>
+                                    <span className="">v2.0.0</span>
+                                </div>
+                            </div>
+                        </SidebarMenuButton>
+                    </Link>
+                </SidebarMenuItem>
+            </SidebarMenu>
+        </SidebarHeader>
+    );
+}

frontend/src/components/navBar/Nav.tsx

@@ -1,29 +1,80 @@
 import { Link } from "@tanstack/react-router";
 import { useAuth, useLogout } from "../../lib/authClient";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { ModeToggle } from "../mode-toggle";
 import { Button } from "../ui/button";
 
 export default function Nav() {
     const { session } = useAuth();
     const logout = useLogout();
     return (
-        <nav>
-            {session?.session ? (
-                <>
-                    <Button
-                        onClick={() => {
-                            logout();
-                        }}
-                    >
-                        Sign Out
-                    </Button>
-                </>
-            ) : (
-                <>
-                    <Button>
-                        <Link to="/login">Login</Link>
-                    </Button>
-                </>
-            )}
+        <nav className="flex justify-end w-full shadow ">
+            <div className="m-2 flex flex-row gap-1">
+                <div className="m-1">
+                    <ModeToggle />
+                </div>
+                {/* <div className="mr-1 ml-1">
+                    {settings.length > 0 && (
+                        <a
+                            href={`https://${server[0].value}.alpla.net/lst/d`}
+                            target="_blank"
+                        >
+                            LST - Docs |
+                        </a>
+                    )}
+                </div> */}
+                {session ? (
+                    <div className="m-1">
+                        <DropdownMenu>
+                            <DropdownMenuTrigger>
+                                <Avatar>
+                                    <AvatarImage
+                                        src="https://github.com/evilrabbit.png"
+                                        alt="@evilrabbit"
+                                    />
+                                    <AvatarFallback>CN</AvatarFallback>
+                                </Avatar>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent>
+                                <DropdownMenuLabel>
+                                    Hello {session.user?.username}
+                                </DropdownMenuLabel>
+                                <DropdownMenuSeparator />
+                                <DropdownMenuItem>
+                                    {/* <Link to="/passwordChange">
+                                            Password Change
+                                        </Link> */}
+                                </DropdownMenuItem>
+                                {/* <DropdownMenuItem>Billing</DropdownMenuItem>
+                                                <DropdownMenuItem>Team</DropdownMenuItem>
+                                                <DropdownMenuItem>Subscription</DropdownMenuItem> */}
+                                <hr className="solid"></hr>
+                                <DropdownMenuItem>
+                                    <div className="m-auto">
+                                        <button onClick={() => logout()}>
+                                            Logout
+                                        </button>
+                                    </div>
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </div>
+                ) : (
+                    <div className="m-1">
+                        <Button>
+                            <Link to="/login">Login</Link>
+                        </Button>
+                    </div>
+                )}
+            </div>
         </nav>
     );
 }

frontend/src/components/navBar/SideBarNav.tsx

@@ -0,0 +1,19 @@
+import { Sidebar, SidebarFooter, SidebarTrigger } from "../ui/sidebar";
+import { Header } from "./Header";
+import Admin from "./Admin";
+import { userAccess } from "../../lib/authClient";
+
+export default function SideBarNav() {
+    return (
+        <div className="flex min-h-screen">
+            <Sidebar collapsible="icon">
+                <Header />
+                {userAccess(null, ["systemAdmin", "admin"]) && <Admin />}
+
+                <SidebarFooter>
+                    <SidebarTrigger />
+                </SidebarFooter>
+            </Sidebar>
+        </div>
+    );
+}