mobile nav bar

Suwayomi · Jan 18, 2024 · 542164a · 542164a
1 parent 667e29b
commit 542164a
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 78 deletions.
diff --git a/src/lib/AppNavData.ts b/src/lib/AppNavData.ts
@@ -0,0 +1,48 @@
+// Copyright (c) 2024 Contributors to the Suwayomi project
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+export const AppNavData = [
+	{
+		href: '/',
+		title: 'Library',
+		icon: 'mdi:bookmark-box-multiple',
+		match: (page: string) => {
+			return page === '/';
+		}
+	},
+	{
+		href: '/updates',
+		title: 'Updates',
+		icon: 'mdi:alert-decagram-outline',
+		match: (page: string) => {
+			return page.includes('/updates');
+		}
+	},
+	{
+		href: '/browse/sources',
+		title: 'Browse',
+		icon: 'mdi:compass-outline',
+		match: (page: string) => {
+			return page.includes('/browse');
+		}
+	},
+	{
+		href: '/downloads',
+		title: 'Downloads',
+		icon: 'mdi:download',
+		match: (page: string) => {
+			return page.includes('/downloads');
+		}
+	},
+	{
+		href: '/settings',
+		title: 'Settings',
+		icon: 'mdi:cog',
+		match: (page: string) => {
+			return page.includes('/settings');
+		}
+	}
+];
diff --git a/src/lib/components/MainAppRail.svelte b/src/lib/components/MainAppRail.svelte
@@ -11,61 +11,20 @@
 	import { AppRail, AppRailAnchor } from '@skeletonlabs/skeleton';
 	import IconWrapper from './IconWrapper.svelte';
 	import Tooltip from './Tooltip.svelte';
+	import { AppNavData } from '../AppNavData';
 </script>
 
 <AppRail width="w-14">
