Something went wrong. Try again.
FlockOff is a mass-block tool for the Atmosphere flockoff.app
Something went wrong. Try again.
3.5 kB · 102 lines
TSX
at master
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103'use client'
import Link from 'next/link'import { useState } from 'react'import { Moon, Sun, Menu, X } from 'lucide-react'import { LinkButton } from '@/components/LinkButton'import { UserMenu } from '@/components/UserMenu'import { useTheme } from '@/components/ThemeProvider'
interface NavProps { did?: string handle?: string avatar?: string}
const NAV_LINKS = [ { href: '/block', label: 'New Block' }, { href: '/list', label: 'List Editor' }, { href: '/events', label: 'History' }, { href: '/stats', label: 'Stats' },]
export function Nav({ did, handle, avatar }: NavProps) { const isLoggedIn = !!did const { theme, toggle } = useTheme() const [menuOpen, setMenuOpen] = useState(false)
return ( <nav className="sticky top-0 z-50 bg-background/80 backdrop-blur-md border-b border-border"> <div className="max-w-5xl mx-auto px-4 h-14 flex items-center justify-between">
{/* Wordmark */} <Link href="/" className="font-display text-xl font-bold tracking-tight hover:opacity-80 transition-opacity" > Flock<span className="italic text-[var(--fo-ember)]">Off</span> </Link>
{/* Right side */} <div className="flex items-center gap-3">
{/* Desktop nav links — logged-in only */} {isLoggedIn && ( <div className="hidden sm:flex items-center gap-5 mr-2"> {NAV_LINKS.map(link => ( <Link key={link.href} href={link.href} className="text-sm font-medium text-[var(--fo-text2)] hover:text-foreground transition-colors" > {link.label} </Link> ))} </div> )}
{/* Theme toggle */} <button onClick={toggle} aria-label={theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'} className="h-9 w-9 flex items-center justify-center rounded-lg border border-border bg-card hover:bg-secondary transition-colors" > {theme === 'light' ? <Moon size={16} /> : <Sun size={16} />} </button>
{/* Logged-in: avatar + mobile hamburger */} {isLoggedIn ? ( <> <UserMenu handle={handle} avatar={avatar} /> <button onClick={() => setMenuOpen(prev => !prev)} aria-label={menuOpen ? 'Close menu' : 'Open menu'} className="sm:hidden h-9 w-9 flex items-center justify-center rounded-lg border border-border bg-card hover:bg-secondary transition-colors" > {menuOpen ? <X size={16} /> : <Menu size={16} />} </button> </> ) : ( <LinkButton href="/login" size="sm">Sign In</LinkButton> )} </div> </div>
{/* Mobile nav drawer */} {isLoggedIn && menuOpen && ( <div className="sm:hidden border-t border-border bg-background/95 backdrop-blur-md"> {NAV_LINKS.map(link => ( <Link key={link.href} href={link.href} onClick={() => setMenuOpen(false)} className="block px-4 py-3 text-sm font-medium text-[var(--fo-text2)] hover:text-foreground hover:bg-secondary/60 transition-colors" > {link.label} </Link> ))} </div> )} </nav> )}