Glassmorphism Hyper-Blur Navbar

1'use client';
2
3import React, { useState } from 'react';
4import { Menu, X, User, Moon, Sun } from 'lucide-react';
5
6export default function GlassMorphBlurNavbar() {
7  const [open, setOpen] = useState(false);
8  const [isDark, setIsDark] = useState(true);
9
10  return (
11    <nav className="w-full max-w-4xl mx-auto rounded-3xl border border-white/20 bg-slate-900/40 backdrop-blur-2xl px-6 py-3.5 shadow-2xl select-none text-white">
12      <div className="flex items-center justify-between">
13        <div className="flex items-center gap-2">
14          <div className="h-7 w-7 rounded-xl bg-cyan-400 text-slate-950 flex items-center justify-center font-black text-xs shadow-[0_0_15px_#22d3ee]">
15            ◈
16          </div>
17          <span className="font-extrabold text-sm tracking-wide">
18            HYPER<span className="text-cyan-400">BLUR</span>
19          </span>
20        </div>
21
22        <div className="hidden md:flex items-center gap-7 text-xs font-semibold text-slate-300">
23          <a href="#" className="hover:text-cyan-400 transition">Design</a>
24          <a href="#" className="hover:text-cyan-400 transition">Prism</a>
25          <a href="#" className="hover:text-cyan-400 transition">Tokens</a>
26          <a href="#" className="hover:text-cyan-400 transition">Showcase</a>
27        </div>
28
29        <div className="hidden md:flex items-center gap-3">
30          <button
31            onClick={() => setIsDark(!isDark)}
32            className="p-2 rounded-xl bg-white/5 border border-white/10 text-slate-300 hover:text-white transition cursor-pointer"
33          >
34            {isDark ? <Sun className="h-3.5 w-3.5 text-amber-400" /> : <Moon className="h-3.5 w-3.5 text-blue-400" />}
35          </button>
36          <button className="flex items-center gap-1 text-xs font-semibold text-slate-200 hover:text-white px-3 py-1.5 transition">
37            <User className="h-3.5 w-3.5" /> Portal
38          </button>
39          <button className="rounded-xl bg-gradient-to-r from-cyan-400 to-blue-500 px-4 py-1.5 text-xs font-bold text-slate-950 hover:shadow-[0_0_20px_rgba(6,182,212,0.5)] transition cursor-pointer">
40            Explore 3D
41          </button>
42        </div>
43
44        <button onClick={() => setOpen(!open)} className="md:hidden text-slate-300">
45          {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
46        </button>
47      </div>
48
49      {open && (
50        <div className="md:hidden mt-3 pt-3 border-t border-white/10 flex flex-col gap-2.5 text-xs font-semibold text-slate-300">
51          <a href="#" className="p-1 hover:text-cyan-400">Design</a>
52          <a href="#" className="p-1 hover:text-cyan-400">Prism</a>
53          <a href="#" className="p-1 hover:text-cyan-400">Tokens</a>
54          <div className="pt-2 border-t border-white/10 flex gap-2">
55            <button className="flex-1 py-1.5 rounded-xl border border-white/20 text-center">Portal</button>
56            <button className="flex-1 py-1.5 rounded-xl bg-cyan-400 text-slate-950 font-bold text-center">Explore 3D</button>
57          </div>
58        </div>
59      )}
60    </nav>
61  );
62}