starred/reiverr
1
0
Fork 0
mirror of https://github.com/aleksilassila/reiverr.git synced 2026-04-22 08:45:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

Mobile navbar

Browse Source
This commit is contained in:
Aleksi Lassila
2023-08-06 21:12:39 +03:00
parent 1a6e33c1ce
commit 46ec52334b
4 changed files with 79 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/lib/components/Navbar/Navbar.svelte
View File

@@ -1,18 +1,20 @@
<script lang="ts">
import { MagnifyingGlass, Person } from 'radix-icons-svelte';
import { Cross1, HamburgerMenu, MagnifyingGlass, Person } from 'radix-icons-svelte';
import classNames from 'classnames';
import { page } from '$app/stores';
import TitleSearchModal from './TitleSearchModal.svelte';
import IconButton from '../IconButton.svelte';
import { fade } from 'svelte/transition';
let y = 0;
let transparent = true;
let baseStyle = '';
let isSearchVisible = false;
let isMobileMenuVisible = false;
function getLinkStyle(path: string) {
return classNames('selectable rounded-sm px-2 -mx-2', {
return classNames('selectable rounded-sm px-2 -mx-2 sm:text-base text-xl', {
'text-amber-200': $page.url.pathname === path,
'hover:text-zinc-50 cursor-pointer': $page.url.pathname !== path
});
@@ -22,11 +24,12 @@
$: {
transparent = y <= 0;
baseStyle = classNames(
'fixed px-8 inset-x-0 grid grid-cols-[min-content_1fr_min-content] items-center z-10',
'fixed px-8 inset-x-0 grid-cols-[min-content_1fr_min-content] items-center z-10',
'transition-all',
{
'bg-stone-900 bg-opacity-50 backdrop-blur-2xl h-16': !transparent,
'h-24': transparent
'bg-stone-900 bg-opacity-50 backdrop-blur-2xl': !isMobileMenuVisible && !transparent,
'h-16': !transparent,
'h-16 sm:h-24': transparent
}
);
}
@@ -34,13 +37,16 @@
<svelte:window bind:scrollY={y} />
<div class={baseStyle}>
<a href="/" class="flex gap-2 items-center hover:text-inherit selectable rounded-sm px-2 -mx-2">
<div class={classNames(baseStyle, 'hidden sm:grid')}>
<a
href="/"
class="hidden sm:flex gap-2 items-center hover:text-inherit selectable rounded-sm px-2 -mx-2"
>
<div class="rounded-full bg-amber-300 h-4 w-4" />
<h1 class="font-display uppercase font-semibold tracking-wider text-xl">Reiverr</h1>
</a>
<div
class="flex items-center justify-center gap-8 font-normal text-sm tracking-wider text-zinc-200"
class="flex items-center justify-center gap-4 md:gap-8 font-normal text-sm tracking-wider text-zinc-200"
>
<a href="/" class={$page && getLinkStyle('/')}>Home</a>
<a href="/discover" class={$page && getLinkStyle('/discover')}>Discover</a>
@@ -58,4 +64,60 @@
</div>
</div>
<div class={classNames(baseStyle, ' grid sm:hidden')}>
<a href="/" class="flex gap-2 items-center hover:text-inherit selectable rounded-sm px-2 -mx-2">
<div class="rounded-full bg-amber-300 h-4 w-4" />
<h1 class="font-display uppercase font-semibold tracking-wider text-xl">Reiverr</h1>
</a>
<div />
<div class="flex items-center gap-2">
<IconButton on:click={() => (isSearchVisible = true)}>
<MagnifyingGlass size={20} />
</IconButton>
{#if isMobileMenuVisible}
<IconButton on:click={() => (isMobileMenuVisible = false)}>
<Cross1 size={20} />
</IconButton>
{:else}
<IconButton on:click={() => (isMobileMenuVisible = true)}>
<HamburgerMenu size={20} />
</IconButton>
{/if}
</div>
</div>
{#if isMobileMenuVisible}
<div
class="fixed inset-0 pt-16 bottom-0 bg-stone-900 bg-opacity-50 backdrop-blur-2xl z-[9] grid grid-rows-3 transition-all ease-linear"
transition:fade={{ duration: 150 }}
>
<div class="row-span-2 flex flex-col gap-4 items-center justify-center">
<a on:click={() => (isMobileMenuVisible = false)} href="/" class={$page && getLinkStyle('/')}
>Home</a
>
<a
on:click={() => (isMobileMenuVisible = false)}
href="/discover"
class={$page && getLinkStyle('/discover')}>Discover</a
>
<a
on:click={() => (isMobileMenuVisible = false)}
href="/library"
class={$page && getLinkStyle('/library')}>Library</a
>
<a
on:click={() => (isMobileMenuVisible = false)}
href="/sources"
class={$page && getLinkStyle('/sources')}>Sources</a
>
<a
on:click={() => (isMobileMenuVisible = false)}
href="/settings"
class={$page && getLinkStyle('/settings')}>Settings</a
>
</div>
</div>
{/if}
<TitleSearchModal bind:visible={isSearchVisible} />