From 36cf0a8141fc555c5a6d3d7e90d7e406f7e186b2 Mon Sep 17 00:00:00 2001
From: Kingkor Roy Tirtho <krtirtho@gmail.com>
Date: Fri, 9 Feb 2024 01:09:58 +0600
Subject: [PATCH] feat: add mobile nav and github star button

---
 website/src/components/navbar/navbar.svelte   | 42 +++++++++++++----
 .../src/components/navdrawer/navdrawer.svelte | 35 ++++++++++++++
 website/src/lib/index.ts                      |  8 ++++
 website/src/routes/+layout.svelte             | 13 +++++-
 website/src/routes/+page.svelte               | 46 ++++---------------
 5 files changed, 96 insertions(+), 48 deletions(-)
 create mode 100644 website/src/components/navdrawer/navdrawer.svelte

diff --git a/website/src/components/navbar/navbar.svelte b/website/src/components/navbar/navbar.svelte
index 7164ce82..3d4f0ab3 100644
--- a/website/src/components/navbar/navbar.svelte
+++ b/website/src/components/navbar/navbar.svelte
@@ -1,21 +1,43 @@
 <script lang="ts">
-	import { Home, Newspaper, Download } from 'lucide-svelte';
+	import { page } from '$app/stores';
+	import { routes } from '$lib';
+	import { faGithub } from '@fortawesome/free-brands-svg-icons';
+	import { getDrawerStore } from '@skeletonlabs/skeleton';
+	import { Menu } from 'lucide-svelte';
+	import Fa from 'svelte-fa';
 
-	const routes: Record<string, [string, any]> = {
-		'/': ['Home', Home],
-		'/blog': ['Blog', Newspaper],
-		'/downloads': ['Downloads', Download],
-		'/about': ['About', null]
-	};
+	const drawerStore = getDrawerStore();
 </script>
 
 <section class="flex justify-between">
