mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-10-26 21:19:04 +08:00
feat(web): add community and dashboard links to navigation
Add navigation links for community page and dashboard page (shown only when logged in). Implements active state highlighting for all navigation items including the new community and dashboard pages
This commit is contained in:
@@ -4,9 +4,15 @@ import Link from "next/link"
|
||||
import { usePathname } from "next/navigation"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
export function HeaderNav() {
|
||||
interface HeaderNavProps {
|
||||
isLoggedIn?: boolean
|
||||
}
|
||||
|
||||
export function HeaderNav({ isLoggedIn }: HeaderNavProps) {
|
||||
const pathname = usePathname()
|
||||
const isIconsActive = pathname === "/icons" || pathname.startsWith("/icons/")
|
||||
const isCommunityActive = pathname === "/community" || pathname.startsWith("/community/")
|
||||
const isDashboardActive = pathname === "/dashboard" || pathname.startsWith("/dashboard/")
|
||||
|
||||
return (
|
||||
<nav className="flex flex-row md:items-center items-start gap-4 md:gap-6">
|
||||
@@ -29,6 +35,27 @@ export function HeaderNav() {
|
||||
>
|
||||
Icons
|
||||
</Link>
|
||||
<Link
|
||||
prefetch
|
||||
href="/community"
|
||||
className={cn(
|
||||
"text-sm font-medium transition-colors dark:hover:text-rose-400 cursor-pointer",
|
||||
isCommunityActive && "text-primary font-semibold",
|
||||
)}
|
||||
>
|
||||
Community
|
||||
</Link>
|
||||
{isLoggedIn && (
|
||||
<Link
|
||||
href="/dashboard"
|
||||
className={cn(
|
||||
"text-sm font-medium transition-colors dark:hover:text-rose-400 cursor-pointer",
|
||||
isDashboardActive && "text-primary font-semibold",
|
||||
)}
|
||||
>
|
||||
Dashboard
|
||||
</Link>
|
||||
)}
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user