feat(DashboardSidebar): reorganize navigation structure and improve accessibility
This commit is contained in:
Abhimanyu Saharan
@@ -57,122 +57,139 @@ export function DashboardSidebar() {
|
|||||||
return (
|
return (
|
||||||
<aside className="flex h-full w-64 flex-col border-r border-slate-200 bg-white">
|
<aside className="flex h-full w-64 flex-col border-r border-slate-200 bg-white">
|
||||||
<div className="flex-1 px-3 py-4">
|
<div className="flex-1 px-3 py-4">
|
||||||
<p className="px-3 text-xs font-semibold uppercase tracking-wider text-slate-500">
|
<p className="px-3 text-xs font-semibold uppercase tracking-wider text-slate-500">Navigation</p>
|
||||||
Navigation
|
<nav className="mt-3 space-y-4 text-sm">
|
||||||
</p>
|
<div>
|
||||||
<nav className="mt-3 space-y-1 text-sm">
|
<p className="px-3 text-[11px] font-semibold uppercase tracking-wider text-slate-400">Overview</p>
|
||||||
<Link
|
<div className="mt-1 space-y-1">
|
||||||
href="/dashboard"
|
<Link
|
||||||
className={cn(
|
href="/dashboard"
|
||||||
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
|
className={cn(
|
||||||
pathname === "/dashboard"
|
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
|
||||||
? "bg-blue-100 text-blue-800 font-medium"
|
pathname === "/dashboard"
|
||||||
: "hover:bg-slate-100",
|
? "bg-blue-100 text-blue-800 font-medium"
|
||||||
)}
|
: "hover:bg-slate-100",
|
||||||
>
|
)}
|
||||||
<BarChart3 className="h-4 w-4" />
|
>
|
||||||
Dashboard
|
<BarChart3 className="h-4 w-4" />
|
||||||
</Link>
|
Dashboard
|
||||||
{isAdmin ? (
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
href="/gateways"
|
href="/activity"
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
|
"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"
|
? "bg-blue-100 text-blue-800 font-medium"
|
||||||
: "hover:bg-slate-100",
|
: "hover:bg-slate-100",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<Network className="h-4 w-4" />
|
<Activity className="h-4 w-4" />
|
||||||
Gateways
|
Live feed
|
||||||
</Link>
|
</Link>
|
||||||
) : null}
|
</div>
|
||||||
<Link
|
</div>
|
||||||
href="/board-groups"
|
|
||||||
className={cn(
|
<div>
|
||||||
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
|
<p className="px-3 text-[11px] font-semibold uppercase tracking-wider text-slate-400">Boards</p>
|
||||||
pathname.startsWith("/board-groups")
|
<div className="mt-1 space-y-1">
|
||||||
? "bg-blue-100 text-blue-800 font-medium"
|
<Link
|
||||||
: "hover:bg-slate-100",
|
href="/board-groups"
|
||||||
)}
|
className={cn(
|
||||||
>
|
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
|
||||||
<Folder className="h-4 w-4" />
|
pathname.startsWith("/board-groups")
|
||||||
Board groups
|
? "bg-blue-100 text-blue-800 font-medium"
|
||||||
</Link>
|
: "hover:bg-slate-100",
|
||||||
<Link
|
)}
|
||||||
href="/boards"
|
>
|
||||||
className={cn(
|
<Folder className="h-4 w-4" />
|
||||||
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
|
Board groups
|
||||||
pathname.startsWith("/boards")
|
</Link>
|
||||||
? "bg-blue-100 text-blue-800 font-medium"
|
<Link
|
||||||
: "hover:bg-slate-100",
|
href="/boards"
|
||||||
)}
|
className={cn(
|
||||||
>
|
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
|
||||||
<LayoutGrid className="h-4 w-4" />
|
pathname.startsWith("/boards")
|
||||||
Boards
|
? "bg-blue-100 text-blue-800 font-medium"
|
||||||
</Link>
|
: "hover:bg-slate-100",
|
||||||
<Link
|
)}
|
||||||
href="/tags"
|
>
|
||||||
className={cn(
|
<LayoutGrid className="h-4 w-4" />
|
||||||
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
|
Boards
|
||||||
pathname.startsWith("/tags")
|
</Link>
|
||||||
? "bg-blue-100 text-blue-800 font-medium"
|
<Link
|
||||||
: "hover:bg-slate-100",
|
href="/tags"
|
||||||
)}
|
className={cn(
|
||||||
>
|
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
|
||||||
<Tags className="h-4 w-4" />
|
pathname.startsWith("/tags")
|
||||||
Tags
|
? "bg-blue-100 text-blue-800 font-medium"
|
||||||
</Link>
|
: "hover:bg-slate-100",
|
||||||
<Link
|
)}
|
||||||
href="/organization"
|
>
|
||||||
className={cn(
|
<Tags className="h-4 w-4" />
|
||||||
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
|
Tags
|
||||||
pathname.startsWith("/organization")
|
</Link>
|
||||||
? "bg-blue-100 text-blue-800 font-medium"
|
<Link
|
||||||
: "hover:bg-slate-100",
|
href="/approvals"
|
||||||
)}
|
className={cn(
|
||||||
>
|
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
|
||||||
<Building2 className="h-4 w-4" />
|
pathname.startsWith("/approvals")
|
||||||
Organization
|
? "bg-blue-100 text-blue-800 font-medium"
|
||||||
</Link>
|
: "hover:bg-slate-100",
|
||||||
<Link
|
)}
|
||||||
href="/approvals"
|
>
|
||||||
className={cn(
|
<CheckCircle2 className="h-4 w-4" />
|
||||||
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
|
Approvals
|
||||||
pathname.startsWith("/approvals")
|
</Link>
|
||||||
? "bg-blue-100 text-blue-800 font-medium"
|
</div>
|
||||||
: "hover:bg-slate-100",
|
</div>
|
||||||
)}
|
|
||||||
>
|
<div>
|
||||||
<CheckCircle2 className="h-4 w-4" />
|
<p className="px-3 text-[11px] font-semibold uppercase tracking-wider text-slate-400">
|
||||||
Approvals
|
Administration
|
||||||
</Link>
|
</p>
|
||||||
<Link
|
<div className="mt-1 space-y-1">
|
||||||
href="/activity"
|
<Link
|
||||||
className={cn(
|
href="/organization"
|
||||||
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
|
className={cn(
|
||||||
pathname.startsWith("/activity")
|
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
|
||||||
? "bg-blue-100 text-blue-800 font-medium"
|
pathname.startsWith("/organization")
|
||||||
: "hover:bg-slate-100",
|
? "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" />
|
||||||
</Link>
|
Organization
|
||||||
{isAdmin ? (
|
</Link>
|
||||||
<Link
|
{isAdmin ? (
|
||||||
href="/agents"
|
<Link
|
||||||
className={cn(
|
href="/gateways"
|
||||||
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
|
className={cn(
|
||||||
pathname.startsWith("/agents")
|
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
|
||||||
? "bg-blue-100 text-blue-800 font-medium"
|
pathname.startsWith("/gateways")
|
||||||
: "hover:bg-slate-100",
|
? "bg-blue-100 text-blue-800 font-medium"
|
||||||
)}
|
: "hover:bg-slate-100",
|
||||||
>
|
)}
|
||||||
<Bot className="h-4 w-4" />
|
>
|
||||||
Agents
|
<Network className="h-4 w-4" />
|
||||||
</Link>
|
Gateways
|
||||||
) : null}
|
</Link>
|
||||||
|
) : null}
|
||||||
|
{isAdmin ? (
|
||||||
|
<Link
|
||||||
|
href="/agents"
|
||||||
|
className={cn(
|
||||||
|
"flex items-center gap-3 rounded-lg px-3 py-2.5 text-slate-700 transition",
|
||||||
|
pathname.startsWith("/agents")
|
||||||
|
? "bg-blue-100 text-blue-800 font-medium"
|
||||||
|
: "hover:bg-slate-100",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Bot className="h-4 w-4" />
|
||||||
|
Agents
|
||||||
|
</Link>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
<div className="border-t border-slate-200 p-4">
|
<div className="border-t border-slate-200 p-4">
|
||||||
|
|||||||
Reference in New Issue
Block a user