Mega Menu Dropdown Navbar

1'use client';
2
3import React, { useState } from 'react';
4import { Menu, X, ArrowRight, Sparkles, ChevronDown, User } from 'lucide-react';
5
6export default function MegaMenuNavbar() {
7  const [open, setOpen] = useState(false);
8  const [dropdownOpen, setDropdownOpen] = useState(false);
9
10  return (
11    <nav className="w-full max-w-4xl mx-auto rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-3.5 shadow-xl select-none relative">
12      <div className="flex items-center justify-between">
13        <div className="flex items-center gap-2">
14          <div className="h-8 w-8 rounded-xl bg-blue-600 flex items-center justify-center text-white font-bold text-xs">
15            AU
16          </div>
17          <span className="font-extrabold text-sm text-slate-900 dark:text-white">Aurenza Platform</span>
18        </div>
19
20        <div className="hidden md:flex items-center gap-6 text-xs font-semibold text-slate-600 dark:text-slate-300">
21          <div className="relative">
22            <button
23              onClick={() => setDropdownOpen(!dropdownOpen)}
24              className="flex items-center gap-1 hover:text-blue-500 transition py-1 cursor-pointer"
25            >
26              <span>Solutions</span>
27              <ChevronDown className={`h-3 w-3 transition-transform ${dropdownOpen ? 'rotate-180' : ''}`} />
28            </button>
29
30            {dropdownOpen && (
31              <div className="absolute top-full left-0 mt-3 w-72 rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 p-3 shadow-2xl z-50 grid grid-cols-1 gap-2">
32                <a href="#" className="p-2 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-900 transition">
33                  <p className="text-xs font-bold text-slate-900 dark:text-white">Spatial Interactions</p>
34                  <p className="text-[10px] text-slate-400">Physics 3D tactile gestures</p>
35                </a>
36                <a href="#" className="p-2 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-900 transition">
37                  <p className="text-xs font-bold text-slate-900 dark:text-white">Component Registry</p>
38                  <p className="text-[10px] text-slate-400">60+ modular atomic components</p>
39                </a>
40              </div>
41            )}
42          </div>
43          <a href="#" className="hover:text-blue-500 transition">Enterprise</a>
44          <a href="#" className="hover:text-blue-500 transition">Docs</a>
45          <a href="#" className="hover:text-blue-500 transition">Pricing</a>
46        </div>
47
48        <div className="hidden md:flex items-center gap-3">
49          <button className="flex items-center gap-1.5 text-xs font-semibold text-slate-700 dark:text-slate-300 hover:text-blue-500 transition px-3 py-1.5">
50            <User className="h-3.5 w-3.5" /> Sign In
51          </button>
52          <button className="rounded-xl bg-blue-600 hover:bg-blue-500 px-4 py-1.5 text-xs font-bold text-white transition cursor-pointer shadow-md shadow-blue-500/25">
53            Book Demo
54          </button>
55        </div>
56
57        <button onClick={() => setOpen(!open)} className="md:hidden text-slate-700 dark:text-slate-300">
58          {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
59        </button>
60      </div>
61
62      {open && (
63        <div className="md:hidden mt-3 pt-3 border-t border-slate-200 dark:border-slate-800 flex flex-col gap-2 text-xs font-semibold text-slate-700 dark:text-slate-300">
64          <a href="#" className="p-1">Solutions</a>
65          <a href="#" className="p-1">Enterprise</a>
66          <a href="#" className="p-1">Pricing</a>
67          <div className="pt-2 border-t border-slate-200 dark:border-slate-800 flex gap-2">
68            <button className="flex-1 py-1.5 rounded-xl border border-slate-300 dark:border-slate-700 text-center">Sign In</button>
69            <button className="flex-1 py-1.5 rounded-xl bg-blue-600 text-white text-center font-bold">Book Demo</button>
70          </div>
71        </div>
72      )}
73    </nav>
74  );
75}