feature(web): Introduce a new sticky navbar. Fixes 520 (#515)

* ui: add global header

* fix: design fixes

* fix: tests

* fix navbar background, hide y scrollbar and change sidebar footer to show version

---------

Co-authored-by: MohamedBassem <me@mbassem.com>

1 files changed, 11 insertions, 4 deletions

diff --git a/apps/web/components/dashboard/sidebar/SidebarProfileOptions.tsx b/apps/web/components/dashboard/header/ProfileOptions.tsx
index af3f1548..df31171c 100644
--- a/apps/web/components/dashboard/sidebar/SidebarProfileOptions.tsx
+++ b/apps/web/components/dashboard/header/ProfileOptions.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import { redirect } from "next/navigation";
 import { useToggleTheme } from "@/components/theme-provider";
 import { Button } from "@/components/ui/button";
 import {
@@ -9,8 +10,8 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { LogOut, Moon, MoreHorizontal, Paintbrush, Sun } from "lucide-react";
-import { signOut } from "next-auth/react";
+import { LogOut, Moon, Paintbrush, Sun } from "lucide-react";
+import { signOut, useSession } from "next-auth/react";
 import { useTheme } from "next-themes";
 
 function DarkModeToggle() {
@@ -35,11 +36,17 @@ function DarkModeToggle() {
 
 export default function SidebarProfileOptions() {
   const toggleTheme = useToggleTheme();
+  const { data: session } = useSession();
+  if (!session) return redirect("/");
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost">
-          <MoreHorizontal />
+        <Button
+          className="border-new-gray-200 aspect-square rounded-full border-4 bg-black p-0 text-white"
+          variant="ghost"
+        >
+          {session.user.name?.charAt(0) ?? "U"}
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-fit">