feat: replace ghost buttons with underline tab bar for site navigation
Dashboard, Uptime, Funnels, and Settings now use a consistent underline tab bar with orange active indicator, matching the existing panel tab design language.
This commit is contained in:
54
components/dashboard/SiteNav.tsx
Normal file
54
components/dashboard/SiteNav.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
'use client'
|
||||
|
||||
import Link from 'next/link'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import { useTabListKeyboard } from '@/lib/hooks/useTabListKeyboard'
|
||||
import { useAuth } from '@/lib/auth/context'
|
||||
|
||||
interface SiteNavProps {
|
||||
siteId: string
|
||||
}
|
||||
|
||||
export default function SiteNav({ siteId }: SiteNavProps) {
|
||||
const pathname = usePathname()
|
||||
const handleTabKeyDown = useTabListKeyboard()
|
||||
const { user } = useAuth()
|
||||
const canEdit = user?.role === 'owner' || user?.role === 'admin'
|
||||
|
||||
const tabs = [
|
||||
{ label: 'Dashboard', href: `/sites/${siteId}` },
|
||||
{ label: 'Uptime', href: `/sites/${siteId}/uptime` },
|
||||
{ label: 'Funnels', href: `/sites/${siteId}/funnels` },
|
||||
...(canEdit ? [{ label: 'Settings', href: `/sites/${siteId}/settings` }] : []),
|
||||
]
|
||||
|
||||
const isActive = (href: string) => {
|
||||
if (href === `/sites/${siteId}`) {
|
||||
return pathname === href || pathname === `${href}/realtime`
|
||||
}
|
||||
return pathname.startsWith(href)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="border-b border-neutral-200 dark:border-neutral-800 mb-6">
|
||||
<nav className="flex gap-1" role="tablist" aria-label="Site navigation" onKeyDown={handleTabKeyDown}>
|
||||
{tabs.map((tab) => (
|
||||
<Link
|
||||
key={tab.href}
|
||||
href={tab.href}
|
||||
role="tab"
|
||||
aria-selected={isActive(tab.href)}
|
||||
tabIndex={isActive(tab.href) ? 0 : -1}
|
||||
className={`px-3 py-2 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange rounded-t cursor-pointer border-b-2 -mb-px ${
|
||||
isActive(tab.href)
|
||||
? 'border-brand-orange text-neutral-900 dark:text-white'
|
||||
: 'border-transparent text-neutral-400 dark:text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300'
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user