added state for burger modal

src/components/layout/burger.tsx

@@ -11,19 +11,22 @@ import { Button } from "../ui/button";
 import { useTranslation } from "react-i18next";
 import { Navigation } from "@/locales/types/nav.type";
 import { Menu } from "../shared";
+import { useUiStore } from "@/store/ui";
 
 interface Props {
   className?: string;
 }
 
 export const Burger: FC<Props> = () => {
-  const [open, setOpen] = useState(false);
   const { t } = useTranslation("nav");
 
+  const sheet = useUiStore((state) => state.sheet);
+  const setSheet = useUiStore((state) => state.setSheet);
+
   const nav = t("navigation", { returnObjects: true }) as Navigation[];
 
   return (
-    <Sheet onOpenChange={() => setOpen(!open)} open={open}>
+    <Sheet onOpenChange={() => setSheet(!sheet)} open={sheet}>
       <SheetTrigger>
         <div className="flex flex-col gap-1 lg:hidden items-center justify-center size-10">
           <div className="w-[18px] h-0.5 bg-white rounded-[2px]" />
@@ -46,7 +49,7 @@ export const Burger: FC<Props> = () => {
             </Button>
           </Link>
 
-          <Link to="/B2B-B2G" onClick={() => setOpen(false)}>
+          <Link to="/B2B-B2G" onClick={() => setSheet(false)}>
             <Button className="text-base w-full" size={"sm"}>
               B2B | B2G встречи
             </Button>
@@ -62,6 +65,7 @@ export const Burger: FC<Props> = () => {
                 className="py-2"
                 key={item.title}
                 to={item.link || ""}
+                onClick={() => setSheet(false)}
               >
                 {item.title}
               </Link>

src/components/shared/menu.tsx

@@ -5,6 +5,7 @@ import { Link } from "react-router-dom";
 import { Modal } from "./modal";
 import { DropDownContent } from "@/locales/types/nav.type";
 import { cn } from "@/lib/utils";
+import { useUiStore } from "@/store/ui";
 
 interface Props {
   className?: string;
@@ -22,6 +23,7 @@ export const Menu: FC<Props> = ({
   triggerClassName,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const setSheet = useUiStore((state) => state.setSheet);
 
   return (
     <Popover open={isOpen} onOpenChange={() => setIsOpen(!isOpen)}>
@@ -37,7 +39,10 @@ export const Menu: FC<Props> = ({
           dropDownContent.map((item) =>
             item.link ? (
               <Link
-                onClick={() => setIsOpen(false)}
+                onClick={() => {
+                  setIsOpen(false);
+                  setSheet(false);
+                }}
                 className="h-14 px-3 flex gap-3 items-center hover:bg-slate-300/50 transition-all"
                 key={item.text}
                 target={item.blank ?? ""}
@@ -54,6 +59,7 @@ export const Menu: FC<Props> = ({
                 className="h-14 px-3 flex items-center hover:bg-slate-300/50 transition-all"
                 onClick={() => {
                   setIsOpen(false);
+                  setSheet(false);
                 }}
               >
                 {item.text}

src/store/ui.ts

@@ -0,0 +1,21 @@
+import { create } from "zustand";
+
+interface UiType {
+  sheet: boolean;
+  popover: boolean;
+  modal: boolean;
+
+  setModal: (modalStat: boolean) => void;
+  setSheet: (sheetState: boolean) => void;
+  setPopover: (popoverState: boolean) => void;
+}
+
+export const useUiStore = create<UiType>()((set) => ({
+  sheet: false,
+  popover: false,
+  modal: false,
+
+  setModal: (modalState) => set({ modal: modalState }),
+  setSheet: (state) => set({ sheet: state }),
+  setPopover: (popoverState) => set({ popover: popoverState }),
+}));