From 70d30c6cc6a181d5a5a85b88bd85c87f3b29cd24 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Mon, 3 Mar 2025 15:39:32 +0800
Subject: [PATCH] refactor(settings): integrate Zustand store for navigation
 state management

---
 src/components/settings-dialog.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/settings-dialog.tsx b/src/components/settings-dialog.tsx
index ac089ec..7658b37 100644
--- a/src/components/settings-dialog.tsx
+++ b/src/components/settings-dialog.tsx
@@ -41,6 +41,7 @@ import {
   SidebarProvider,
 } from "@/components/ui/sidebar";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { useSettingNavStore } from "@/store/useSettingNavStore";
 
 const data = {
   nav: [
@@ -65,6 +66,8 @@ interface SettingsDialogProps {
 }
 
 export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
+  const { activeNav, setActiveNav } = useSettingNavStore();
+
   return (
     <Dialog open={open} onOpenChange={onClose}>
       <DialogContent className="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
@@ -82,7 +85,8 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
                       <SidebarMenuItem key={item.name}>
                         <SidebarMenuButton
                           asChild
-                          isActive={item.name === "Messages & media"}
+                          isActive={item.name === activeNav}
+                          onClick={() => setActiveNav(item.name)}
                         >
                           <a href="#">
                             <item.icon />
@@ -106,7 +110,7 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
                     </BreadcrumbItem>
                     <BreadcrumbSeparator className="hidden md:block" />
                     <BreadcrumbItem>
-                      <BreadcrumbPage>Messages & media</BreadcrumbPage>
+                      <BreadcrumbPage>{activeNav}</BreadcrumbPage>
                     </BreadcrumbItem>
                   </BreadcrumbList>
                 </Breadcrumb>