Glass Navigation

"use client";
 
import { useState } from "react";
import {
  GlassMobileNav,
  GlassMobileNavHeader,
  GlassMobileNavMenu,
  GlassMobileNavToggle,
  GlassNav,
  GlassNavbarButton,
  GlassNavbarLogo,
  GlassNavBody,
  GlassNavItems,
} from "@/components/ui/glass-nav";
 
export default function GlassNavDemo() {
  const navItems = [
    { name: "Features", link: "#features" },
    { name: "Pricing", link: "#pricing" },
    { name: "About", link: "#about" },
    { name: "Contact", link: "#contact" },
  ];
 
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
  return (
    <div className="relative bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
      <GlassNav>
        {/* Desktop Navigation */}
        <GlassNavBody>
          <GlassNavbarLogo />
          <GlassNavItems items={navItems} />
          <div className="flex items-center gap-3">
            <GlassNavbarButton variant="ghost">Sign In</GlassNavbarButton>
            <GlassNavbarButton variant="primary">Get Started</GlassNavbarButton>
          </div>
        </GlassNavBody>
 
        {/* Mobile Navigation */}
        <GlassMobileNav>
          <GlassMobileNavHeader>
            <GlassNavbarLogo />
            <GlassMobileNavToggle
              isOpen={isMobileMenuOpen}
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            />
          </GlassMobileNavHeader>
          <GlassMobileNavMenu
            isOpen={isMobileMenuOpen}
            onClose={() => setIsMobileMenuOpen(false)}
          >
            {navItems.map((item, idx) => (
              <a
                key={`mobile-link-${idx}`}
                href={item.link}
                onClick={() => setIsMobileMenuOpen(false)}
                className="w-full py-2 text-foreground/80 transition-colors hover:text-foreground"
              >
                {item.name}
              </a>
            ))}
            <div className="mt-4 flex w-full flex-col gap-3">
              <GlassNavbarButton
                onClick={() => setIsMobileMenuOpen(false)}
                variant="ghost"
                className="w-full justify-center"
              >
                Sign In
              </GlassNavbarButton>
              <GlassNavbarButton
                onClick={() => setIsMobileMenuOpen(false)}
                variant="primary"
                className="w-full justify-center"
              >
                Get Started
              </GlassNavbarButton>
            </div>
          </GlassMobileNavMenu>
        </GlassMobileNav>
      </GlassNav>
    </div>
  );
}

const basicNavItems = [
  { name: "Home", link: "/" },
  { name: "Products", link: "/products" },
  { name: "Services", link: "/services" },
  { name: "Contact", link: "/contact" },
]
 
<GlassNav>
  <GlassNavBody>
    <GlassNavbarLogo />
    <GlassNavItems items={basicNavItems} />
    <GlassNavbarButton variant="primary">Get Started</GlassNavbarButton>
  </GlassNavBody>
</GlassNav>

const CustomLogo = () => {
  return (
    <a
      href="/"
      className="flex items-center space-x-2 text-lg font-semibold text-foreground"
    >
      <svg className="h-8 w-8" viewBox="0 0 24 24" fill="none">
        <path d="M12 2L2 7l10 5 10-5-10-5z" fill="currentColor" />
        <path
          d="M2 17l10 5 10-5"
          stroke="currentColor"
          strokeWidth="2"
          fill="none"
        />
        <path
          d="M2 12l10 5 10-5"
          stroke="currentColor"
          strokeWidth="2"
          fill="none"
        />
      </svg>
      <span>Your Brand</span>
    </a>
  );
};
 
<GlassNav>
  <GlassNavBody>
    <CustomLogo />
    <GlassNavItems items={navItems} />
    <div className="flex items-center gap-3">
      <GlassNavbarButton variant="secondary">Login</GlassNavbarButton>
      <GlassNavbarButton variant="primary">Sign Up</GlassNavbarButton>
    </div>
  </GlassNavBody>
</GlassNav>;

<GlassNav className="custom-nav-styles">{/* Navigation content */}</GlassNav>

<GlassNavBody className="custom-body-styles">
  <GlassNavbarLogo />
  <GlassNavItems items={navItems} />
  <div className="flex gap-2">
    <GlassNavbarButton>Action</GlassNavbarButton>
  </div>
</GlassNavBody>

<GlassNavItems
  items={[
    { name: "Home", link: "/" },
    { name: "About", link: "/about" },
  ]}
  onItemClick={() => console.log("Item clicked")}
/>

<GlassMobileNav>
  <GlassMobileNavHeader>
    <GlassNavbarLogo />
    <GlassMobileNavToggle isOpen={isOpen} onClick={toggle} />
  </GlassMobileNavHeader>
  <GlassMobileNavMenu isOpen={isOpen} onClose={close}>
    {/* Mobile menu content */}
  </GlassMobileNavMenu>
</GlassMobileNav>

<GlassNavbarButton variant="primary">Primary</GlassNavbarButton>
<GlassNavbarButton variant="secondary">Secondary</GlassNavbarButton>
<GlassNavbarButton variant="ghost">Ghost</GlassNavbarButton>