deign sidebar

components/doctors/sortlist/SelectSort.js

@@ -3,18 +3,25 @@ import { useState } from "react";
 import ArrowBottomD from "../../icons/ArrowBottomD";
 import SortD from "../../icons/SortD";
 
-const listSort = ["براساس امتیاز 1", "براساس امتیاز 2", "براساس امتیاز 3"];
+const listSort = [
+  { label: "براساس امتیاز 1", id: 10 },
+  { label: "براساس امتیاز 2", id: 20 },
+  { label: "براساس امتیاز 3", id: 30 },
+];
 
 function SelectSort() {
-  const [age, setAge] = useState("");
+  const [sort, setSort] = useState("");
+  console.log(sort);
 
   const handleChange = (event) => {
-    setAge(event.target.value);
+    console.log(event);
+
+    setSort(event.target.name);
   };
 
   return (
     <Select
-      value={age}
+      defaultValue={sort}
       displayEmpty
       onChange={handleChange}
       className="!w-[193px] !max-w-[305px] lg:!w-full text-[14px] md:text-[16px] !bg-transparent lg:!bg-[#FFF] !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
@@ -43,14 +50,19 @@ function SelectSort() {
       }}
     >
       {listSort.map((item, idx) => (
-        <div key={idx} className="flex flex-col items-start w-full">
-          <MenuItem value={item} className="!p-2 !mr-2 !w-[calc(100%_-_16px)]">
-            {item}
-          </MenuItem>
-          {listSort.length > idx + 1 && (
+        <MenuItem
+          key={idx}
+          value={item.label}
+          name={item.label}
+          className="!flex !flex-col !items-start !w-full hover:!bg-transparent"
+        >
+          <div value={item.id} className="!p-2 !mr-2 !w-[calc(100%_-_16px)]">
+            {item.label}
+          </div>
+          {/* {listSort.length > idx + 1 && (
             <span className="block mr-2 w-[calc(100%_-_16px)] h-px bg-[#EFEFEF]"></span>
-          )}
-        </div>
+          )} */}
+        </MenuItem>
       ))}
     </Select>
   );

components/layout/header/list/col/BgGray.js

@@ -8,7 +8,8 @@ function BgGray({ isActive, setIsActive }) {
                     ? "bg-[#232323] opacity-40 flex"
                     : "bg-transparent opacity-40 hidden"
                 }
-                absolute z-[5] cursor-pointer transition-all duration-500 left-0 top-0 w-screen h-screen
+                absolute lg:hidden z-[5] cursor-pointer transition-all duration-500 left-0 w-screen h-[calc(100vh_+_40px)]
+                -top-[12px] sm:-top-[21px] md:-top-[30px] lg:-top-[40px]
                 `}
     ></div>
   );

components/layout/header/list/col/index.js

@@ -8,8 +8,8 @@ function Col({ isActive, setIsActive, name }) {
     <div className="flex lg:hidden">
       <div
         className={`
-            fixed pb-[31px] pt-[64px] pl-[24px]  padding-responsive top-[-12px] sm:top-[-21px] 
-            md:top-[-30px] lg:top-[-40px] w-[85%] z-10 h-screen bg-[#FAFAFA] transition-all duration-500
+            fixed pb-[31px] pt-[64px] pl-[24px]  padding-responsive top-0 
+            w-[85%] z-10 h-screen bg-[#FAFAFA] transition-all duration-500
             ${isActive ? "right-0" : "-right-[85%]"}
             `}
       >