ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

fix: align sidebar utility items with nav item layout

Browse Source 
Use left-aligned rows with fading labels for theme, notifications,
and profile — matching the nav items pattern. Fix app switcher
alignment at top to match logo row.
This commit is contained in:
Usman Baig
2026-03-18 22:32:56 +01:00
parent 342e3705e8
commit 0b545eaa76
1 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/dashboard/Sidebar.tsx
View File

@@ -344,8 +344,13 @@ export default function Sidebar({
return ( return (
<div className="flex flex-col h-full overflow-hidden"> <div className="flex flex-col h-full overflow-hidden">
{/* App Switcher — top of sidebar (scope-level switch) */} {/* App Switcher — top of sidebar (scope-level switch) */}
<div className="flex items-center justify-center px-2 pt-3 pb-1 shrink-0"> <div className="flex items-center gap-2.5 px-[14px] pt-3 pb-1 shrink-0 overflow-hidden">
<AppLauncher apps={CIPHERA_APPS} currentAppId="pulse" anchor="right" /> <span className="w-9 h-9 flex items-center justify-center shrink-0">
<AppLauncher apps={CIPHERA_APPS} currentAppId="pulse" anchor="right" />
</span>
<Label collapsed={c}>
<span className="text-xs font-medium text-neutral-400 dark:text-neutral-500 uppercase tracking-wider">Ciphera</span>
</Label>
</div> </div>
{/* Logo — fixed layout, text fades */} {/* Logo — fixed layout, text fades */}
@@ -382,14 +387,16 @@ 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 flex-col items-center gap-0.5 mb-1"> <div className="space-y-0.5 mb-1">
<div className="flex items-center justify-center w-full rounded-lg px-2.5 py-2"> <div className="flex items-center gap-2.5 rounded-lg px-2.5 py-1 overflow-hidden">
<ThemeToggle /> <ThemeToggle />
<Label collapsed={c}>Theme</Label>
</div> </div>
<div className="flex items-center justify-center w-full rounded-lg px-2.5 py-2"> <div className="flex items-center gap-2.5 rounded-lg px-2.5 py-1 overflow-hidden">
<NotificationCenter anchor="right" /> <NotificationCenter anchor="right" />
<Label collapsed={c}>Notifications</Label>
</div> </div>
<div className="flex items-center justify-center w-full rounded-lg px-2.5 py-2"> <div className="flex items-center gap-2.5 rounded-lg px-2.5 py-1 overflow-hidden">
<UserMenu <UserMenu
auth={auth} auth={auth}
LinkComponent={Link} LinkComponent={Link}
@@ -402,6 +409,7 @@ export default function Sidebar({
compact compact
anchor="right" anchor="right"
/> />
<Label collapsed={c}>{user?.display_name?.trim() || 'Profile'}</Label>
</div> </div>
</div> </div>