add prettier formatter to all file

components/layoutPanel/sidebar/BgGray.js

@@ -1,13 +1,17 @@
 function BgGray({ isActive, setIsActive }) {
-    return (
-        <div
-            onClick={() => setIsActive(false)}
-            className={`
-                md:hidden ${isActive ? 'bg-[#232323] opacity-40 flex' : 'bg-transparent opacity-40 hidden'}
+  return (
+    <div
+      onClick={() => setIsActive(false)}
+      className={`
+                md:hidden ${
+                  isActive
+                    ? "bg-[#232323] opacity-40 flex"
+                    : "bg-transparent opacity-40 hidden"
+                }
                 absolute z-[25] cursor-pointer transition-all duration-500 left-0 top-0 w-screen h-screen
             `}
-        ></div>
-    )
+    ></div>
+  );
 }
 
-export default BgGray
+export default BgGray;

components/layoutPanel/sidebar/HeadMd.js

@@ -1,28 +1,32 @@
-import DoubleArrowLeftP from '@/components/icons/DoubleArrowLeftP'
-import LogoPanel from '@/components/icons/LogoPanel'
-import { Button } from '@mui/material'
-import Link from 'next/link'
-import React from 'react'
+import DoubleArrowLeftP from "@/components/icons/DoubleArrowLeftP";
+import LogoPanel from "@/components/icons/LogoPanel";
+import { Button } from "@mui/material";
+import Link from "next/link";
+import React from "react";
 
 function HeadMd({ open, setOpen }) {
-    return (
-        <div className={`hidden md:flex w-full items-center transition-all duration-500 justify-between`}>
-            <Link
-                href='/panel/dashboard'
-                className={`flex justify-center transition-all duration-500 ${open ? 'max-w-full' : 'max-w-0'}`}
-            >
-                <LogoPanel />
-            </Link>
-            <Button
-                onClick={() => setOpen(!open)}
-                className={`!p-1 !grid !place-items-center !rounded-full !border !border-solid !border-[#EFEFEF]
+  return (
+    <div
+      className={`hidden md:flex w-full items-center transition-all duration-500 justify-between`}
+    >
+      <Link
+        href="/panel/dashboard"
+        className={`flex justify-center transition-all duration-500 ${
+          open ? "max-w-full" : "max-w-0"
+        }`}
+      >
+        <LogoPanel />
+      </Link>
+      <Button
+        onClick={() => setOpen(!open)}
+        className={`!p-1 !grid !place-items-center !rounded-full !border !border-solid !border-[#EFEFEF]
                     !transition-all !duration-500 !bg-[#FFF] !w-[28px] !h-[28px] !z-[320] 
-                ${open ? '!rotate-180' : '!rotate-0 !ml-[7px]'}`}
-            >
-                <DoubleArrowLeftP />
-            </Button>
-        </div>
-    )
+                ${open ? "!rotate-180" : "!rotate-0 !ml-[7px]"}`}
+      >
+        <DoubleArrowLeftP />
+      </Button>
+    </div>
+  );
 }
 
-export default HeadMd
+export default HeadMd;

components/layoutPanel/sidebar/HeadSm.js

@@ -3,20 +3,20 @@ import ArrowRightP from "@/components/icons/ArrowRightP";
 import LogoPanelHead from "@/components/icons/LogoPanelHead";
 
 function HeadSm({ setActive }) {
-    return (
-        <div className="flex md:hidden items-center justify-start gap-[8px]">
-            <Button
-                variant="text"
-                className="!min-w-0 !p-1"
-                onClick={() => setActive(false)}
-            >
-                <ArrowRightP />
-            </Button>
-            <div className="w-[100px] h-[23px]">
-                <LogoPanelHead />
-            </div>
-        </div>
-    )
+  return (
+    <div className="flex md:hidden items-center justify-start gap-[8px]">
+      <Button
+        variant="text"
+        className="!min-w-0 !p-1"
+        onClick={() => setActive(false)}
+      >
+        <ArrowRightP />
+      </Button>
+      <div className="w-[100px] h-[23px]">
+        <LogoPanelHead />
+      </div>
+    </div>
+  );
 }
 
-export default HeadSm
+export default HeadSm;

components/layoutPanel/sidebar/Links.js

@@ -9,43 +9,60 @@ import ProfileAddP from "@/components/icons/ProfileAddP";
 import ProfileCircleP from "@/components/icons/ProfileCircleP";
 
 function Links({ open }) {
+  const list = [
+    { name: "دشبورد", src: "/panel/dashboard", icon: <CategoryP /> },
+    {
+      name: "حساب کاربری",
+      src: "/panel/user-account",
+      icon: <ProfileCircleP />,
+    },
+    {
+      name: "اضافه کردن پزشک",
+      src: "/panel/add-doctor",
+      icon: <ProfileAddP />,
+    },
+    { name: "نوبت ها", src: "/panel/turns", icon: <CalendarP /> },
+  ];
 
-    const list = [
-        { name: 'دشبورد', src: '/panel/dashboard', icon: <CategoryP /> },
-        { name: 'حساب کاربری', src: '/panel/user-account', icon: <ProfileCircleP /> },
-        { name: 'اضافه کردن پزشک', src: '/panel/add-doctor', icon: <ProfileAddP /> },
-        { name: 'نوبت ها', src: '/panel/turns', icon: <CalendarP /> }
-    ];
+  const pathname = usePathname();
 
-    const pathname = usePathname();
-
-    return (
-        <ul className={`flex flex-col gap-[32px] mt-[36px] md:mt-[54px] transition-all duration-500`}>
-            {list.map((item, idx) => (
-                <li key={idx}>
-                    <Link href={item.src}>
-                        <Button
-                            fullWidth
-                            variant="text"
-                            className={`
+  return (
+    <ul
+      className={`flex flex-col gap-[32px] mt-[36px] md:mt-[54px] transition-all duration-500`}
+    >
+      {list.map((item, idx) => (
+        <li key={idx}>
+          <Link href={item.src}>
+            <Button
+              fullWidth
+              variant="text"
+              className={`
                                 !p-[8px] !flex !items-center !justify-start !gap-[8px] !text-[16px] !rounded-[8px] !transition-all !duration-500
-                                ${item.src === pathname ? '!bg-[#5559CE]' : ''}
+                                ${item.src === pathname ? "!bg-[#5559CE]" : ""}
                             `}
-                        >
-                            <div className="p-[4px] bg-[#E5E9FF] rounded-[4px] w-fit">
-                                {item.icon}
-                            </div>
-                            <p className={`
+            >
+              <div className="p-[4px] bg-[#E5E9FF] rounded-[4px] w-fit">
+                {item.icon}
+              </div>
+              <p
+                className={`
                                 transition-all duration-500
-                                ${open ? 'opacity-100' : 'md:opacity-0'}
-                                ${item.src === pathname ? '!text-[#FAFAFA] !font-bold' : '!text-[#525252] !font-medium'}
-                            `}>{item.name}</p>
-                        </Button>
-                    </Link>
-                </li>
-            ))}
-        </ul>
-    )
+                                ${open ? "opacity-100" : "md:opacity-0"}
+                                ${
+                                  item.src === pathname
+                                    ? "!text-[#FAFAFA] !font-bold"
+                                    : "!text-[#525252] !font-medium"
+                                }
+                            `}
+              >
+                {item.name}
+              </p>
+            </Button>
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
 }
 
-export default Links
+export default Links;

components/layoutPanel/sidebar/index.js

@@ -37,8 +37,9 @@ function Sidebar({ active, setActive, open, setOpen }) {
             <Links open={open} />
           </div>
           <div
-            className={`w-full justify-center overflow-hidden transition-all duration-500 ${open ? "!max-w-full" : "!max-w-0"
-              }`}
+            className={`w-full justify-center overflow-hidden transition-all duration-500 ${
+              open ? "!max-w-full" : "!max-w-0"
+            }`}
           >
             <Button
               variant="text"