📱 feat(ui): auto-close sidebar on mobile after menu navigation
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.
This commit is contained in:
@@ -125,7 +125,8 @@ const PageLayout = () => {
|
||||
width: 'var(--sidebar-current-width)',
|
||||
}}
|
||||
>
|
||||
<SiderBar />
|
||||
{/* 在移动端点击菜单后关闭侧边栏 */}
|
||||
<SiderBar onNavigate={() => { if (isMobile) setDrawerOpen(false); }} />
|
||||
</Sider>
|
||||
)}
|
||||
<Layout
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user