From 638dae0c9119bb997362ab0fb1af9dbccf695de0 Mon Sep 17 00:00:00 2001
From: truewhile <62226914+truewhile@users.noreply.github.com>
Date: Wed, 2 Sep 2026 11:35:44 +0800
Subject: [PATCH] fix(layout): hide duplicate media nav in mobile drawer (#11)

On narrow screens the media drawer duplicated bottom navigation and
user menu links (home, libraries, favourites, playlists, history).
Show only management links in the drawer when browsing media.

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: truewhile <truewhile@users.noreply.github.com>
---
 web/src/components/LayoutSidebarContent.tsx | 41 ++-------------------
 1 file changed, 4 insertions(+), 37 deletions(-)

diff --git a/web/src/components/LayoutSidebarContent.tsx b/web/src/components/LayoutSidebarContent.tsx
index 53c884b..c7da962 100644
--- a/web/src/components/LayoutSidebarContent.tsx
+++ b/web/src/components/LayoutSidebarContent.tsx
@@ -5,7 +5,6 @@ import clsx from 'clsx'
 
 import {
   LAYOUT_NAV_ITEMS,
-  MEDIA_NAV_ITEMS,
   type LayoutNavItem,
 } from './layoutNavigation'
 import { SidebarLink } from './LayoutSidebarNav'
@@ -30,7 +29,6 @@ export function LayoutSidebarContent({
   variant = 'admin',
 }: LayoutSidebarContentProps) {
   const sidebarExpanded = isSidebarOpen || isMobileDrawerOpen
-  const mediaItems = visibleSidebarItems({ isAdmin, can, items: MEDIA_NAV_ITEMS })
   const adminItems = visibleSidebarItems({ isAdmin, can, items: LAYOUT_NAV_ITEMS })
 
   return (
@@ -41,19 +39,10 @@ export function LayoutSidebarContent({
         onCloseMobileDrawer={onCloseMobileDrawer}
       />
       <div className="min-h-0 flex-1 overflow-y-auto scrollbar-hide">
-        {variant === 'media' ? (
-          <>
-            <LayoutSidebarNav items={mediaItems} sidebarExpanded={sidebarExpanded} />
-            {adminItems.length > 0 && (
-              <div className="border-t border-[var(--app-border)]">
-                <LayoutSidebarSectionLabel sidebarExpanded={sidebarExpanded} label="管理" />
-                <LayoutSidebarNav items={adminItems} sidebarExpanded={sidebarExpanded} compactTop />
-              </div>
-            )}
-          </>
-        ) : (
+        {/* 窄屏媒体浏览抽屉不展示 MEDIA_NAV_ITEMS：底部导航与用户菜单已覆盖 */}
+        {variant !== 'media' || adminItems.length > 0 ? (
           <LayoutSidebarNav items={adminItems} sidebarExpanded={sidebarExpanded} />
-        )}
+        ) : null}
       </div>
       <LayoutSidebarHomeBack sidebarExpanded={sidebarExpanded} />
     </div>
@@ -107,37 +96,15 @@ function LayoutSidebarHeader({
   )
 }
 
-function LayoutSidebarSectionLabel({
-  sidebarExpanded,
-  label,
-}: {
-  sidebarExpanded: boolean
-  label: string
-}) {
-  if (!sidebarExpanded) return null
-  return (
-    <p className="px-4 pt-4 pb-1 text-[10px] font-bold uppercase tracking-wider text-[var(--app-muted)]">
-      {label}
-    </p>
-  )
-}
-
 function LayoutSidebarNav({
   items,
   sidebarExpanded,
-  compactTop = false,
 }: {
   items: LayoutNavItem[]
   sidebarExpanded: boolean
-  compactTop?: boolean
 }) {
   return (
-    <nav
-      className={clsx(
-        'px-4 py-5 space-y-1',
-        compactTop && 'pt-2',
-      )}
-    >
+    <nav className="px-4 py-5 space-y-1">
       {items.map((item) => {
         const ItemIcon = item.icon
         return (