-	<AppRailAnchor href="/" selected={$page.url.pathname === '/'}>
-		<Tooltip
-			tip="Library"
-			placement="right"
-			tipclass="z-20"
-			class="w-full flex justify-center items-center"
-		>
-			<IconWrapper name="mdi:bookmark-box-multiple" class="w-4/6 h-full aspect-square" />
-		</Tooltip>
-	</AppRailAnchor>
-	<AppRailAnchor href={'/updates'} selected={$page.url.pathname.includes('/updates')}>
-		<Tooltip
-			tip="Updates"
-			placement="right"
-			tipclass="z-20"
-			class="w-full flex justify-center items-center"
-		>
-			<IconWrapper name="mdi:alert-decagram-outline" class="w-4/6 h-full aspect-square" />
-		</Tooltip>
-	</AppRailAnchor>
-	<AppRailAnchor href={'/browse/sources'} selected={$page.url.pathname.includes('/browse')}>
-		<Tooltip
-			tip="Browse"
-			placement="right"
-			tipclass="z-20"
-			class="w-full flex justify-center items-center"
-		>
-			<IconWrapper name="mdi:compass-outline" class="w-4/6 h-full aspect-square" />
-		</Tooltip>
-	</AppRailAnchor>
-	<AppRailAnchor
-		href={'/downloads'}
-		selected={$page.url.pathname.includes('/downloads')}
-		title="Downloads"
-	>
-		<Tooltip
-			tip="Downloads"
-			placement="right"
-			tipclass="z-20"
-			class="w-full flex justify-center items-center"
-		>
-			<IconWrapper name="mdi:download" class="w-4/6 h-full aspect-square" />
-		</Tooltip>
-	</AppRailAnchor>
-	<AppRailAnchor href={'/settings'} selected={$page.url.pathname.includes('/settings')}>
-		<Tooltip
-			tip="Settings"
-			placement="right"
-			tipclass="z-20"
-			class="w-full flex justify-center items-center"
-		>
-			<IconWrapper name="mdi:cog" class="w-4/6 h-full aspect-square" />
-		</Tooltip>
-	</AppRailAnchor>
+	{#each AppNavData as Loc}
+		<AppRailAnchor href={Loc.href} selected={Loc.match($page.url.pathname)}>
+			<Tooltip
+				tip={Loc.title}
+				placement="right"
+				tipclass="z-20"
+				class="w-full flex justify-center items-center"
+			>
+				<IconWrapper name={Loc.icon} class="w-4/6 h-full aspect-square" />
+			</Tooltip>
+		</AppRailAnchor>
+	{/each}
 </AppRail>
diff --git a/src/lib/components/MobileAppNavigation.svelte b/src/lib/components/MobileAppNavigation.svelte
@@ -0,0 +1,38 @@
+<!--
+ Copyright (c) 2023 Contributors to the Suwayomi project
+ 
+ This Source Code Form is subject to the terms of the Mozilla Public
+ License, v. 2.0. If a copy of the MPL was not distributed with this
+ file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<script>
+	import { page } from '$app/stores';
+	import { TabGroup, TabAnchor } from '@skeletonlabs/skeleton';
+	import IconWrapper from './IconWrapper.svelte';
+	import { AppNavData } from '../AppNavData';
+</script>
+
+<TabGroup
+	justify="justify-center"
+	active="variant-filled-primary"
+	hover="hover:variant-soft-primary"
+	flex="flex-1 lg:flex-none"
+	rounded=""
+	border=""
+	class="bg-surface-100-800-token w-full"
+	regionList=" h-16"
+>
+	{#each AppNavData as Loc}
+		<TabAnchor
+			href={Loc.href}
+			selected={Loc.match($page.url.pathname)}
+			class="h-full [&>.tab-interface]:h-full [&>div>.tab-label]:h-full"
+		>
+			<div class="w-full h-full flex flex-col items-center">
+				<IconWrapper name={Loc.icon} class="max-h-full w-full grow aspect-square" />
+				<span class="text-sm">{Loc.title}</span>
+			</div>
+		</TabAnchor>
+	{/each}
+</TabGroup>
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
@@ -8,9 +8,10 @@
 
 <script lang="ts">
 	import { action, title } from '$lib/MountTitleAction';
-	import IconButton from '$lib/components/IconButton.svelte';
+	// import IconButton from '$lib/components/IconButton.svelte';
 	import MainAppRail from '$lib/components/MainAppRail.svelte';
 	import MediaQuery from '$lib/components/MediaQuery.svelte';
+	import MobileAppNavigation from '$lib/components/MobileAppNavigation.svelte';
 	import { screens } from '$lib/screens';
 	import { AppBar, AppShell } from '@skeletonlabs/skeleton';
 	import { getDrawerStore } from '@skeletonlabs/skeleton';
@@ -22,20 +23,6 @@
 	<svelte:fragment slot="header">
 		<AppBar padding="" slotTrail="h-10 xs:h-14" gap="" slotLead="h-10 xs:h-14">
 			<svelte:fragment slot="lead">
-				<MediaQuery query="(min-width: {screens.xs})" let:matches>
-					{#if !matches}
-						<IconButton
-							on:click={() => {
-								drawerStore.open({
-									id: 'MainMenu',
-									width: 'max-w-[50%]'
-								});
-							}}
-							name="mdi:dots-vertical"
-							class="h-full"
-						/>
-					{/if}
-				</MediaQuery>
 				<span class="text-xl/[5rem] sm:text-4xl/[5rem] py-2 px-2 sm:px-4 line-clamp-1">
 					{$title}
 				</span>
@@ -51,11 +38,18 @@
 		</AppBar>
 	</svelte:fragment>
 	<svelte:fragment slot="sidebarLeft">
-		<MediaQuery query="(min-width: {screens.xs})" let:matches>
+		<MediaQuery query="(min-width: {screens.md})" let:matches>
 			{#if matches}
 				<MainAppRail />
 			{/if}
 		</MediaQuery>
 	</svelte:fragment>
 	<slot />
+	<svelte:fragment slot="footer">
+		<MediaQuery query="(min-width: {screens.md})" let:matches>
+			{#if !matches}
+				<MobileAppNavigation />
+			{/if}
+		</MediaQuery>
+	</svelte:fragment>
 </AppShell>
diff --git a/src/routes/(app)/manga/[MangaID]/(manga)/chaptersSide.svelte b/src/routes/(app)/manga/[MangaID]/(manga)/chaptersSide.svelte
@@ -505,13 +505,17 @@
 		</MediaQuery>
 	</div>
 	{#if sortedChapters.filter((e) => !e.isRead).length}
-		<a
-			href="/manga/{manga.data.manga.id}/chapter/{sortedChapters
-				.filter((e) => !e.isRead)
-				.toSorted((a, b) => (a.sourceOrder > b.sourceOrder ? 1 : -1))[0].id}"
-			class="btn variant-filled-primary hover:variant-glass-primary fixed bottom-2 right-16 z-10"
-		>
-			resume
-		</a>
+		<MediaQuery query="(min-width: {screens.md})" let:matches>
+			<a
+				href="/manga/{manga.data.manga.id}/chapter/{sortedChapters
+					.filter((e) => !e.isRead)
+					.toSorted((a, b) => (a.sourceOrder > b.sourceOrder ? 1 : -1))[0].id}"
+				class="btn variant-filled-primary hover:variant-glass-primary fixed {matches
+					? 'bottom-2'
+					: 'bottom-[4.5rem]'} right-16 z-10"
+			>
+				resume
+			</a>
+		</MediaQuery>
 	{/if}
 {/if}