Implement initial application structure and UI.

Replit-Commit-Author: Agent Replit-Commit-Session-Id: 9111ef36-26c8-4085-84ca-a35dc1fec1b5 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7083d608-d6d3-4a6a-9a27-6286c5109627/54918520-d42c-44cd-b4f4-9e5a42eb5be1.jpg
2026-09-04 06:25:22 +00:00 · 2025-04-09 21:34:26 +00:00
parent e1340a29cb
commit cba930e4d3
99 changed files with 21903 additions and 0 deletions
@@ -0,0 +1,87 @@
+import { Menu, User } from "lucide-react";
+import { ThemeToggle } from "@/components/shared/theme-toggle";
+import { useAuth } from "@/hooks/use-auth";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+
+interface HeaderProps {
+  title?: string;
+  onMobileMenuOpen: () => void;
+}
+
+export function Header({ title, onMobileMenuOpen }: HeaderProps) {
+  const { user, logoutMutation } = useAuth();
+
+  const getInitials = (name: string) => {
+    return name
+      .split(' ')
+      .map(n => n[0])
+      .join('')
+      .toUpperCase();
+  };
+
+  return (
+    <header className="lg:hidden bg-card border-b border-border p-4 flex items-center justify-between">
+      <div className="flex items-center">
+        <button
+          id="mobile-menu-button"
+          className="mr-2 p-2 rounded-md hover:bg-accent"
+          onClick={onMobileMenuOpen}
+          aria-label="Open menu"
+        >
+          <Menu className="w-6 h-6" />
+        </button>
+        <div className="flex items-center">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="w-6 h-6 text-primary mr-2"
+          >
+            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
+          </svg>
+          <span className="font-semibold text-xl">
+            {title ? title : "DynamiDNS"}
+          </span>
+        </div>
+      </div>
+      
+      <div className="flex items-center space-x-2">
+        <ThemeToggle />
+        
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="relative h-8 w-8 rounded-full">
+              <Avatar className="h-8 w-8">
+                <AvatarFallback>
+                  {user?.fullName 
+                    ? getInitials(user.fullName) 
+                    : user?.username.substring(0, 2).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem
+              className="cursor-pointer"
+              onClick={() => logoutMutation.mutate()}
+              disabled={logoutMutation.isPending}
+            >
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  );
+}