Floating Navbar

1"use client";
2
3import FloatingNavbar, {
4FloatingNavbarContent,
5FloatingNavbarItem,
6FloatingNavbarSeparator,
7} from '@/components/component-x/floating-navbar';
8import { Button } from '@/components/ui/button';
9import { Menu, Settings, X } from 'lucide-react';
10import { useState } from 'react';
11
12export function FloatingNavbarPreview() {
13const [isNavbarOpen, setIsNavbarOpen] = useState(false);
14
15return (
16  <div className="relative w-full h-full flex items-center justify-center">
17    {isNavbarOpen && (
18      <div
19        className="fixed inset-0 bg-muted/30 backdrop-blur-sm z-[5] transition-opacity duration-300"
20        onClick={() => setIsNavbarOpen(false)}
21        aria-hidden="true"
22      />
23    )}
24
25    {isNavbarOpen && (
26      <FloatingNavbar>
27        <FloatingNavbarContent className="bg-background">
28          <FloatingNavbarItem href="/" icon={Menu} label="Home" />
29          <FloatingNavbarSeparator />
30          <FloatingNavbarItem href="/projects" label="Projects" />
31          <FloatingNavbarSeparator />
32          <FloatingNavbarItem
33            href="/settings"
34            icon={Settings}
35            label="Settings"
36          />
37        </FloatingNavbarContent>
38      </FloatingNavbar>
39    )}
40
41    <Button
42      onClick={() => setIsNavbarOpen(!isNavbarOpen)}
43      className="h-12 w-12 rounded-full shadow-lg hover:shadow-xl transition-all duration-300"
44      size="icon"
45      variant={isNavbarOpen ? "default" : "outline"}
46    >
47      {isNavbarOpen ? (
48        <X className="h-5 w-5" />
49      ) : (
50        <Menu className="h-5 w-5" />
51      )}
52    </Button>
53  </div>
54);
55}
56