Working on style and color on the side bar, and the items buttons.

src/features/layout/Header.tsx

@@ -0,0 +1,27 @@
+import Image from "next/image"
+import {Layout} from "@/components/layout";
+import Link from "next/link";
+import {Badge} from "@/components/ui/badge";
+import {currentUser} from "@/auth/current-user";
+import {notFound} from "next/navigation";
+import {buttonVariants} from "@/components/ui/button";
+import {LoggedInButton} from "@/components/wrappers/Dashboard/LoggedInButton/LoggedInButton";
+import {SidebarTrigger} from "@/components/ui/sidebar";
+import {ModeToggle} from "@/features/theme/ModeToggle";
+
+export const Header = async () => {
+    const user = await currentUser()
+    if (!user) {
+        return notFound()
+    }
+    return (
+        <header className="flex h-16 shrink-0 items-center justify-between border-b px-4">
+            <SidebarTrigger className="-ml-1"/>
+            <div className="flex items-center gap-2">
+                <ModeToggle/>
+                <LoggedInButton/>
+            </div>
+        </header>
+
+    )
+}

src/features/theme/ModeToggle.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ModeToggle() {
+    const { setTheme } = useTheme()
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="sm">
+                    <Sun className="size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                    <Moon className="absolute size-4  rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                    <span className="sr-only">Toggle theme</span>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => setTheme("light")}>
+                    Light
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setTheme("dark")}>
+                    Dark
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => setTheme("system")}>
+                    System
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    )
+}