From 46ec52334be141f7580e8a17ac8b0381ee4cee9d Mon Sep 17 00:00:00 2001
From: Aleksi Lassila <aleksi.emil.lassila@gmail.com>
Date: Sun, 6 Aug 2023 21:12:39 +0300
Subject: [PATCH] Mobile navbar

---
 src/app.html                                  |  7 +-
 src/lib/components/Carousel/Carousel.svelte   |  4 +-
 src/lib/components/Navbar/Navbar.svelte       | 78 +++++++++++++++++--
 .../TitleShowcase/TitleShowcase.svelte        |  4 +-
 4 files changed, 79 insertions(+), 14 deletions(-)
diff --git a/src/app.html b/src/app.html
index 6a9cdc0..d41367f 100644
--- a/src/app.html
+++ b/src/app.html
@@ -3,7 +3,7 @@
 	<head>
 		<title>Reiverr</title>
 		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
 		<meta name="mobile-web-app-capable" content="yes" />
 		<meta name="apple-mobile-web-app-capable" content="yes" />
 		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
@@ -22,7 +22,10 @@
 		/>
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" class="bg-stone-950 min-h-screen text-white">
+	<body
+		data-sveltekit-preload-data="hover"
+		class="bg-stone-950 min-h-screen text-white touch-manipulation"
+	>
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/lib/components/Carousel/Carousel.svelte b/src/lib/components/Carousel/Carousel.svelte
index 92f2975..44d23fd 100644
--- a/src/lib/components/Carousel/Carousel.svelte
+++ b/src/lib/components/Carousel/Carousel.svelte
@@ -10,7 +10,7 @@
 	let scrollX = 0;
 </script>
 
-<div class="flex justify-between items-center mx-8 gap-4">
+<div class="flex justify-between items-center mx-2 sm:mx-8 gap-4">
 	<slot name="title">
 		<div class="font-semibold text-xl">{heading}</div>
 	</slot>
@@ -34,7 +34,7 @@
 
 <div class="relative">
 	<div
-		class="flex overflow-x-scroll items-center overflow-y-hidden gap-4 relative px-8 scrollbar-hide py-4"
+		class="flex overflow-x-scroll items-center overflow-y-hidden gap-4 relative px-2 sm:px-8 scrollbar-hide py-4"
 		bind:this={carousel}
 		tabindex="-1"
 		on:scroll={() => (scrollX = carousel?.scrollLeft || scrollX)}
diff --git a/src/lib/components/Navbar/Navbar.svelte b/src/lib/components/Navbar/Navbar.svelte
index 8ae947a..bdbef10 100644
--- a/src/lib/components/Navbar/Navbar.svelte
+++ b/src/lib/components/Navbar/Navbar.svelte
@@ -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} />
diff --git a/src/lib/components/TitleShowcase/TitleShowcase.svelte b/src/lib/components/TitleShowcase/TitleShowcase.svelte
index 16d55f5..1ea2a77 100644
--- a/src/lib/components/TitleShowcase/TitleShowcase.svelte
+++ b/src/lib/components/TitleShowcase/TitleShowcase.svelte
@@ -188,7 +188,7 @@
 		/>
 	{/if}
 	<div class="absolute inset-y-0 left-0 px-3 flex justify-start w-[10vw]">
-		<div class="peer relaitve z-10 flex justify-start">
+		<div class="peer relaitve z-[1] flex justify-start">
 			<IconButton on:click={onPrevious}>
 				<ChevronLeft size={20} />
 			</IconButton>
@@ -198,7 +198,7 @@
 		/>
 	</div>
 	<div class="absolute inset-y-0 right-0 px-3 flex justify-end w-[10vw]">
-		<div class="peer relaitve z-10 flex justify-end">
+		<div class="peer relaitve z-[1] flex justify-end">
 			<IconButton on:click={onNext}>
 				<ChevronRight size={20} />
 			</IconButton>
