PlatypusPus/MushroomEmpire
1
0
Fork 0
mirror of https://github.com/PlatypusPus/MushroomEmpire.git synced 2026-02-07 22:18:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

frontend

Browse Source
This commit is contained in:
Ashishyg
2025-11-07 10:54:13 +05:30
parent 6bf9f91974
commit 8833186262
23 changed files with 6987 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
frontend/nordic-privacy-ai/components/Navbar.tsx Normal file
View File

@@ -0,0 +1,63 @@
"use client";
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';
export function Navbar() {
const pathname = usePathname();
const onTry = pathname?.startsWith('/try');
const [scrolled, setScrolled] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 4);
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
<nav className={`w-full sticky top-0 z-50 transition-colors ${scrolled ? 'bg-white/90 border-b border-slate-200/70 shadow-sm' : 'bg-white/70 border-b border-transparent'}`}>
<div className="container-max flex items-center justify-between h-16">
<Link href="/" className="font-semibold text-brand-700 text-lg tracking-tight">Nordic Privacy AI</Link>
{/* Desktop nav */}
{onTry ? (
<div className="hidden md:flex items-center gap-6 text-sm">
<Link href="/" className="hover:text-brand-600 transition-colors">Home</Link>
</div>
) : (
<div className="hidden md:flex items-center gap-6 text-sm">
<Link href="#features" className="hover:text-brand-600 transition-colors">Features</Link>
<Link href="#agents" className="hover:text-brand-600 transition-colors">Agents</Link>
<Link href="#contact" className="hover:text-brand-600 transition-colors">Contact</Link>
<Link href="/try" className="inline-flex items-center rounded-md bg-brand-600 px-4 py-2 text-white font-medium shadow hover:bg-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:ring-offset-2">Try me</Link>
</div>
)}
{/* Mobile menu button */}
<button
aria-label="Toggle menu"
className="md:hidden inline-flex items-center justify-center w-10 h-10 rounded-md border border-slate-300 text-slate-700"
onClick={() => setMenuOpen(v => !v)}
>
<span className="sr-only">Menu</span>
{menuOpen ? '✕' : '☰'}
</button>
</div>
{/* Mobile menu panel */}
<div className={`md:hidden border-t border-slate-200 transition-[max-height,opacity] duration-200 overflow-hidden ${menuOpen ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'}`}>
<div className="container-max py-3 flex flex-col gap-3 text-sm">
{onTry ? (
<Link href="/" onClick={() => setMenuOpen(false)} className="py-2">Home</Link>
) : (
<>
<a href="#features" onClick={() => setMenuOpen(false)} className="py-2">Features</a>
<a href="#agents" onClick={() => setMenuOpen(false)} className="py-2">Agents</a>
<a href="#contact" onClick={() => setMenuOpen(false)} className="py-2">Contact</a>
<Link href="/try" onClick={() => setMenuOpen(false)} className="inline-flex items-center justify-center rounded-md bg-brand-600 px-4 py-2 text-white font-medium shadow hover:bg-brand-500">Try me</Link>
</>
)}
</div>
</div>
</nav>
);
}