From 0990a276ff3bdf37278b6db3893a21fc070fa1c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=B4=80=E1=B4=8D=E1=B4=9B=E1=B4=8F=E1=B4=80=E1=B4=87?=
 =?UTF-8?q?=CA=80?= <amtoaer@gmail.com>
Date: Fri, 11 Jul 2025 19:15:13 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF=20sidebar=20?=
 =?UTF-8?q?=E5=9C=A8=E7=82=B9=E6=8C=89=E5=90=8E=E8=87=AA=E5=8A=A8=E6=94=B6?=
 =?UTF-8?q?=E8=B5=B7=20(#389)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/lib/components/app-sidebar.svelte | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/app-sidebar.svelte b/web/src/lib/components/app-sidebar.svelte
index 0764261..6cfaefe 100644
--- a/web/src/lib/components/app-sidebar.svelte
+++ b/web/src/lib/components/app-sidebar.svelte
@@ -11,7 +11,10 @@
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
 	import type { ComponentProps } from 'svelte';
 
+	let sidebar = Sidebar.useSidebar();
+
 	let { ref = $bindable(null), ...restProps }: ComponentProps<typeof Sidebar.Root> = $props();
+
 	const data = {
 		header: {
 			title: 'Bili Sync',
@@ -79,6 +82,12 @@
 			}
 		]
 	};
+
+	const closeMobileSidebar = () => {
+		if (sidebar.isMobile) {
+			sidebar.setOpenMobile(false);
+		}
+	};
 </script>
 
 <Sidebar.Root bind:ref variant="inset" {...restProps}>
@@ -87,7 +96,7 @@
 			<Sidebar.MenuItem>
 				<Sidebar.MenuButton size="lg">
 					{#snippet child({ props })}
-						<a href={data.header.href} {...props}>
+						<a href={data.header.href} {...props} onclick={closeMobileSidebar}>
 							<div
 								class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
 							>
@@ -112,7 +121,7 @@
 						<Sidebar.MenuItem>
 							<Sidebar.MenuButton class="h-8">
 								{#snippet child({ props })}
-									<a href={item.href} {...props}>
+									<a href={item.href} {...props} onclick={closeMobileSidebar}>
 										<item.icon class="size-4" />
 										<span class="text-sm">{item.title}</span>
 									</a>
@@ -131,7 +140,7 @@
 				<Sidebar.MenuItem>
 					<Sidebar.MenuButton class="h-8">
 						{#snippet child({ props })}
-							<a href={item.href} {...props}>
+							<a href={item.href} {...props} onclick={closeMobileSidebar}>
 								<item.icon class="size-4" />
 								<span class="text-sm">{item.title}</span>
 							</a>