Added dashboard page layout & sites overview

2026-04-05 17:55:58 +02:00
parent 7bb7454d7f
commit a6f60a5a38
38 changed files with 2687 additions and 111 deletions
@@ -0,0 +1,44 @@
+import { Logo } from '@/components/logo';
+import { NavMenu } from '@/components/nav-menu';
+import { NavigationSheet } from '@/components/navigation-sheet';
+import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
+
+interface NavbarProps {
+    userName?: string;
+    profilePictureUrl?: string;
+}
+
+const Navbar = ({ userName, profilePictureUrl }: NavbarProps) => {
+    return (
+        <nav className="inset-x-4 my-6 mx-auto h-16 max-w-(--breakpoint-xl) rounded-full border bg-background">
+            <div className="mx-auto flex h-full items-center justify-between px-4">
+                <Logo />
+
+                {/* Desktop Menu */}
+                <NavMenu className="hidden md:block" />
+
+                <div className="flex items-center gap-3">
+                    <Avatar>
+                        <AvatarImage src={profilePictureUrl} alt={userName + ' profile image'} />
+                        <AvatarFallback className="rounded-lg">
+                            {userName
+                                ? userName
+                                      .split(' ')
+                                      .map((n) => n[0])
+                                      .join('')
+                                      .toUpperCase()
+                                : 'A'}
+                        </AvatarFallback>
+                    </Avatar>
+
+                    {/* Mobile Menu */}
+                    <div className="md:hidden">
+                        <NavigationSheet />
+                    </div>
+                </div>
+            </div>
+        </nav>
+    );
+};
+
+export default Navbar;