Highlight Navbar Item

This commit is contained in:
headlesdev
2025-05-17 21:30:27 +02:00
parent be4fd4785d
commit 2e90bc42ca
2 changed files with 32 additions and 9 deletions

View File

@@ -5,6 +5,7 @@ import Breadcrumbs from "./Breadcrumbs"
import { useState } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import {
Home,
Globe,
@@ -31,6 +32,7 @@ interface SidebarProps {
export default function Sidebar({ children, username, fullName, breadcrumbPath }: SidebarProps) {
const router = useRouter()
const pathname = usePathname()
const [isProfileOpen, setIsProfileOpen] = useState(false)
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
@@ -87,7 +89,10 @@ export default function Sidebar({ children, username, fullName, breadcrumbPath }
<div className="overflow-y-auto" style={{ height: "calc(100vh - 160px)" }}>
<ul className="menu menu-md p-4 w-full">
<li className="w-full">
<Link href="/dashboard" className="flex items-center w-full justify-start px-3 py-2">
<Link
href="/dashboard"
className={`flex items-center w-full justify-start px-3 py-2 ${pathname === '/dashboard' ? 'bg-primary/20 text-primary font-medium' : ''}`}
>
<Home size={18} />
<span>Home</span>
</Link>
@@ -97,25 +102,37 @@ export default function Sidebar({ children, username, fullName, breadcrumbPath }
<span>Resources</span>
</li>
<li className="w-full">
<Link href="/dashboard/sites" className="flex items-center w-full justify-start px-3 py-2">
<Link
href="/dashboard/sites"
className={`flex items-center w-full justify-start px-3 py-2 ${pathname === '/dashboard/sites' ? 'bg-primary/20 text-primary font-medium' : ''}`}
>
<Globe size={18} />
<span>Sites</span>
</Link>
</li>
<li className="w-full">
<Link href="/dashboard/servers" className="flex items-center w-full justify-start px-3 py-2">
<Link
href="/dashboard/servers"
className={`flex items-center w-full justify-start px-3 py-2 ${pathname === '/dashboard/servers' ? 'bg-primary/20 text-primary font-medium' : ''}`}
>
<Server size={18} />
<span>Servers</span>
</Link>
</li>
<li className="w-full">
<Link href="/dashboard/applications" className="flex items-center w-full justify-start px-3 py-2">
<Link
href="/dashboard/applications"
className={`flex items-center w-full justify-start px-3 py-2 ${pathname === '/dashboard/applications' ? 'bg-primary/20 text-primary font-medium' : ''}`}
>
<Layout size={18} />
<span>Applications</span>
</Link>
</li>
<li className="w-full">
<Link href="/dashboard/uptime" className="flex items-center w-full justify-start px-3 py-2">
<Link
href="/dashboard/uptime"
className={`flex items-center w-full justify-start px-3 py-2 ${pathname === '/dashboard/uptime' ? 'bg-primary/20 text-primary font-medium' : ''}`}
>
<Clock size={18} />
<span>Uptime Pages</span>
</Link>
@@ -125,13 +142,19 @@ export default function Sidebar({ children, username, fullName, breadcrumbPath }
<span>System</span>
</li>
<li className="w-full">
<Link href="/dashboard/maintenance" className="flex items-center w-full justify-start px-3 py-2">
<Link
href="/dashboard/maintenance"
className={`flex items-center w-full justify-start px-3 py-2 ${pathname === '/dashboard/maintenance' ? 'bg-primary/20 text-primary font-medium' : ''}`}
>
<Tool size={18} />
<span>Maintenance</span>
</Link>
</li>
<li className="w-full">
<Link href="/dashboard/settings" className="flex items-center w-full justify-start px-3 py-2">
<Link
href="/dashboard/settings"
className={`flex items-center w-full justify-start px-3 py-2 ${pathname === '/dashboard/settings' ? 'bg-primary/20 text-primary font-medium' : ''}`}
>
<Settings size={18} />
<span>Settings</span>
</Link>