Neumorphic Tactile Navbar

1'use client';
2
3import React, { useState } from 'react';
4import { Menu, X, User } from 'lucide-react';
5
6export default function NeumorphicNavbar() {
7  const [open, setOpen] = useState(false);
8  const [active, setActive] = useState('Explore');
9
10  const links = ['Explore', 'Components', 'Templates', 'Settings'];
11
12  return (
13    <nav 
14      style={{
15        boxShadow: '10px 10px 20px #cbd5e1, -10px -10px 20px #ffffff'
16      }}
17      className="w-full max-w-4xl mx-auto rounded-3xl bg-slate-100 dark:bg-slate-900 p-4 select-none transition-all dark:shadow-[0_10px_25px_rgba(0,0,0,0.5)]"
18    >
19      <div className="flex items-center justify-between">
20        <div className="flex items-center gap-2">
21          <div 
22            style={{
23              boxShadow: 'inset 3px 3px 6px #cbd5e1, inset -3px -3px 6px #ffffff'
24            }}
25            className="h-9 w-9 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-blue-600 dark:text-blue-400 font-black text-sm"
26          >
27            N
28          </div>
29          <span className="font-extrabold text-sm text-slate-800 dark:text-slate-200">NeumoUI</span>
30        </div>
31
32        <div className="hidden md:flex items-center gap-3">
33          {links.map((link) => {
34            const isAct = active === link;
35            return (
36              <button
37                key={link}
38                onClick={() => setActive(link)}
39                style={{
40                  boxShadow: isAct
41                    ? 'inset 3px 3px 6px #cbd5e1, inset -3px -3px 6px #ffffff'
42                    : '4px 4px 8px #cbd5e1, -4px -4px 8px #ffffff'
43                }}
44                className={`rounded-2xl px-4 py-2 text-xs font-bold transition-all cursor-pointer ${
45                  isAct
46                    ? 'text-blue-600 dark:text-blue-400 bg-slate-100 dark:bg-slate-800'
47                    : 'text-slate-600 dark:text-slate-300 bg-slate-100 dark:bg-slate-900 hover:text-slate-900'
48                }`}
49              >
50                {link}
51              </button>
52            );
53          })}
54        </div>
55
56        <div className="hidden md:flex items-center gap-3">
57          <button 
58            style={{
59              boxShadow: '4px 4px 8px #cbd5e1, -4px -4px 8px #ffffff'
60            }}
61            className="h-9 w-9 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-700 dark:text-slate-300 hover:text-blue-600 transition cursor-pointer"
62          >
63            <User className="h-4 w-4" />
64          </button>
65        </div>
66
67        <button onClick={() => setOpen(!open)} className="md:hidden text-slate-700 dark:text-slate-300">
68          {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
69        </button>
70      </div>
71
72      {open && (
73        <div className="md:hidden mt-3 pt-3 border-t border-slate-200 dark:border-slate-800 flex flex-col gap-2">
74          {links.map((link) => (
75            <button
76              key={link}
77              onClick={() => {
78                setActive(link);
79                setOpen(false);
80              }}
81              className="py-2 text-xs font-bold text-slate-700 dark:text-slate-300 text-left px-2 rounded-xl"
82            >
83              {link}
84            </button>
85          ))}
86        </div>
87      )}
88    </nav>
89  );
90}