bvandeusen
22ac86f200
The main nav was carrying surfaces that didn't belong on it: - Search led to an empty page when clicked (you only ever want to land there from the global SearchInput typing into /search?q=...). Drop it. - Requests is downstream of Discover (you discover, then you request). Lift both onto a shared horizontal tab strip; keep their URLs so bookmarks survive. New DiscoverTabs component used by both pages. - Settings + Admin are operator chrome, not primary surfaces. Move them into the username dropdown alongside Log out, with Admin gated on is_admin. Users see Settings + Log out; admins see Settings + Admin + Log out. Final main nav: Home / Artists / Albums / Liked / Discover / Playlists. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
37 lines
1.1 KiB
Svelte
37 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/state';
|
|
|
|
type Item = { href: string; label: string };
|
|
|
|
// Discover and Requests are paired: discover an artist → request it. The
|
|
// tab strip lifts both surfaces onto the same horizontal axis so the
|
|
// operator can move between them without round-tripping through the
|
|
// main nav.
|
|
const items: Item[] = [
|
|
{ href: '/discover', label: 'Discover' },
|
|
{ href: '/requests', label: 'Requests' }
|
|
];
|
|
|
|
function isActive(href: string): boolean {
|
|
return page.url.pathname.startsWith(href);
|
|
}
|
|
</script>
|
|
|
|
<nav aria-label="Discover sections" class="border-b border-border">
|
|
<ul class="flex gap-2">
|
|
{#each items as item (item.href)}
|
|
<li>
|
|
<a
|
|
href={item.href}
|
|
aria-current={isActive(item.href) ? 'page' : undefined}
|
|
class="block border-b-2 px-3 py-2 text-sm transition-colors {isActive(item.href)
|
|
? 'border-accent text-text-primary'
|
|
: 'border-transparent text-text-secondary hover:text-text-primary'}"
|
|
>
|
|
{item.label}
|
|
</a>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</nav>
|