fix: 移动端点击侧边栏菜单项后自动收起抽屉
This commit is contained in:
1 parent
cef39e96c0
commit
8dd5283892
1 file changed
+6
-1
@@ -19,6 +19,11 @@ export function AppShell() {
|
|||||||
const libraryItems = [[History, locale.history, '/history']];
|
const libraryItems = [[History, locale.history, '/history']];
|
||||||
const aboutItems = [[Info, locale.about, '/about']];
|
const aboutItems = [[Info, locale.about, '/about']];
|
||||||
const immersive = location.pathname === '/shorts';
|
const immersive = location.pathname === '/shorts';
|
||||||
|
// 移动端为抽屉式侧边栏,点击任一菜单项后必须收起
|
||||||
|
const closeSidebarOnNavigate = (event) => {
|
||||||
|
if (!event.target.closest?.('a')) return;
|
||||||
|
if (window.matchMedia('(max-width: 760px)').matches) setSidebarOpen(false);
|
||||||
|
};
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!createOpen) return undefined;
|
if (!createOpen) return undefined;
|
||||||
const closeMenu = (event) => {
|
const closeMenu = (event) => {
|
||||||
@@ -84,7 +89,7 @@ export function AppShell() {
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<aside className={`sidebar ${sidebarOpen ? 'open' : 'closed'}`}>
|
<aside className={`sidebar ${sidebarOpen ? 'open' : 'closed'}`} onClick={closeSidebarOnNavigate}>
|
||||||
<nav className="sidebar-group">
|
<nav className="sidebar-group">
|
||||||
{primaryItems.map(([Icon, label, to]) => (
|
{primaryItems.map(([Icon, label, to]) => (
|
||||||
<NavLink to={to} className={() => navClass(to)} key={to}>
|
<NavLink to={to} className={() => navClass(to)} key={to}>
|
||||||
|
|||||||
Reference in new issue
Block a user