fix sidebar responsive & design dark mode turns

components/icons/ArrowRightP.js

@@ -10,6 +10,7 @@ function ArrowRightP() {
       <path
         d="M14.4301 5.92969L20.5001 11.9997L14.4301 18.0697"
         stroke="#3B3B3B"
+        className="dark:stroke-[#a1a1a1]"
         strokeWidth="1.5"
         strokeMiterlimit="10"
         strokeLinecap="round"
@@ -18,6 +19,7 @@ function ArrowRightP() {
       <path
         d="M3.5 12H20.33"
         stroke="#3B3B3B"
+        className="dark:stroke-[#a1a1a1]"
         strokeWidth="1.5"
         strokeMiterlimit="10"
         strokeLinecap="round"

components/icons/ArrowRightPH.js

@@ -10,6 +10,7 @@ function ArrowRightPH() {
       <path
         d="M14.4299 5.92969L20.4999 11.9997L14.4299 18.0697"
         stroke="#525252"
+        className="dark:stroke-[#a1a1a1]"
         strokeWidth="1.5"
         strokeMiterlimit="10"
         strokeLinecap="round"
@@ -18,6 +19,7 @@ function ArrowRightPH() {
       <path
         d="M3.5 12H20.33"
         stroke="#525252"
+        className="dark:stroke-[#a1a1a1]"
         strokeWidth="1.5"
         strokeMiterlimit="10"
         strokeLinecap="round"

components/layoutPanel/sidebar/Links.js

@@ -8,7 +8,7 @@ import CategoryP from "@/components/icons/CategoryP";
 import ProfileAddP from "@/components/icons/ProfileAddP";
 import ProfileCircleP from "@/components/icons/ProfileCircleP";
 
-function Links({ open }) {
+function Links({ open, setActive }) {
   const list = [
     { name: "دشبورد", src: "/panel/dashboard", icon: <CategoryP /> },
     {
@@ -36,6 +36,7 @@ function Links({ open }) {
             <Button
               fullWidth
               variant="text"
+              onClick={() => setActive(false)}
               className={`
                 !p-[8px] !flex !items-center !justify-start !gap-[8px] !text-[16px] !rounded-[8px] !transition-all !duration-500
                 ${

components/layoutPanel/sidebar/index.js

@@ -34,7 +34,7 @@ function Sidebar({ active, setActive, open, setOpen }) {
           <div className="w-full">
             <HeadMd open={open} setOpen={setOpen} />
             <HeadSm setActive={setActive} />
-            <Links open={open} />
+            <Links open={open} setActive={setActive} />
           </div>
           <div
             className={`w-full justify-center overflow-hidden transition-all duration-500 ${

components/panel/addDoctor/index.js

@@ -44,7 +44,9 @@ function AddDoctorPage() {
         className="!flex !p-1 md:!hidden !items-center !justify-start !gap-[8px]"
       >
         <ArrowRightPH />
-        <p className="text-[#525252] text-[14px] font-bold">{listTab[value]}</p>
+        <p className="text-[#525252] text-[14px] font-bold dark:text-[#a1a1a1]">
+          {listTab[value]}
+        </p>
       </Button>
       <div className="rounded-[8px] mt-0 md:mt-[24px] bg-transparent md:bg-[#FFF] md:dark:bg-[#222433] shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] dark:shadow-none pt-0 md:pt-[12px] pb-0 md:pb-[12px] lg:pb-[24px] px-0 md:px-[14px] lg:px-[26px] xl:px-[56px]">
         <ListMenu

components/panel/addDoctor/listMenu/Menu.js

@@ -5,10 +5,10 @@ function Menu({ value, open, setOpen, listTab, handleChange }) {
   return (
     <ul
       className={`
-                flex bg-[#FAFAFA] flex-col justify-start items-start
+        flex bg-[#FAFAFA] flex-col justify-start items-start dark:bg-[#222433]
-                fixed h-screen w-full z-50 top-[80px] transition-all duration-500
+        fixed h-screen w-full z-50 top-[60px] pt-[20px] transition-all duration-500
-                ${open ? "right-0" : "-right-full"}
+        ${open ? "right-0" : "-right-full"}
-            `}
+      `}
     >
       {listTab.map((item, idx) => (
         <li key={idx} className="w-[calc(100%-32px)] mx-[16px]">
@@ -34,7 +34,7 @@ function Menu({ value, open, setOpen, listTab, handleChange }) {
             <ArrowLeftPH active={value === idx} />
           </Button>
           {listTab.length > idx + 1 && (
-            <span className="my-[12px] block h-px w-full bg-[#EFEFEF]"></span>
+            <span className="my-[12px] block h-px w-full bg-[#EFEFEF] dark:bg-[#343645]"></span>
           )}
         </li>
       ))}

components/panel/turns/index.js

@@ -15,7 +15,7 @@ function TurnsPage({ data }) {
   }, []);
 
   return (
-    <div className="bg-transparent dark:shadow-[0px_4px_25px_10px_#1F1D2B] dark:bg-[#222433] md:bg-[#FFF] opacity-page rounded-[8px] shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] pt-0 md:pt-[12px] lg:pt-[24px] px-0 md:px-[24px] p-[24px]">
+    <div className="bg-transparent dark:shadow-[0px_4px_25px_10px_#1F1D2B] md:dark:bg-[#222433] md:bg-[#FFF] opacity-page rounded-[8px] shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] pt-0 md:pt-[12px] lg:pt-[24px] px-0 md:px-[24px] p-[24px]">
       <Head />
       <List data={data} loading={loading} />
     </div>