[fix] sidebar not closing on mobile

SamoaCodeHub · May 10, 2024 · 43dba5b · 43dba5b
1 parent 7e3657d
commit 43dba5b
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 6 deletions.
diff --git a/src/app.html b/src/app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" class="dark">
 	<head>
 		<meta charset="utf-8" />

diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
@@ -6,10 +6,9 @@
 </script>
 
 <div
-	class:-translate-x-full={!toggleSidebar}
-	class="w-full lg:hidden focus:shadow-outline z-20 variant-filled-surface
-  space-y-6 mt-16 pt-5 px-2 absolute overflow-hidden
-	inset-y-0 left-0 transform transition delay-200 duration-700 ease-in-out"
+	class={`w-full lg:hidden focus:shadow-outline z-20 variant-filled-surface
+  space-y-6 ${toggleSidebar ? '' : '-translate-x-full'} mt-16 pt-5 px-2 absolute overflow-hidden
+	inset-y-0 left-0 transform transition delay-200 duration-700 ease-in-out`}
 >
 	<!-- nav -->
 	<div class="btn-group-vertical w-full">

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -19,7 +19,7 @@
 		visible = event.currentTarget.scrollTop > 150;
 	}
 
-	let toggleSidebar;
+	let toggleSidebar = false;
 </script>
 
 <svelte:head>