feat(web): 移动端适配——顶栏防换行 + 抽屉式侧边栏

- TopBar: 标题区 min-w-0+truncate 防换行；移动端(sm 下)隐藏心情/WS文字tag、管理/主题按钮shrink-0；新增汉堡按钮(md:hidden)
- Nav: 抽共享 NavContent；桌面 Sidebar(dd:flex) 保持；移动端新增 MobileNav 抽屉(遮罩+弹簧滑入 md:hidden)
- App: 加 menuOpen state，渲染 MobileNav + TopBar 传 onMenu
- Icon: 新增 menu 图标；index.css: 加 mu-drawer-in 滑入动画
- npm run build 绿(77模块)；后端未动

frontend/web/src/App.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { TopBar } from "./components/TopBar";
-import { Sidebar } from "./components/Nav";
+import { Sidebar, MobileNav } from "./components/Nav";
 import { ModeRouter } from "./modes/ModeRouter";
 import { AdminApp } from "./admin/AdminApp";
 import { parseAdminHash } from "./admin/router";
@@ -13,6 +13,7 @@ export default function App(): React.ReactNode {
   // Apply the persisted (dark-first) theme and open the realtime channel only
   // when we hold a token — otherwise the gateway rejects the handshake with 401.
   const [route, setRoute] = useState(() => parseAdminHash(window.location.hash));
+  const [menuOpen, setMenuOpen] = useState(false);
   const setCurrentPersona = useAppStore((s) => s.setCurrentPersona);
 
   useEffect(() => {
@@ -67,13 +68,14 @@ export default function App(): React.ReactNode {
 
   return (
     <div className="flex h-full flex-col">
-      <TopBar />
+      <TopBar onMenu={() => setMenuOpen(true)} />
       <div className="flex min-h-0 flex-1">
         <Sidebar />
         <main className="relative min-h-0 flex-1 overflow-y-auto">
           <ModeRouter />
         </main>
       </div>
+      <MobileNav open={menuOpen} onClose={() => setMenuOpen(false)} />
     </div>
   );
 }