Swipable menu, draggable bookmarks

svelte/src/wrap/MainMenu.svelte

@@ -1,3 +1,6 @@
+<script lang="ts" module>
+export let menu_is_open = writable(true)
+</script>
 <script lang="ts">
 import { highlight_current_page } from "lib/HighlightCurrentPage";
 import { user } from "lib/UserStore";
@@ -13,15 +16,12 @@ import Spinner from "util/Spinner.svelte";
 import { get_user } from "lib/PixeldrainAPI";
 import Tree from "./Tree.svelte";
 import MenuEntry from "./MenuEntry.svelte";
-
-let menu_collapsed: boolean = $state(false)
-
-const toggle_menu = (e: MouseEvent) => {
-	menu_collapsed = !menu_collapsed
-}
+import { writable } from "svelte/store";
 
 onMount(() => {
-	menu_collapsed = document.documentElement.clientWidth < 1000
+	if (document.documentElement.clientWidth < 1000) {
+		menu_close()
+	}
 
 	loading_run(async () => {
 		const user = await get_user()
@@ -32,31 +32,117 @@ onMount(() => {
 		document.documentElement.style = css_from_path(root.path)
 	})
 })
+
+// Dead zone before the swipe action gets detected
+const swipe_initial_offset = 50
+const min_screen_size_fullscreen_menu = 500
+
+let menu: HTMLDivElement
+let nav: HTMLElement
+let dragging: boolean = false
+let start_x: number
+let render_offset: number
+let initial_offset: number
+const touchstart = (e: TouchEvent) => {
+	start_x = e.touches[0].clientX
+	const rect = menu.getBoundingClientRect()
+	if (start_x < Math.max(swipe_initial_offset, (rect.width+rect.left))) {
+		dragging = true
+	}
+
+	render_offset = rect.left
+	initial_offset = rect.left
+}
+
+const touchmove = (e: TouchEvent) => {
+	if (!dragging) {
+		return
+	}
+	set_offset(initial_offset+(e.touches[0].clientX - start_x))
+}
+
+const touchend = (e: TouchEvent) => {
+	if (!dragging) {
+		return
+	}
+	dragging = false
+
+	const menu_width = menu.getBoundingClientRect().width
+	if (render_offset > -(menu_width/2)) {
+		menu_open()
+	} else {
+		menu_close()
+	}
+}
+
+const toggle_menu = (e: MouseEvent) => {
+	if (menu.style.transform === "") {
+		menu_close()
+	} else {
+		menu_open()
+	}
+}
+const menu_open = () => {
+	set_offset(0)
+	menu_is_open.set(true)
+	if (document.documentElement.clientWidth < min_screen_size_fullscreen_menu) {
+		menu.style.position = "fixed"
+		menu.style.width = "100%"
+		nav.style.width = "100%"
+		nav.style.maxWidth = "100%"
+	} else {
+		menu.style.position = "relative"
+		menu.style.width = ""
+		nav.style.width = ""
+		nav.style.maxWidth = ""
+	}
+}
+const menu_close = () => {
+	set_offset(-menu.getBoundingClientRect().width)
+	menu_is_open.set(false)
+	menu.style.position = "fixed"
+
+	if (document.documentElement.clientWidth >= min_screen_size_fullscreen_menu) {
+		menu.style.width = ""
+		nav.style.width = ""
+		nav.style.maxWidth = ""
+	}
+}
+
+const set_offset = (off: number) => {
+	render_offset = off
+
+	if (off > -swipe_initial_offset) {
+		// Clear the transformation if the offset is zero
+		menu.style.transform = ""
+	} else {
+		menu.style.transform = "translateX(" + off + "px)"
+	}
+}
 </script>
 
-<div class="nav_container">
-	<div class="scroll_container">
-		<nav class="nav" class:collapse={menu_collapsed}>
-			<button class="button" onclick={toggle_menu}>
-				<i class="icon">menu</i>
-				<span class:hide={menu_collapsed}>Collapse menu</span>
-			</button>
+<svelte:window ontouchstart={touchstart} ontouchmove={touchmove} ontouchend={touchend}/>
 
+<button class="button_toggle_navigation" onclick={toggle_menu}>
+	<i class="icon">menu</i>
+</button>
+
+<div class="nav_container" bind:this={menu}>
+	<div class="scroll_container">
+		<nav class="nav" bind:this={nav}>
 			<a class="button" href="/" use:highlight_current_page>
 				<i class="icon">home</i>
-				<span class:hide={menu_collapsed}>Home</span>
+				<span>Home</span>
 			</a>
 
 			{#if $user.username !== undefined && $user.username !== ""}
-				<div class="separator" class:hide={menu_collapsed}></div>
-
-				<MenuEntry id="subscription_info" collapsed={menu_collapsed}>
+				<MenuEntry id="subscription_info" collapsed={false}>
 					{#snippet title()}
 						<div class="username">{$user.username}</div>
 					{/snippet}
 
 					{#snippet body()}
-						<div class="stats_table" class:hide={menu_collapsed}>
+						<div class="stats_table">
 							<div>Subscription</div>
 							<div>{$user.subscription.name}</div>
 
@@ -75,26 +161,26 @@ onMount(() => {
 
 				<a class="button" href="/d/me" use:highlight_current_page>
 					<i class="icon">folder</i>
-					<span class:hide={menu_collapsed}>Filesystem</span>
+					<span>Filesystem</span>
 				</a>
 				<a class="button" href="/user" use:highlight_current_page>
-					<i class="icon">dashboard</i>
-					<span class:hide={menu_collapsed}>Dashboard</span>
+					<i class="icon">person</i>
+					<span>Account</span>
 				</a>
 				{#if $user.is_admin}
 					<a class="button" href="/admin" use:highlight_current_page>
 						<i class="icon">admin_panel_settings</i>
-						<span class:hide={menu_collapsed}>Admin Panel</span>
+						<span>Admin Panel</span>
 					</a>
 				{/if}
 			{:else}
 				<a class="button" href="/login" use:highlight_current_page>
 					<i class="icon">login</i>
-					<span class:hide={menu_collapsed}>Login</span>
+					<span>Login</span>
 				</a>
 				<a class="button" href="/register" use:highlight_current_page>
 					<i class="icon">how_to_reg</i>
-					<span class:hide={menu_collapsed}>Register</span>
+					<span>Register</span>
 				</a>
 			{/if}
 
@@ -102,17 +188,15 @@ onMount(() => {
 
 			<a class="button" href="/speedtest" use:highlight_current_page>
 				<i class="icon">speed</i>
-				<span class:hide={menu_collapsed}>Speedtest</span>
+				<span>Speedtest</span>
 			</a>
 			<a class="button" href="/appearance" use:highlight_current_page>
 				<i class="icon">palette</i>
-				<span class:hide={menu_collapsed}>Themes</span>
+				<span>Themes</span>
 			</a>
 
-			<div class="separator"></div>
-
-			<Bookmarks menu_collapsed={menu_collapsed}/>
-			<Tree menu_collapsed={menu_collapsed}/>
+			<Bookmarks menu_collapsed={false}/>
+			<Tree menu_collapsed={false}/>
 		</nav>
 	</div>
 </div>
@@ -141,18 +225,35 @@ onMount(() => {
 	background-repeat: var(--background_image_repeat, repeat);
 	background-attachment: fixed;
 }
+.button_toggle_navigation {
+	position: fixed;
+	backface-visibility: hidden;
+	z-index: 10;
+	top: 0;
+	left: 0;
+	background: none;
+	box-shadow: none;
+	margin: 0;
+	padding: 4px;
+	border-radius: 0;
+	border-bottom-right-radius: 0px;
+	border-bottom-right-radius: 2px;
+	backdrop-filter: blur(6px);
+}
 .nav_container {
 	flex: 0 0 auto;
 	border-right: 1px solid var(--separator);
 	background: var(--shaded_background);
-	backdrop-filter: blur(4px);
+	backdrop-filter: blur(6px);
+	z-index: 9;
 }
 .scroll_container {
 	position: sticky;
 	top: 0;
-	max-height: 100vh;
 	overflow-x: hidden;
 	overflow-y: auto;
+	max-height: 100vh;
+	height: 100vh;
 }
 .nav {
 	display: flex;
@@ -160,10 +261,7 @@ onMount(() => {
 	width: 15em;
 	min-width: 10em;
 	max-width: 15em;
-}
-.nav.collapse {
-	width: unset;
-	min-width: unset;
+	padding-top: 2em;
 }
 .nav > .button {
 	background: none;
@@ -192,10 +290,6 @@ onMount(() => {
 	margin: 5px;
 }
 
-.hide {
-	display: none;
-}
-
 .spinner {
 	position: fixed;
 	top: 10px;