From e7cd5287f1ee0aa42a5a2fb034e74cd028ea85cd Mon Sep 17 00:00:00 2001
From: Henry Li <henry1943@163.com>
Date: Sat, 7 Feb 2026 11:10:24 +0800
Subject: [PATCH] feat: enhance workspace navigation menu with conditional
 rendering and mounted state

---
 .../workspace/workspace-nav-menu.tsx          | 180 ++++++++++--------
 1 file changed, 101 insertions(+), 79 deletions(-)

diff --git a/frontend/src/components/workspace/workspace-nav-menu.tsx b/frontend/src/components/workspace/workspace-nav-menu.tsx
index 9ba9507..8b99be0 100644
--- a/frontend/src/components/workspace/workspace-nav-menu.tsx
+++ b/frontend/src/components/workspace/workspace-nav-menu.tsx
@@ -9,7 +9,7 @@ import {
   Settings2Icon,
   SettingsIcon,
 } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import {
   DropdownMenu,
@@ -30,13 +30,39 @@ import { useI18n } from "@/core/i18n/hooks";
 import { GithubIcon } from "./github-icon";
 import { SettingsDialog } from "./settings";
 
+function NavMenuButtonContent({
+  isSidebarOpen,
+  t,
+}: {
+  isSidebarOpen: boolean;
+  t: ReturnType<typeof useI18n>["t"];
+}) {
+  return isSidebarOpen ? (
+    <div className="text-muted-foreground flex w-full items-center gap-2 text-left text-sm">
+      <SettingsIcon className="size-4" />
+      <span>{t.workspace.settingsAndMore}</span>
+      <ChevronsUpDown className="text-muted-foreground ml-auto size-4" />
+    </div>
+  ) : (
+    <div className="flex size-full items-center justify-center">
+      <SettingsIcon className="text-muted-foreground size-4" />
+    </div>
+  );
+}
+
 export function WorkspaceNavMenu() {
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [settingsDefaultSection, setSettingsDefaultSection] = useState<
     "appearance" | "memory" | "tools" | "skills" | "notification" | "about"
   >("appearance");
+  const [mounted, setMounted] = useState(false);
   const { open: isSidebarOpen } = useSidebar();
   const { t } = useI18n();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   return (
     <>
       <SettingsDialog
@@ -46,91 +72,87 @@ export function WorkspaceNavMenu() {
       />
       <SidebarMenu className="w-full">
         <SidebarMenuItem>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <SidebarMenuButton
-                size="lg"
-                className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          {mounted ? (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuButton
+                  size="lg"
+                  className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                >
+                  <NavMenuButtonContent isSidebarOpen={isSidebarOpen} t={t} />
+                </SidebarMenuButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+                align="end"
+                sideOffset={4}
               >
-                {isSidebarOpen ? (
-                  <div className="text-muted-foreground flex w-full items-center gap-2 text-left text-sm">
-                    <SettingsIcon className="size-4" />
-                    <span>{t.workspace.settingsAndMore}</span>
-                    <ChevronsUpDown className="text-muted-foreground ml-auto size-4" />
-                  </div>
-                ) : (
-                  <div className="flex size-full items-center justify-center">
-                    <SettingsIcon className="text-muted-foreground size-4" />
-                  </div>
-                )}
-              </SidebarMenuButton>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-              className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
-              align="end"
-              sideOffset={4}
-            >
-              <DropdownMenuGroup>
+                <DropdownMenuGroup>
+                  <DropdownMenuItem
+                    onClick={() => {
+                      setSettingsDefaultSection("appearance");
+                      setSettingsOpen(true);
+                    }}
+                  >
+                    <Settings2Icon />
+                    {t.common.settings}
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <a
+                    href="https://deerflow.tech/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <DropdownMenuItem>
+                      <GlobeIcon />
+                      {t.workspace.officialWebsite}
+                    </DropdownMenuItem>
+                  </a>
+                  <a
+                    href="https://github.com/bytedance/deer-flow"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <DropdownMenuItem>
+                      <GithubIcon />
+                      {t.workspace.visitGithub}
+                    </DropdownMenuItem>
+                  </a>
+                  <DropdownMenuSeparator />
+                  <a
+                    href="https://github.com/bytedance/deer-flow/issues"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <DropdownMenuItem>
+                      <BugIcon />
+                      {t.workspace.reportIssue}
+                    </DropdownMenuItem>
+                  </a>
+                  <a href="mailto:support@deerflow.tech">
+                    <DropdownMenuItem>
+                      <MailIcon />
+                      {t.workspace.contactUs}
+                    </DropdownMenuItem>
+                  </a>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
                 <DropdownMenuItem
                   onClick={() => {
-                    setSettingsDefaultSection("appearance");
+                    setSettingsDefaultSection("about");
                     setSettingsOpen(true);
                   }}
                 >
-                  <Settings2Icon />
-                  {t.common.settings}
+                  <InfoIcon />
+                  {t.workspace.about}
                 </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <a
-                  href="https://deerflow.tech/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <DropdownMenuItem>
-                    <GlobeIcon />
-                    {t.workspace.officialWebsite}
-                  </DropdownMenuItem>
-                </a>
-                <a
-                  href="https://github.com/bytedance/deer-flow"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <DropdownMenuItem>
-                    <GithubIcon />
-                    {t.workspace.visitGithub}
-                  </DropdownMenuItem>
-                </a>
-                <DropdownMenuSeparator />
-                <a
-                  href="https://github.com/bytedance/deer-flow/issues"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <DropdownMenuItem>
-                    <BugIcon />
-                    {t.workspace.reportIssue}
-                  </DropdownMenuItem>
-                </a>
-                <a href="mailto:support@deerflow.tech">
-                  <DropdownMenuItem>
-                    <MailIcon />
-                    {t.workspace.contactUs}
-                  </DropdownMenuItem>
-                </a>
-              </DropdownMenuGroup>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem
-                onClick={() => {
-                  setSettingsDefaultSection("about");
-                  setSettingsOpen(true);
-                }}
-              >
-                <InfoIcon />
-                {t.workspace.about}
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : (
+            <SidebarMenuButton size="lg" className="pointer-events-none">
+              <NavMenuButtonContent isSidebarOpen={isSidebarOpen} t={t} />
+            </SidebarMenuButton>
+          )}
         </SidebarMenuItem>
       </SidebarMenu>
     </>