fix sidebar responsive & design dark mode turns

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
-                fixed h-screen w-full z-50 top-[80px] transition-all duration-500
-                ${open ? "right-0" : "-right-full"}
-            `}
+        flex bg-[#FAFAFA] flex-col justify-start items-start dark:bg-[#222433]
+        fixed h-screen w-full z-50 top-[60px] pt-[20px] transition-all duration-500
+        ${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>
       ))}