refactor(settings): integrate Zustand store for navigation state management

This commit is contained in:
cfngc4594 2025-03-03 15:39:32 +08:00
parent 30f12d0cd7
commit 70d30c6cc6

View File

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