From 747e02ee0d0444d5dde3db0175bb2c620e7c3a63 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Wed, 16 Jul 2025 03:52:40 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1=20feat(ui):=20auto-close=20sidebar?=
 =?UTF-8?q?=20on=20mobile=20after=20menu=20navigation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a smoother mobile experience by automatically closing the sidebar
drawer once a menu item is tapped.

### Details
* SiderBar
  * Introduce `onNavigate` prop and invoke it on every `<Link>` click.
  * Remove unused `useIsMobile` hook and related `isMobile` variable.
* PageLayout
  * Pass `onNavigate` callback to `SiderBar` that sets `drawerOpen` to
    `false` when on mobile, ensuring the sidebar collapses after
    navigation.

This eliminates the “isMobile declared but never used” warning and
aligns the behaviour of the sidebar with common mobile UX expectations.
---
 web/src/components/layout/PageLayout.js | 3 ++-
 web/src/components/layout/SiderBar.js   | 5 ++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/src/components/layout/PageLayout.js b/web/src/components/layout/PageLayout.js
index 5a6f61df..c52e0629 100644
--- a/web/src/components/layout/PageLayout.js
+++ b/web/src/components/layout/PageLayout.js
@@ -125,7 +125,8 @@ const PageLayout = () => {
               width: 'var(--sidebar-current-width)',
             }}
           >
-            <SiderBar />
+            {/* 在移动端点击菜单后关闭侧边栏 */}
+            <SiderBar onNavigate={() => { if (isMobile) setDrawerOpen(false); }} />
           </Sider>
         )}
         <Layout
diff --git a/web/src/components/layout/SiderBar.js b/web/src/components/layout/SiderBar.js
index f8c2e04d..a71c75d3 100644
--- a/web/src/components/layout/SiderBar.js
+++ b/web/src/components/layout/SiderBar.js
@@ -3,7 +3,6 @@ import { Link, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { getLucideIcon, sidebarIconColors } from '../../helpers/render.js';
 import { ChevronLeft } from 'lucide-react';
-import { useIsMobile } from '../../hooks/useIsMobile.js';
 import { useSidebarCollapsed } from '../../hooks/useSidebarCollapsed.js';
 import {
   isAdmin,
@@ -35,9 +34,8 @@ const routerMap = {
   personal: '/console/personal',
 };
 
-const SiderBar = () => {
+const SiderBar = ({ onNavigate = () => { } }) => {
   const { t } = useTranslation();
-  const isMobile = useIsMobile();
   const [collapsed, toggleCollapsed] = useSidebarCollapsed();
 
   const [selectedKeys, setSelectedKeys] = useState(['home']);
@@ -349,6 +347,7 @@ const SiderBar = () => {
             <Link
               style={{ textDecoration: 'none' }}
               to={to}
+              onClick={onNavigate}
             >
               {itemElement}
             </Link>