fix sidebar state

src/Layout/Ui/Layout.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import NavBar from "./NavBar";
 import SideBar from "./SideBar";
 import ProtectedRouteProvider from "../../lib/ProtectedRouteProvider";
+import { useSideBarState } from "../../zustand/SideBarState";
 
 const Layout = ({
   children,
@@ -10,17 +11,18 @@ const Layout = ({
   children: React.ReactNode;
   className?: string;
 }) => {
-  const [isOpen, setIsOpen] = useState(true);
 
+  const {openSideBar, setOpenSideBar} = useSideBarState();
+  
   return (
     <ProtectedRouteProvider className="Layout">
       <main
-        className={`${className} ${isOpen ? "Layout_Body" : "Layout_Body side_bar_close"}`}
+        className={`${className} ${openSideBar ? "Layout_Body" : "Layout_Body side_bar_close"}`}
       >
-        <NavBar isOpen={isOpen} />
+        <NavBar isOpen={openSideBar} />
         <div className="Layout_Children">{children}</div>
       </main>
-      <SideBar isOpen={isOpen} setIsOpen={setIsOpen} />
+      <SideBar isOpen={openSideBar} setIsOpen={setOpenSideBar} />
     </ProtectedRouteProvider>
   );
 };

src/Layout/Ui/SideBar.tsx

@@ -28,7 +28,7 @@ const SideBar = ({
   const [t] = useTranslation();
 
   const toggleSidebar = () => {
-    setIsOpen((prev: boolean) => (prev === true ? false : true));
+    setIsOpen((prev: boolean) => !prev); 
   };
 
   return (

src/translate/ar.json

@@ -413,7 +413,9 @@
     "are_you_sure_about_sale":"هل أنت متأكد من عملية البيع ؟",
     "Coupon":"قسيمة",
     "financial_collection":"التحصيلات",
-    "show_collection":"حصيلة"
+    "show_collection":"حصيلة",
+    "city":"مدينة",
+    "financialCollection":"التحصيلات"
   },
   "education_class_actions": {
     "Student_Records": "سجلات الطلاب",

src/zustand/SideBarState.ts

@@ -0,0 +1,13 @@
+import { create } from "zustand";
+
+interface ModalState {
+  openSideBar: boolean; 
+  setOpenSideBar: (value: boolean | ((prevState: boolean) => boolean)) => void;
+}
+
+export const useSideBarState = create<ModalState>((set) => ({
+  openSideBar: true, 
+  setOpenSideBar: (value) => set((state) => ({
+    openSideBar: typeof value === 'function' ? value(state.openSideBar) : value,
+  })),
+}));