kamil/libnovel
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 162 Wiki Activity

Add scroll-to-top button on browse page and mobile nav drawer
Some checks failed
Deploy / Deploy Production (push) Has been skipped
Details
Deploy / Cleanup Preview (push) Has been skipped
Details
Deploy / Deploy Preview (push) Failing after 1s
Details
CI / UI / Build (pull_request) Failing after 11s
Details
CI / Scraper / Test (pull_request) Successful in 16s
Details
CI / Scraper / Lint (pull_request) Successful in 18s
Details
CI / Scraper / Build (pull_request) Successful in 13s
Details

Browse Source
This commit is contained in:
Admin
2026-03-06 19:07:56 +05:00
parent 8f0a2f7e92
commit 9b7cdad71a
2 changed files with 119 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
ui/src/routes/+layout.svelte
View File

@@ -208,48 +208,69 @@
<a href="/" class="text-amber-400 font-bold text-lg tracking-tight hover:text-amber-300">
libnovel
</a>
{#if data.user}
<a
href="/books"
class="text-sm transition-colors {page.url.pathname.startsWith('/books') ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
>
Library
</a>
<a
href="/browse"
class="text-sm transition-colors {page.url.pathname.startsWith('/browse') ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
>
Discover
</a>
<!-- Desktop nav links (hidden on mobile) -->
<a
href="/books"
class="hidden sm:block text-sm transition-colors {page.url.pathname.startsWith('/books') ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
>
Library
</a>
<a
href="/browse"
class="hidden sm:block text-sm transition-colors {page.url.pathname.startsWith('/browse') ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
>
Discover
</a>
<div class="ml-auto flex items-center gap-4">
<!-- Desktop: admin + profile + sign out (hidden on mobile) -->
{#if data.user?.role === 'admin'}
<a
href="/admin/scrape"
class="text-sm transition-colors {page.url.pathname.startsWith('/admin/scrape') ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
class="hidden sm:block text-sm transition-colors {page.url.pathname.startsWith('/admin/scrape') ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
>
Scrape
</a>
<a
href="/admin/audio"
class="text-sm transition-colors {page.url.pathname.startsWith('/admin/audio') ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
class="hidden sm:block text-sm transition-colors {page.url.pathname.startsWith('/admin/audio') ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
>
Audio cache
</a>
{/if}
<a
href="/profile"
class="text-sm transition-colors {page.url.pathname === '/profile' ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
class="hidden sm:block text-sm transition-colors {page.url.pathname === '/profile' ? 'text-zinc-100 font-medium' : 'text-zinc-400 hover:text-zinc-100'}"
>
{data.user.username}
</a>
<form method="POST" action="/logout">
<button
type="submit"
class="text-zinc-400 hover:text-zinc-100 text-sm transition-colors"
>
<form method="POST" action="/logout" class="hidden sm:block">
<button type="submit" class="text-zinc-400 hover:text-zinc-100 text-sm transition-colors">
Sign out
</button>
</form>
<!-- Mobile: hamburger button -->
<button
onclick={() => (menuOpen = !menuOpen)}
aria-label="Toggle menu"
aria-expanded={menuOpen}
class="sm:hidden p-2 -mr-1 rounded text-zinc-400 hover:text-zinc-100 transition-colors"
>
{#if menuOpen}
<!-- X icon -->
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
{:else}
<!-- Hamburger icon -->
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
{/if}
</button>
</div>
{:else}
<div class="ml-auto">
@@ -262,6 +283,60 @@
</div>
{/if}
</nav>
<!-- Mobile drawer (full-width, below the bar) -->
{#if data.user && menuOpen}
<div class="sm:hidden border-t border-zinc-700 bg-zinc-900 px-4 py-3 flex flex-col gap-1">
<a
href="/books"
onclick={() => (menuOpen = false)}
class="px-3 py-2.5 rounded-lg text-sm font-medium transition-colors {page.url.pathname.startsWith('/books') ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100'}"
>
Library
</a>
<a
href="/browse"
onclick={() => (menuOpen = false)}
class="px-3 py-2.5 rounded-lg text-sm font-medium transition-colors {page.url.pathname.startsWith('/browse') ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100'}"
>
Discover
</a>
<a
href="/profile"
onclick={() => (menuOpen = false)}
class="px-3 py-2.5 rounded-lg text-sm font-medium transition-colors {page.url.pathname === '/profile' ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100'}"
>
Profile <span class="text-zinc-500 font-normal">({data.user.username})</span>
</a>
{#if data.user?.role === 'admin'}
<div class="my-1 border-t border-zinc-700/60"></div>
<p class="px-3 pt-1 pb-0.5 text-xs text-zinc-600 uppercase tracking-widest">Admin</p>
<a
href="/admin/scrape"
onclick={() => (menuOpen = false)}
class="px-3 py-2.5 rounded-lg text-sm font-medium transition-colors {page.url.pathname.startsWith('/admin/scrape') ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100'}"
>
Scrape tasks
</a>
<a
href="/admin/audio"
onclick={() => (menuOpen = false)}
class="px-3 py-2.5 rounded-lg text-sm font-medium transition-colors {page.url.pathname.startsWith('/admin/audio') ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100'}"
>
Audio cache
</a>
{/if}
<div class="my-1 border-t border-zinc-700/60"></div>
<form method="POST" action="/logout">
<button
type="submit"
class="w-full text-left px-3 py-2.5 rounded-lg text-sm font-medium text-red-400 hover:bg-zinc-800 transition-colors"
>
Sign out
</button>
</form>
</div>
{/if}
</header>
<main class="flex-1 max-w-6xl mx-auto w-full px-4 py-8">

24
ui/src/routes/browse/+page.svelte
View File

@@ -152,6 +152,16 @@
// Admin: refresh catalogue
let refreshing = $state(false);
// ── Scroll-to-top button ─────────────────────────────────────────────────
let showScrollTop = $state(false);
$effect(() => {
function onScroll() {
showScrollTop = window.scrollY > 400;
}
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
});
</script>
<svelte:head>
@@ -559,3 +569,17 @@
<p class="text-center text-zinc-600 text-xs mt-8 pb-4">All novels loaded</p>
{/if}
{/if}
<!-- Scroll-to-top button -->
{#if showScrollTop}
<button
onclick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
class="fixed bottom-6 right-6 z-50 p-3 rounded-full bg-zinc-800 border border-zinc-600 text-zinc-300 shadow-lg hover:bg-zinc-700 hover:text-zinc-100 transition-colors"
title="Back to top"
aria-label="Scroll to top"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
</svg>
</button>
{/if}