From 03a6df08480f6de1f31523e85c119d12edd1e821 Mon Sep 17 00:00:00 2001 From: Aiden Smith <29802327+DevVoxel@users.noreply.github.com> Date: Thu, 26 Feb 2026 12:10:31 -0500 Subject: [PATCH] Add shared site header with account dropdown Add SiteHeader and AccountDropdown components, replace inline headers across homepage, roadmap, and docs layout. --- app/docs/layout.tsx | 2 + app/page.tsx | 34 +---- app/roadmap/page.tsx | 32 +--- components/account-dropdown.tsx | 64 ++++++++ components/site-header.tsx | 37 +++++ components/ui/dropdown-menu.tsx | 257 ++++++++++++++++++++++++++++++++ 6 files changed, 367 insertions(+), 59 deletions(-) create mode 100644 components/account-dropdown.tsx create mode 100644 components/site-header.tsx create mode 100644 components/ui/dropdown-menu.tsx diff --git a/app/docs/layout.tsx b/app/docs/layout.tsx index 33a2145..7186b05 100644 --- a/app/docs/layout.tsx +++ b/app/docs/layout.tsx @@ -2,6 +2,7 @@ import type { Metadata } from "next"; import Link from "next/link"; import { Globe, BookOpen, Menu } from "lucide-react"; import { ThemeToggle } from "@/components/theme-toggle"; +import { AccountDropdown } from "@/components/account-dropdown"; import { DocsSidebar } from "@/components/docs/sidebar"; export const metadata: Metadata = { @@ -38,6 +39,7 @@ export default function DocsLayout({ + diff --git a/app/page.tsx b/app/page.tsx index 4c6b731..ecfc59e 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,5 +1,4 @@ -import Link from "next/link"; -import { Globe, Search, Shield, Activity } from "lucide-react"; +import { Search, Shield, Activity } from "lucide-react"; import { Card, CardHeader, @@ -7,7 +6,7 @@ import { CardDescription, } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; -import { ThemeToggle } from "@/components/theme-toggle"; +import { SiteHeader } from "@/components/site-header"; import { DomainSearchForm } from "@/components/domain-search-form"; const features = [ @@ -34,38 +33,13 @@ const features = [ export default function Home() { return (
- {/* Header */} -
-
-
- - - VectorDNS - -
-
- - Docs - - - Roadmap - - -
-
-
+ {/* Hero */}
- Free DNS Toolkit + Total DNS Toolkit

DNS Lookup, WHOIS &{" "} diff --git a/app/roadmap/page.tsx b/app/roadmap/page.tsx index 0512157..75acf23 100644 --- a/app/roadmap/page.tsx +++ b/app/roadmap/page.tsx @@ -1,7 +1,6 @@ import type { Metadata } from "next"; -import Link from "next/link"; -import { Globe, Map, Info } from "lucide-react"; -import { ThemeToggle } from "@/components/theme-toggle"; +import { Map, Info } from "lucide-react"; +import { SiteHeader } from "@/components/site-header"; import { RoadmapFlowchart } from "@/components/roadmap-flowchart"; import { Badge } from "@/components/ui/badge"; import { @@ -19,32 +18,7 @@ export const metadata: Metadata = { export default function RoadmapPage() { return (
- {/* Header */} -
-
- - - - VectorDNS - - -
- - Docs - - - Roadmap - - -
-
-
+
diff --git a/components/account-dropdown.tsx b/components/account-dropdown.tsx new file mode 100644 index 0000000..76238a5 --- /dev/null +++ b/components/account-dropdown.tsx @@ -0,0 +1,64 @@ +"use client"; + +import Link from "next/link"; +import { CircleUser, User, Key, Bookmark, Bell, BarChart3 } from "lucide-react"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; + +export function AccountDropdown() { + return ( + + + + + + USERNAME + + + + + Account + + + + + + API Keys + + + + + + Saved Domains + + + + + + Notifications + + + + + + Usage + + + + + ); +} diff --git a/components/site-header.tsx b/components/site-header.tsx new file mode 100644 index 0000000..c7851e0 --- /dev/null +++ b/components/site-header.tsx @@ -0,0 +1,37 @@ +"use client"; + +import Link from "next/link"; +import { Globe } from "lucide-react"; +import { ThemeToggle } from "@/components/theme-toggle"; +import { AccountDropdown } from "@/components/account-dropdown"; + +export function SiteHeader() { + return ( +
+
+
+ + + VectorDNS + +
+
+ + Docs + + + Roadmap + + + +
+
+
+ ); +} diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx new file mode 100644 index 0000000..2629ca2 --- /dev/null +++ b/components/ui/dropdown-menu.tsx @@ -0,0 +1,257 @@ +"use client"; + +import * as React from "react"; +import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"; +import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"; + +import { cn } from "@/lib/utils"; + +function DropdownMenu({ + ...props +}: React.ComponentProps) { + return ; +} + +function DropdownMenuPortal({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function DropdownMenuTrigger({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function DropdownMenuContent({ + className, + sideOffset = 4, + ...props +}: React.ComponentProps) { + return ( + + + + ); +} + +function DropdownMenuGroup({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function DropdownMenuItem({ + className, + inset, + variant = "default", + ...props +}: React.ComponentProps & { + inset?: boolean; + variant?: "default" | "destructive"; +}) { + return ( + + ); +} + +function DropdownMenuCheckboxItem({ + className, + children, + checked, + ...props +}: React.ComponentProps) { + return ( + + + + + + + {children} + + ); +} + +function DropdownMenuRadioGroup({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function DropdownMenuRadioItem({ + className, + children, + ...props +}: React.ComponentProps) { + return ( + + + + + + + {children} + + ); +} + +function DropdownMenuLabel({ + className, + inset, + ...props +}: React.ComponentProps & { + inset?: boolean; +}) { + return ( + + ); +} + +function DropdownMenuSeparator({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function DropdownMenuShortcut({ + className, + ...props +}: React.ComponentProps<"span">) { + return ( + + ); +} + +function DropdownMenuSub({ + ...props +}: React.ComponentProps) { + return ; +} + +function DropdownMenuSubTrigger({ + className, + inset, + children, + ...props +}: React.ComponentProps & { + inset?: boolean; +}) { + return ( + + {children} + + + ); +} + +function DropdownMenuSubContent({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +export { + DropdownMenu, + DropdownMenuPortal, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuLabel, + DropdownMenuItem, + DropdownMenuCheckboxItem, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuSub, + DropdownMenuSubTrigger, + DropdownMenuSubContent, +};