add open/close to sidebar & responsive sidebar & head & page dashboard and user account

components/layoutPanel/sidebar/index.js

@@ -1,30 +1,53 @@
+import { useState } from "react";
+
+import Links from "./Links";
+import HeadMd from "./HeadMd";
+import HeadSm from "./HeadSm";
+import { Button } from "@mui/material";
 import LogoutOrangeP from "@/components/icons/LogoutOrangeP";
-import LogoPanel from "@/components/icons/LogoPanel";
-import { Button } from "@mui/material";
-import Links from "./Links";
-import Link from "next/link";
+
+function Sidebar({ active, setActive }) {
+
+  const [open, setOpen] = useState(false);
 
-function Sidebar() {
   return (
-    <aside className="min-w-[243px] h-full">
-      <div className="min-w-[243px] p-[24px] h-full flex flex-col justify-between items-start fixed top-0 right-0 border-0 border-l border-l-[#EFEFEF] bg-[#FFF]">
-        <div>
-          <Link href='/panel/dashboard' className="flex justify-center">
-            <LogoPanel />
-          </Link>
-          <Links />
+    <div className={`
+        transition-all duration-500 md:flex fixed md:relative z-30 w-[85%] md:w-fit
+        ${active ? ' right-0' : 'right-[-85%]'}
+        ${open ? 'min-w-[243px]' : 'min-w-[96px]'}
+    `}>
+      <aside className={`
+        relative h-screen overflow-hidden 
+        transition-all duration-500 w-[85%] md:w-fit
+        ${active ? ' right-0' : 'right-[-85%]'}
+        ${open ? 'w-[243px]' : 'w-[96px]'}
+      `}>
+        <div className={`
+           z-30
+          md:top-0 md:right-0 w-[85%] md:w-fit
+        ${active ? ' right-0' : 'right-[-85%]'}
+          overflow-hidden p-[24px] h-full flex flex-col justify-between items-start fixed 
+          border-0 border-l border-l-[#EFEFEF] bg-[#FFF]
+          transition-all duration-700
+          ${open ? 'md:w-[243px]' : 'md:w-[96px]'}
+        `}>
+          <div className="w-full">
+            <HeadMd open={open} setOpen={setOpen} />
+            <HeadSm setActive={setActive} />
+            <Links open={open} />
+          </div>
+          <div className={`w-full justify-center overflow-hidden transition-all duration-500 ${open ? '!max-w-full' : '!max-w-0'}`}>
+            <Button
+              variant="text"
+              className="!flex !w-fit !items-center !justify-center !gap-[10px] !py-[8px] !px-[16px] !text-[#F17732] !text-[16px] !font-medium"
+            >
+              <LogoutOrangeP />
+              خروج از حساب
+            </Button>
+          </div>
         </div>
-        <div className="w-full flex justify-center">
-          <Button
-            variant="text"
-            className="!flex !w-fit !items-center !justify-center !gap-[10px] !py-[8px] !px-[16px] !text-[#F17732] !text-[16px] !font-medium"
-          >
-            <LogoutOrangeP />
-            خروج از حساب
-          </Button>
-        </div>
-      </div>
-    </aside>
+      </aside>
+    </div>
   )
 }