From 590d8dd42c1d1ef6c4fcd9f4eef9a679d3f547df Mon Sep 17 00:00:00 2001
From: Bob <dv4xd@proton.me>
Date: Mon, 19 Aug 2024 17:40:15 +0800
Subject: [PATCH] problem: on mobile, menu doesn't close when clicking on item

resolve https://github.com/nostrocket/hypergolic/issues/96
---
 src/components/Menu.svelte         | 27 ++++++++++-----------------
 src/layouts/SidePanelLayout.svelte | 13 +++++++++----
 2 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/components/Menu.svelte b/src/components/Menu.svelte
index 42c73e2..7767e73 100644
--- a/src/components/Menu.svelte
+++ b/src/components/Menu.svelte
@@ -4,19 +4,12 @@
 	import { Badge } from '@/components/ui/badge';
 	import Separator from '@/components/ui/separator/separator.svelte';
 	import { currentUser, devmode } from '@/stores/session';
-	import {
-		Code,
-		GitBranch,
-		HelpCircle,
-		Mail,
-		Package,
-		Pyramid,
-		Rocket,
-		Users
-	} from 'lucide-svelte';
+	import { Code, HelpCircle, Mail, Package, Pyramid, Rocket } from 'lucide-svelte';
 	import { GitAltBrand, TelegramBrand } from 'svelte-awesome-icons';
 	import NotifyMe from './NotifyMe.svelte';
 
+	export let closeSheet = () => {};
+
 	let iconClass = 'h-5 w-5 md:h-4 md:w-4';
 
 	$: getClass = (menuItem: string) => {
@@ -29,22 +22,22 @@
 </script>
 
 {#if $currentUser}
-	<a href="{base}/inbox" class={getClass('inbox')}>
+	<a href="{base}/inbox" class={getClass('inbox')} on:click={closeSheet}>
 		<Mail class={iconClass} />
 		Inbox
 		<Badge class="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">1</Badge>
 	</a>
 	<Separator class="dark:bg-slate-700" />
 {/if}
-<a href="{base}/rockets" class={getClass('rockets')}>
+<a href="{base}/rockets" class={getClass('rockets')} on:click={closeSheet}>
 	<Rocket class={iconClass} />
 	Rockets
 </a>
-<a href="{base}/products" class={getClass('products')}>
+<a href="{base}/products" class={getClass('products')} on:click={closeSheet}>
 	<Package class={iconClass} />
 	Products
 </a>
-<a href="{base}/problems" class={getClass('problems')}>
+<a href="{base}/problems" class={getClass('problems')} on:click={closeSheet}>
 	<Pyramid class={iconClass} />
 	Problem Tracker
 	<!-- <Badge class="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">6</Badge> -->
@@ -55,16 +48,16 @@
 	People
 </a> -->
 <Separator class="dark:bg-slate-700" />
-<a href="https://github.com/nostrocket/hypergolic" class={getClass('_')}>
+<a href="https://github.com/nostrocket/hypergolic" target="_blank" class={getClass('_')}>
 	<GitAltBrand class={iconClass} />
 	Source
 </a>
-<a href="https://t.me/nostrocket" class={getClass('_')}>
+<a href="https://t.me/nostrocket" target="_blank" class={getClass('_')}>
 	<TelegramBrand class={iconClass} />
 	Telegram Group
 </a>
 <NotifyMe menu />
-<a href="{base}/help" class={getClass('help')}>
+<a href="{base}/help" class={getClass('help')} on:click={closeSheet}>
 	<HelpCircle class={iconClass} />
 	Help
 </a>
diff --git a/src/layouts/SidePanelLayout.svelte b/src/layouts/SidePanelLayout.svelte
index 494946c..10e7029 100644
--- a/src/layouts/SidePanelLayout.svelte
+++ b/src/layouts/SidePanelLayout.svelte
@@ -13,7 +13,8 @@
 	import { bitcoinTip } from '@/stores/bitcoin';
 	import NotifyMe from '../components/NotifyMe.svelte';
 
-	export let title = '';
+	// export let title = '';
+	let open = false;
 </script>
 
 <div class="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[260px_1fr]">
@@ -38,7 +39,7 @@
 		<header
 			class="flex h-14 items-center justify-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6"
 		>
-			<Sheet.Root>
+			<Sheet.Root bind:open>
 				<Sheet.Trigger asChild let:builder>
 					<Button variant="outline" size="icon" class="shrink-0 md:hidden" builders={[builder]}>
 						<Menu class="h-5 w-5" />
@@ -47,10 +48,14 @@
 				</Sheet.Trigger>
 				<Sheet.Content side="left" class="flex flex-col">
 					<nav class="grid gap-2 text-lg font-medium">
-						<a href="##" class="flex items-center gap-2 text-lg font-semibold">
+						<a
+							href="{base}/"
+							class="flex items-center gap-2 text-lg font-semibold"
+							on:click={() => (open = false)}
+						>
 							<span><img src={`${base}/_logo.png`} /></span>
 						</a>
-						<NewMenu />
+						<NewMenu closeSheet={() => (open = false)} />
 					</nav>
 					<div class="mt-auto">
 						<RocketPillCard />