cjw/Oxicloud
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(sidebar): key nav icon colours off data-section, not DOM order

Browse Source 
The per-section icon colours used :nth-child(1..6), but the nav grew to 8
items (files, shared, shared-with-me, recent, favorites, photos, music,
trash). The colours had drifted out of sync with their labels, and music
and trash got no colour at all.

Map each item's colour off a stable `data-section` key instead, covering
all eight sections with distinct curated calendar-dot hues (sibling blues
for the two share directions, purple for music, red for trash). Reordering
or adding nav items can no longer desync the colours.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013J5koaCrHDMvS7uwpawLBN
This commit is contained in:
Claude
2026-06-19 22:49:59 +00:00
parent b54c9a3e71
commit a774d9f6de
2 changed files with 53 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/AppShell.svelte
+17 -8
View File
@@ -23,22 +23,30 @@
href: string;
label: string;
icon: string;
/** Stable key driving the per-section icon colour (see sidebar.css). */
section: string;
admin?: boolean;
}
const LINKS: NavLink[] = [
{ href: '/files', label: t('nav.files', 'Files'), icon: 'folder' },
{ href: '/shared', label: t('nav.shared', 'Shared'), icon: 'oxiexport' },
{ href: '/files', label: t('nav.files', 'Files'), icon: 'folder', section: 'files' },
{ href: '/shared', label: t('nav.shared', 'Shared'), icon: 'oxiexport', section: 'shared' },
{
href: '/shared-with-me',
label: t('nav.shared_with_me', 'Shared with me'),
icon: 'oxiimport'
icon: 'oxiimport',
section: 'shared-with-me'
},
{ href: '/recent', label: t('nav.recent', 'Recent'), icon: 'clock' },
{ href: '/favorites', label: t('nav.favorites', 'Favorites'), icon: 'star' },
{ href: '/photos', label: t('nav.photos', 'Photos'), icon: 'images' },
{ href: '/music', label: t('nav.music', 'Music'), icon: 'music' },
{ href: '/trash', label: t('nav.trash', 'Trash'), icon: 'trash' }
{ href: '/recent', label: t('nav.recent', 'Recent'), icon: 'clock', section: 'recent' },
{
href: '/favorites',
label: t('nav.favorites', 'Favorites'),
icon: 'star',
section: 'favorites'
},
{ href: '/photos', label: t('nav.photos', 'Photos'), icon: 'images', section: 'photos' },
{ href: '/music', label: t('nav.music', 'Music'), icon: 'music', section: 'music' },
{ href: '/trash', label: t('nav.trash', 'Trash'), icon: 'trash', section: 'trash' }
];
const isAdmin = $derived(session.user?.role === 'admin');
@@ -256,6 +264,7 @@
class="nav-item"
class:active={active(link.href)}
href={link.href}
data-section={link.section}
onclick={() => (sidebarOpen = false)}
>
<Icon name={link.icon} />