fix: stack sidebar utility icons vertically

Horizontal row didn't fit in 64px collapsed sidebar. Stack theme,
notifications, and profile icons vertically like nav items.
This commit is contained in:
Usman Baig
2026-03-18 22:27:53 +01:00
parent f1fc8facb4
commit 342e3705e8

View File

@@ -382,9 +382,14 @@ export default function Sidebar({
{/* Bottom — utility items */} {/* Bottom — utility items */}
<div className="border-t border-neutral-200/60 dark:border-neutral-800/60 px-2 py-3 shrink-0"> <div className="border-t border-neutral-200/60 dark:border-neutral-800/60 px-2 py-3 shrink-0">
{/* Theme, Notifications, Profile */} {/* Theme, Notifications, Profile */}
<div className="flex items-center justify-center gap-1 mb-1"> <div className="flex flex-col items-center gap-0.5 mb-1">
<div className="flex items-center justify-center w-full rounded-lg px-2.5 py-2">
<ThemeToggle /> <ThemeToggle />
</div>
<div className="flex items-center justify-center w-full rounded-lg px-2.5 py-2">
<NotificationCenter anchor="right" /> <NotificationCenter anchor="right" />
</div>
<div className="flex items-center justify-center w-full rounded-lg px-2.5 py-2">
<UserMenu <UserMenu
auth={auth} auth={auth}
LinkComponent={Link} LinkComponent={Link}
@@ -398,6 +403,7 @@ export default function Sidebar({
anchor="right" anchor="right"
/> />
</div> </div>
</div>
{/* Settings + Collapse */} {/* Settings + Collapse */}
<div className="space-y-0.5"> <div className="space-y-0.5">