diff --git a/stash-web/src/App.css b/stash-web/src/App.css
index 0e84f1d..7ef9a6c 100644
--- a/stash-web/src/App.css
+++ b/stash-web/src/App.css
@@ -1662,66 +1662,13 @@ html.theme-transition .site-background {
   }
 }
 
-/* ---------- 小屏分组导航抽屉 ---------- */
+/* ---------- 小屏分组导航（抽屉用组件库的 Drawer） ---------- */
 
 /* 桌面不显示菜单按钮（抽屉只能从小屏页头打开） */
 .header-nav-toggle {
   display: none;
 }
 
-.nav-drawer {
-  position: fixed;
-  inset: 0;
-  z-index: calc(var(--su-z-header) + 10);
-  display: flex;
-}
-
-.nav-drawer-backdrop {
-  position: absolute;
-  inset: 0;
-  border: none;
-  background: rgba(0, 0, 0, 0.45);
-  cursor: pointer;
-}
-
-.nav-drawer-panel {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: var(--su-space-3);
-  width: min(86vw, 340px);
-  height: 100%;
-  margin-right: auto;
-  padding: var(--su-space-4);
-  background-color: var(--su-bg-card);
-  box-shadow: var(--su-shadow-pop);
-  overflow-y: auto;
-  animation: nav-drawer-in 180ms var(--su-ease-out);
-}
-
-.nav-drawer-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--su-space-2);
-}
-
-@keyframes nav-drawer-in {
-  from {
-    transform: translateX(-100%);
-  }
-
-  to {
-    transform: none;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .nav-drawer-panel {
-    animation: none;
-  }
-}
-
 @media (max-width: 640px) {
   /* 手机页头才显示菜单按钮（必须写在上面的 display: none 之后） */
   .header-nav-toggle {
diff --git a/stash-web/src/AppNext.tsx b/stash-web/src/AppNext.tsx
index 28870a3..4b91261 100644
--- a/stash-web/src/AppNext.tsx
+++ b/stash-web/src/AppNext.tsx
@@ -1,16 +1,14 @@
 import {
   Breadcrumb,
   Card,
+  Drawer,
   Empty,
   EngineIcon,
-  Icon,
-  IconButton,
   Layout,
   Menu,
   Notice,
   SearchField,
   Space,
-  Title,
   Toaster,
   type EngineIconName,
   type MenuItem,
@@ -1042,29 +1040,15 @@ export default function AppNext() {
 
       <BackToTop visible={scrolled} targetId="page-scroll" />
 
-      {navOpen && (
-        <div className="nav-drawer">
-          <button
-            type="button"
-            className="nav-drawer-backdrop"
-            aria-label="关闭分组导航"
-            onClick={() => setNavOpen(false)}
-          />
-          <div className="nav-drawer-panel" role="dialog" aria-modal="true" aria-label="分组导航">
-            <div className="nav-drawer-head">
-              <Title level={4} as="h2" weight="semibold">
-                分组导航
-              </Title>
-              <IconButton
-                label="关闭分组导航"
-                icon={<Icon name="close_line" />}
-                onClick={() => setNavOpen(false)}
-              />
-            </div>
-            <Menu items={sidebarItems} activeKey={activeKey} itemHeight={44} onSelect={selectNav} />
-          </div>
-        </div>
-      )}
+      <Drawer
+        open={navOpen}
+        onClose={() => setNavOpen(false)}
+        title="分组导航"
+        placement="left"
+        width={300}
+      >
+        <Menu items={sidebarItems} activeKey={activeKey} itemHeight={44} onSelect={selectNav} />
+      </Drawer>
     </>
   )
 }