1+ "use client" ;
2+
13import LogoMobile from "@/assets/logo-mobile.svg" ;
24import Logo from "@/assets/logo.svg" ;
35import Image from "next/image" ;
46import NextLink from "next/link" ;
57import { Link } from "../link" ;
68
9+ const NAV = [
10+ { href : "https://github.com/vortex-data/vortex" , label : "GitHub" , external : true } ,
11+ { href : "https://docs.vortex.dev" , label : "Docs" , external : true } ,
12+ { href : "https://bench.vortex.dev" , label : "Bench" , external : true } ,
13+ { href : "https://vortex.dev/slack" , label : "Slack" , external : true } ,
14+ { href : "/blog" , label : "Blog" , external : false } ,
15+ ] as const ;
16+
717export const Header = ( ) => {
818 return (
919 < div className = "flex justify-between items-center m-4 mb-2 md:m-10 md:mb-6 dashed-top dashed-bottom h-[72px] md:h-[108px]" >
@@ -26,34 +36,53 @@ export const Header = () => {
2636 className = "block md:hidden w-full h-[40px]"
2737 />
2838 </ NextLink >
29- < div className = "flex items-center gap-8 flex-1 justify-end md:flex-none dashed-left before:hidden md:before:block h-full px-10" >
30- < Link
31- href = "https://github.com/vortex-data/vortex"
32- className = "uppercase text-white font-mono text-base md:text-[18px] font-medium"
33- target = "_blank"
34- >
35- GitHub
36- </ Link >
37- < Link
38- href = "https://docs.vortex.dev"
39- className = "uppercase text-white font-mono text-base md:text-[18px] font-medium"
40- target = "_blank"
41- >
42- Docs
43- </ Link >
44- < Link
45- href = "https://bench.vortex.dev"
46- className = "uppercase text-white font-mono text-base md:text-[18px] font-medium"
47- target = "_blank"
48- >
49- Bench
50- </ Link >
51- < Link
52- href = "/blog"
53- className = "uppercase text-white font-mono text-base md:text-[18px] font-medium"
54- >
55- Blog
56- </ Link >
39+
40+ { /* Desktop / tablet: original links */ }
41+ < div className = "hidden md:flex items-center gap-8 flex-1 justify-end md:flex-none dashed-left before:hidden md:before:block h-full px-10" >
42+ { NAV . map ( ( { href, label, external } ) => (
43+ < Link
44+ key = { href }
45+ href = { href }
46+ className = "uppercase text-white font-mono text-base md:text-[18px] font-medium"
47+ { ...( external ? { target : "_blank" } : { } ) }
48+ >
49+ { label }
50+ </ Link >
51+ ) ) }
52+ </ div >
53+
54+ { /* Mobile: pure-CSS hamburger (no JS, anchor tags only) */ }
55+ < div className = "md:hidden relative flex-1 justify-end dashed-left h-full px-6 flex items-center" >
56+ < details className = "group relative" >
57+ < summary
58+ className = "list-none flex items-center justify-center w-10 h-10 rounded-lg border border-white/20 cursor-pointer"
59+ aria-label = "Toggle navigation"
60+ >
61+ { /* hamburger icon */ }
62+ < div className = "relative w-5 h-3.5" >
63+ < span className = "absolute inset-x-0 top-0 h-0.5 bg-white transition-transform duration-200 group-open:translate-y-1.5 group-open:rotate-45" > </ span >
64+ < span className = "absolute inset-x-0 top-1/2 -translate-y-1/2 h-0.5 bg-white transition-opacity duration-200 group-open:opacity-0" > </ span >
65+ < span className = "absolute inset-x-0 bottom-0 h-0.5 bg-white transition-transform duration-200 group-open:-translate-y-1.5 group-open:-rotate-45" > </ span >
66+ </ div >
67+ </ summary >
68+
69+ { /* dropdown panel */ }
70+ < nav className = "absolute right-0 mt-3 w-48 rounded-xl border border-white/20 bg-black/90 backdrop-blur p-2 shadow-lg z-51" >
71+ < ul className = "flex flex-col" >
72+ { NAV . map ( ( { href, label, external } ) => (
73+ < li key = { href } >
74+ < a
75+ href = { href }
76+ { ...( external ? { target : "_blank" , rel : "noopener noreferrer" } : { } ) }
77+ className = "block w-full px-3 py-2 rounded-lg uppercase text-white font-mono text-sm hover:bg-white/10"
78+ >
79+ { label }
80+ </ a >
81+ </ li >
82+ ) ) }
83+ </ ul >
84+ </ nav >
85+ </ details >
5786 </ div >
5887 </ div >
5988 ) ;
0 commit comments