fix responsive design

components/layoutPanel/sidebar/index.js

@@ -3,8 +3,14 @@ import HeadMd from "./HeadMd";
 import HeadSm from "./HeadSm";
 import { Button } from "@mui/material";
 import LogoutOrangeP from "@/components/icons/LogoutOrangeP";
+import ModalLogout from "@/components/layout/sidebar/ModalLogout";
+import { useState } from "react";
 
 function Sidebar({ active, setActive, open, setOpen }) {
+  const [modal, setModal] = useState(false);
+  const handleOpen = () => setModal(true);
+  const handleClose = () => setModal(false);
+
   return (
     <div
       className={`
@@ -43,11 +49,13 @@ function Sidebar({ active, setActive, open, setOpen }) {
           >
             <Button
               variant="text"
+              onClick={handleOpen}
               className="!flex !w-fit !items-center !justify-center !gap-[10px] !py-[8px] !px-[16px] !text-[#F17732] !text-[16px] !font-medium"
             >
               <LogoutOrangeP />
               خروج از حساب
             </Button>
+            <ModalLogout open={modal} handleClose={handleClose} />
           </div>
         </div>
       </aside>