57 lines
2.5 KiB
Svelte
57 lines
2.5 KiB
Svelte
<!-- TRACES: UR-039 | DR-045 -->
|
|
<script lang="ts">
|
|
import { page } from '$app/stores';
|
|
import { goto } from '$app/navigation';
|
|
|
|
// Determine if a route is active
|
|
function isActive(path: string): boolean {
|
|
const pathname = $page.url.pathname;
|
|
if (path === '/') {
|
|
// Home is active only when exactly on / or /home, not /library or /search
|
|
return pathname === '/' || (pathname.startsWith('/home') && !pathname.startsWith('/library') && !pathname.startsWith('/search'));
|
|
}
|
|
return pathname.startsWith(path);
|
|
}
|
|
</script>
|
|
|
|
<!-- Navigation bar visible on all platforms -->
|
|
<nav class="fixed bottom-0 left-0 right-0 bg-[var(--color-surface)] border-t border-gray-800 z-40">
|
|
<div class="flex items-center justify-around px-4 py-2">
|
|
<!-- Home Button -->
|
|
<button
|
|
onclick={() => goto('/')}
|
|
class="flex flex-col items-center gap-1 py-2 px-4 transition-colors {isActive('/') && !isActive('/library') && !isActive('/search') ? 'text-[var(--color-jellyfin)]' : 'text-gray-400 hover:text-white'}"
|
|
aria-label="Home"
|
|
>
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
|
|
</svg>
|
|
<span class="text-xs">Home</span>
|
|
</button>
|
|
|
|
<!-- Search Button -->
|
|
<button
|
|
onclick={() => goto('/search')}
|
|
class="flex flex-col items-center gap-1 py-2 px-4 transition-colors {isActive('/search') ? 'text-[var(--color-jellyfin)]' : 'text-gray-400 hover:text-white'}"
|
|
aria-label="Search"
|
|
>
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
|
|
</svg>
|
|
<span class="text-xs">Search</span>
|
|
</button>
|
|
|
|
<!-- Library Button -->
|
|
<button
|
|
onclick={() => goto('/library')}
|
|
class="flex flex-col items-center gap-1 py-2 px-4 transition-colors {isActive('/library') ? 'text-[var(--color-jellyfin)]' : 'text-gray-400 hover:text-white'}"
|
|
aria-label="Library"
|
|
>
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z"/>
|
|
</svg>
|
|
<span class="text-xs">Library</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|