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; href: string;
label: string; label: string;
icon: string; icon: string;
/** Stable key driving the per-section icon colour (see sidebar.css). */
section: string;
admin?: boolean; admin?: boolean;
} }
const LINKS: NavLink[] = [ const LINKS: NavLink[] = [
{ href: '/files', label: t('nav.files', 'Files'), icon: 'folder' }, { href: '/files', label: t('nav.files', 'Files'), icon: 'folder', section: 'files' },
{ href: '/shared', label: t('nav.shared', 'Shared'), icon: 'oxiexport' }, { href: '/shared', label: t('nav.shared', 'Shared'), icon: 'oxiexport', section: 'shared' },
{ {
href: '/shared-with-me', href: '/shared-with-me',
label: t('nav.shared_with_me', '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: '/recent', label: t('nav.recent', 'Recent'), icon: 'clock', section: 'recent' },
{ href: '/favorites', label: t('nav.favorites', 'Favorites'), icon: 'star' }, {
{ href: '/photos', label: t('nav.photos', 'Photos'), icon: 'images' }, href: '/favorites',
{ href: '/music', label: t('nav.music', 'Music'), icon: 'music' }, label: t('nav.favorites', 'Favorites'),
{ href: '/trash', label: t('nav.trash', 'Trash'), icon: 'trash' } 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'); const isAdmin = $derived(session.user?.role === 'admin');
@@ -256,6 +264,7 @@
class="nav-item" class="nav-item"
class:active={active(link.href)} class:active={active(link.href)}
href={link.href} href={link.href}
data-section={link.section}
onclick={() => (sidebarOpen = false)} onclick={() => (sidebarOpen = false)}
> >
<Icon name={link.icon} /> <Icon name={link.icon} />
frontend/src/lib/styles/ported/sidebar.css
+36 -22
View File
@@ -175,30 +175,44 @@
} }
} }
/* Colored icons per section */ /* Colored icons per section.
.nav-item:nth-child(1) i, Keyed off the stable `data-section` attribute (set in AppShell's LINKS), NOT
.nav-item:nth-child(1) .oxi-icon { DOM order — adding/reordering nav items can no longer desync the colours from
color: var(--color-cal-1); their labels. Each section maps to one curated calendar-dot hue (the same
} /* Files - orange */ --color-cal-* family used elsewhere), spread around the wheel so they read as
.nav-item:nth-child(2) i, a set: the two share directions are sibling blues, music is purple to match
.nav-item:nth-child(2) .oxi-icon { its gradient, and trash is red as a soft "destructive" affordance. */
.nav-item[data-section="files"] i,
.nav-item[data-section="files"] .oxi-icon {
color: var(--color-cal-2); color: var(--color-cal-2);
} /* Shared - blue */ } /* Files - amber */
.nav-item:nth-child(3) i, .nav-item[data-section="shared"] i,
.nav-item:nth-child(3) .oxi-icon { .nav-item[data-section="shared"] .oxi-icon {
color: var(--color-cal-3); color: var(--color-cal-7);
} /* Recent - teal */ } /* Shared (outbound) - sky */
.nav-item:nth-child(4) i, .nav-item[data-section="shared-with-me"] i,
.nav-item:nth-child(4) .oxi-icon { .nav-item[data-section="shared-with-me"] .oxi-icon {
color: var(--color-cal-4); color: var(--color-cal-8);
} /* Favorites - gold */ } /* Shared with me (inbound) - blue */
.nav-item:nth-child(5) i, .nav-item[data-section="recent"] i,
.nav-item:nth-child(5) .oxi-icon { .nav-item[data-section="recent"] .oxi-icon {
color: var(--color-cal-5);
} /* Photos - pink */
.nav-item:nth-child(6) i,
.nav-item:nth-child(6) .oxi-icon {
color: var(--color-cal-6); color: var(--color-cal-6);
} /* Recent - teal */
.nav-item[data-section="favorites"] i,
.nav-item[data-section="favorites"] .oxi-icon {
color: var(--color-cal-3);
} /* Favorites - gold */
.nav-item[data-section="photos"] i,
.nav-item[data-section="photos"] .oxi-icon {
color: var(--color-cal-10);
} /* Photos - magenta */
.nav-item[data-section="music"] i,
.nav-item[data-section="music"] .oxi-icon {
color: var(--color-cal-9);
} /* Music - purple */
.nav-item[data-section="trash"] i,
.nav-item[data-section="trash"] .oxi-icon {
color: var(--color-cal-1);
} /* Trash - red */ } /* Trash - red */
/* Colourful icons at rest, but the ACTIVE item is always accent — one /* Colourful icons at rest, but the ACTIVE item is always accent — one