feat(DashboardSidebar): reorganize navigation structure and improve accessibility

This commit is contained in:
Abhimanyu Saharan
2026-02-12 18:55:49 +05:30
parent 8d7d9da4e9
commit 2c88f1e8cb

View File

@@ -57,10 +57,11 @@ export function DashboardSidebar() {
return (
<aside className="flex h-full w-64 flex-col border-r border-slate-200 bg-white">
<div className="flex-1 px-3 py-4">
<p className="px-3 text-xs font-semibold uppercase tracking-wider text-slate-500">
Navigation
</p>
<nav className="mt-3 space-y-1 text-sm">
<p className="px-3 text-xs font-semibold uppercase tracking-wider text-slate-500">Navigation</p>
<nav className="mt-3 space-y-4 text-sm">
<div>
<p className="px-3 text-[11px] font-semibold uppercase tracking-wider text-slate-400">Overview</p>
<div className="mt-1 space-y-1">
<Link
href="/dashboard"
className={cn(
@@ -73,20 +74,24 @@ export function DashboardSidebar() {
<BarChart3 className="h-4 w-4" />
Dashboard
</Link>
{isAdmin ? (
<Link
href="/gateways"
href="/activity"
className={cn(
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
pathname.startsWith("/gateways")
pathname.startsWith("/activity")
? "bg-blue-100 text-blue-800 font-medium"
: "hover:bg-slate-100",
)}
>
<Network className="h-4 w-4" />
Gateways
<Activity className="h-4 w-4" />
Live feed
</Link>
) : null}
</div>
</div>
<div>
<p className="px-3 text-[11px] font-semibold uppercase tracking-wider text-slate-400">Boards</p>
<div className="mt-1 space-y-1">
<Link
href="/board-groups"
className={cn(
@@ -123,18 +128,6 @@ export function DashboardSidebar() {
<Tags className="h-4 w-4" />
Tags
</Link>
<Link
href="/organization"
className={cn(
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
pathname.startsWith("/organization")
? "bg-blue-100 text-blue-800 font-medium"
: "hover:bg-slate-100",
)}
>
<Building2 className="h-4 w-4" />
Organization
</Link>
<Link
href="/approvals"
className={cn(
@@ -147,18 +140,40 @@ export function DashboardSidebar() {
<CheckCircle2 className="h-4 w-4" />
Approvals
</Link>
</div>
</div>
<div>
<p className="px-3 text-[11px] font-semibold uppercase tracking-wider text-slate-400">
Administration
</p>
<div className="mt-1 space-y-1">
<Link
href="/activity"
href="/organization"
className={cn(
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
pathname.startsWith("/activity")
pathname.startsWith("/organization")
? "bg-blue-100 text-blue-800 font-medium"
: "hover:bg-slate-100",
)}
>
<Activity className="h-4 w-4" />
Live feed
<Building2 className="h-4 w-4" />
Organization
</Link>
{isAdmin ? (
<Link
href="/gateways"
className={cn(
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
pathname.startsWith("/gateways")
? "bg-blue-100 text-blue-800 font-medium"
: "hover:bg-slate-100",
)}
>
<Network className="h-4 w-4" />
Gateways
</Link>
) : null}
{isAdmin ? (
<Link
href="/agents"
@@ -173,6 +188,8 @@ export function DashboardSidebar() {
Agents
</Link>
) : null}
</div>
</div>
</nav>
</div>
<div className="border-t border-slate-200 p-4">