-	<h2 class="text-3xl">Spotube</h2>
-	<nav class="flex gap-3">
+	<div class="flex items-center justify-between w-full">
+		<div class="flex items-center gap-2">
+			<button
+				class="btn btn-icon md:hidden"
+				on:click={() => {
+					drawerStore.set({ id: 'navdrawer', width: '400px', open: !$drawerStore.open });
+				}}
+			>
+				<Menu />
+			</button>
+			<h2 class="text-3xl">Spotube</h2>
+		</div>
+		<a
+			class="mw-2 md:me-4"
+			href="https://github.com/KRTirtho/spotube?referrer=spotube.krtirtho.dev"
+			target="_blank"
+		>
+			<button class="btn variant-filled flex items-center gap-2">
+				<Fa icon={faGithub} />
+				Star us on GitHub
+			</button>
+		</a>
+	</div>
+	<nav class="hidden md:flex gap-3">
 		{#each Object.entries(routes) as route}
 			<a href={route[0]}>
 				<button
-					class={`btn rounded-full flex gap-2 ${route[0] === '/downloads' ? 'variant-glass-primary' : 'variant-glass-surface'}`}
+					class={`btn rounded-full flex gap-2 ${route[0] === '/downloads' ? 'variant-glass-primary' : 'variant-glass-surface'} ${$page.url.pathname.endsWith(route[0]) ? 'underline' : ''}`}
 				>
 					{#if route[1][1] !== null}
 						<svelte:component this={route[1][1]} size={16} />
diff --git a/website/src/components/navdrawer/navdrawer.svelte b/website/src/components/navdrawer/navdrawer.svelte
new file mode 100644
index 00000000..409bd9af
--- /dev/null
+++ b/website/src/components/navdrawer/navdrawer.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { routes } from '$lib';
+	import { ListBox, ListBoxItem, getDrawerStore } from '@skeletonlabs/skeleton';
+	import { X } from 'lucide-svelte';
+
+	let currentRoute: string = $page.url.pathname;
+	const drawerStore = getDrawerStore();
+</script>
+
+<nav class="px-2">
+	<div class="flex justify-end">
+		<button class="btn btn-icon" on:click={drawerStore.close}>
+			<X />
+		</button>
+	</div>
+	<ListBox>
+		{#each Object.entries(routes) as route}
+			<ListBoxItem
+				bind:group={currentRoute}
+				name="item"
+				value={route[0]}
+				on:click={() => {
+					goto(route[0]);
+				}}
+			>
+				<div class="flex gap-2 items-center">
+					<svelte:component this={route[1][1]} size={16} />
+					{route[1][0]}
+				</div>
+			</ListBoxItem>
+		{/each}
+	</ListBox>
+</nav>
diff --git a/website/src/lib/index.ts b/website/src/lib/index.ts
index 5f55577d..802d68bc 100644
--- a/website/src/lib/index.ts
+++ b/website/src/lib/index.ts
@@ -9,6 +9,14 @@ import {
 	faRedhat
 } from '@fortawesome/free-brands-svg-icons';
 import { type IconDefinition } from '@fortawesome/free-brands-svg-icons/index';
+import { Home, Newspaper, Download } from 'lucide-svelte';
+
+export const routes: Record<string, [string, any]> = {
+	'/': ['Home', Home],
+	'/blog': ['Blog', Newspaper],
+	'/downloads': ['Downloads', Download],
+	'/about': ['About', null]
+};
 
 const releasesUrl = 'https://github.com/KRTirtho/Spotube/releases/latest/download';
 
diff --git a/website/src/routes/+layout.svelte b/website/src/routes/+layout.svelte
index 218794f5..5fd060b6 100644
--- a/website/src/routes/+layout.svelte
+++ b/website/src/routes/+layout.svelte
@@ -5,7 +5,7 @@
 	// Highlight JS
 	import hljs from 'highlight.js/lib/core';
 	import 'highlight.js/styles/github-dark.css';
-	import { storeHighlightJs } from '@skeletonlabs/skeleton';
+	import { Drawer, getDrawerStore, storeHighlightJs } from '@skeletonlabs/skeleton';
 	import xml from 'highlight.js/lib/languages/xml'; // for HTML
 	import css from 'highlight.js/lib/languages/css';
 	import javascript from 'highlight.js/lib/languages/javascript';
@@ -21,9 +21,20 @@
 	import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
 	import { storePopup } from '@skeletonlabs/skeleton';
 	storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
+
+	import { initializeStores } from '@skeletonlabs/skeleton';
+	import NavDrawer from '../components/navdrawer/navdrawer.svelte';
+	initializeStores();
+
+	const drawerStore = getDrawerStore();
 </script>
 
 <main class="p-2 md:p-4 flex flex-col">
+	<Drawer>
+		{#if $drawerStore.id === 'navdrawer'}
+			<NavDrawer />
+		{/if}
+	</Drawer>
 	<Navbar />
 	<slot />
 </main>
diff --git a/website/src/routes/+page.svelte b/website/src/routes/+page.svelte
index bc8d70db..a6f5a06e 100644
--- a/website/src/routes/+page.svelte
+++ b/website/src/routes/+page.svelte
@@ -7,27 +7,17 @@
 		faLinux
 	} from '@fortawesome/free-brands-svg-icons/index';
 	import Fa from 'svelte-fa';
-	import { ChevronDown } from 'lucide-svelte';
-	import { popup, type PopupSettings } from '@skeletonlabs/skeleton';
-	import { downloadLinks } from '$lib';
-
-	const popupFeatured: PopupSettings = {
-		// Represents the type of event that opens/closed the popup
-		event: 'click',
-		// Matches the data-popup value on your popup element
-		target: 'popupFeatured',
-		// Defines which side of your trigger the popup will appear
-		placement: 'bottom'
-	};
+	import { Download } from 'lucide-svelte';
 </script>
 
 <section class="flex flex-col gap-4">
-	<div class="ps-4 pt-4 md:ps-24 md:pt-24">
+	<div class="ps-4 pt-16 md:ps-24 md:pt-24">
 		<h1 class="h1">Spotube</h1>
+		<br />
 		<h3 class="h3">
-			An Open Source <Fa class="inline text-[#1DB954]" icon={faSpotify} /> Client for every platform
+			An Open Source <Fa class="inline text-[#1DB954]" icon={faSpotify} /> Spotify Client for every platform
 			<div class="inline-flex gap-3 items-center">
-				<Fa class="inline text-[#A4C639]" icon={faAndroid} />
+				<Fa class="inline text-[#3DDC84]" icon={faAndroid} />
 				<Fa class="inline text-[#00A2F0]" icon={faWindows} />
 				<Fa class="inline" icon={faLinux} />
 				<Fa class="inline" icon={faApple} />
@@ -38,29 +28,11 @@
 			built with Electron (web technologies)
 		</p>
 	</div>
-	<br /><br /><br />
+	<br /><br class="hidden md:block" /><br class="hidden md:block" />
 	<div class="flex justify-center">
-		<div class="card variant-glass-tertiary p-6 shadow-xl" data-popup="popupFeatured">
-			<ul class="flex flex-col gap-4">
-				{#each Object.entries(downloadLinks) as links}
-					<li class="w-full">
-						<a href={links[1][0]} class="flex w-full">
-							<div class="flex gap-2 rounded-xl bg-primary-500 items-center px-4 rounded-e-none">
-								{#each links[1][1] as icon}
-									<Fa class="inline" {icon} />
-								{/each}
-							</div>
-							<button class="btn variant-ghost-primary rounded-xl rounded-s-none p-4 w-full">
-								<p>{links[0]}</p>
-							</button>
-						</a>
-					</li>
-				{/each}
-			</ul>
-		</div>
-		<button class="flex gap-2 btn variant-filled-primary" use:popup={popupFeatured}>
+		<a href="/downloads" class="flex gap-2 btn variant-filled-primary">
 			Download
-			<ChevronDown />
-		</button>
+			<Download />
+		</a>
 	</div>
 </section>