feat: enhance workspace navigation menu with conditional rendering and mounted state

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,29 +30,14 @@ import { useI18n } from "@/core/i18n/hooks";
 import { GithubIcon } from "./github-icon";
 import { SettingsDialog } from "./settings";
 
-export function WorkspaceNavMenu() {
+function NavMenuButtonContent({
-  const [settingsOpen, setSettingsOpen] = useState(false);
+  isSidebarOpen,
-  const [settingsDefaultSection, setSettingsDefaultSection] = useState<
+  t,
-    "appearance" | "memory" | "tools" | "skills" | "notification" | "about"
+}: {
-  >("appearance");
+  isSidebarOpen: boolean;
-  const { open: isSidebarOpen } = useSidebar();
+  t: ReturnType<typeof useI18n>["t"];
-  const { t } = useI18n();
+}) {
-  return (
+  return isSidebarOpen ? (
-    <>
-      <SettingsDialog
-        open={settingsOpen}
-        onOpenChange={setSettingsOpen}
-        defaultSection={settingsDefaultSection}
-      />
-      <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"
-              >
-                {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>
@@ -62,7 +47,39 @@ export function WorkspaceNavMenu() {
     <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
+        open={settingsOpen}
+        onOpenChange={setSettingsOpen}
+        defaultSection={settingsDefaultSection}
+      />
+      <SidebarMenu className="w-full">
+        <SidebarMenuItem>
+          {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
@@ -131,6 +148,11 @@ export function WorkspaceNavMenu() {
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
+          ) : (
+            <SidebarMenuButton size="lg" className="pointer-events-none">
+              <NavMenuButtonContent isSidebarOpen={isSidebarOpen} t={t} />
+            </SidebarMenuButton>
+          )}
         </SidebarMenuItem>
       </SidebarMenu>
     </>