change element component & add menu head & responsive head home

components/home/FrequentSearches.js

@@ -3,19 +3,21 @@ import { Button } from "@mui/material"
 
 function FrequentSearches() {
     return (
-        <div className="flex mt-3 items-center justify-center gap-4">
-            <p className="text-[#3B3B3B] text-[16px] font-normal">جستجوهای پر تکرار:</p>
-            <ul className="flex items-center justify-center gap-[14px]">
-                {frequentSearches.map((item, idx) => (
-                    <li key={idx}>
-                        <Button
-                            variant="contained"
-                            color="secondary"
-                            className="!py-2 !px-4 !rounded-[4px] !shadow-none !text-[14px] !font-normal !border !border-solid !border-[#D7D7D7]"
-                        >{item}</Button>
-                    </li>
-                ))}
-            </ul>
+        <div className="flex mt-3 items-center justify-start lg:justify-center gap-4 w-full lg:w-fit">
+            <p className="text-[#3B3B3B] text-[16px] font-normal text-nowrap">جستجوهای پر تکرار:</p>
+            <div className="overflow-auto hidden-scroll">
+                <ul className="flex items-center justify-start gap-[14px]">
+                    {frequentSearches.map((item, idx) => (
+                        <li key={idx}>
+                            <Button
+                                variant="contained"
+                                color="secondary"
+                                className="!py-2 !px-4 !rounded-[4px] !shadow-none !text-[14px] !font-normal !border !border-solid !border-[#D7D7D7]"
+                            >{item}</Button>
+                        </li>
+                    ))}
+                </ul>
+            </div>
         </div>
     )
 }

components/home/search/index.js

@@ -1,25 +1,31 @@
 import Search from "@/components/icons/Search";
-import Location from "@/components/icons/Location";
 import { Button, ButtonGroup, TextField } from "@mui/material";
-import ArrowBottomH from "@/components/icons/ArrowBottomH";
 import ModalSearchCity from "./modal";
+import SearchD from "@/components/icons/SearchD";
 
 function SearchBar() {
     return (
         <ButtonGroup
             variant="contained"
-            className="!py-3 !pl-4 !gap-3 !bg-[#FAFAFA] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]"
+            className="
+            !py-[4px] sm:!py-[7px] md:!py-[10px] lg:!py-[12px] !gap-3
+            !px-[4px] sm:!px-[8px] md:!px-[12px] lg:!px-[16px]   
+            !bg-[#FAFAFA] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full lg:w-fit
+            "
         >
             <ModalSearchCity />
-            <span className="black w-px h-12 bg-[#EFEFEF]"></span>
+            <span className="black w-px bg-[#EFEFEF]"></span>
             <TextField
                 variant="standard"
                 InputProps={{
                     disableUnderline: true
                 }}
                 sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
                     '& .MuiInput-root': {
-                        padding: '9px 0',
+                        padding: '0',
                         borderBottom: 'none',
                     },
                     '& .MuiInputBase-input': {
@@ -28,14 +34,17 @@ function SearchBar() {
                 }}
                 placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
                 dir='rtl'
-                className={`!shadow-none !w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
+                className={`!shadow-none !w-full lg:!w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !rounded-0 !font-normal !text-[#6C757D]`}
             />
-            <Button className="!rounded-[4px] !gap-2.5">
+            <Button className="!hidden lg:!flex !rounded-[4px] !gap-2.5 !min-w-[114px]">
                 <div className="min-w-[20px] min-h-[20px]">
                     <Search />
                 </div>
                 <p>جستجو</p>
             </Button>
+            <Button className="!flex lg:!hidden !rounded-[4px] !gap-2.5 !p-2.5 !w-[40px] !h-[40px]">
+                <SearchD />
+            </Button>
         </ButtonGroup>
     )
 }

components/home/search/modal/index.js

@@ -28,10 +28,10 @@ function ModalSearchCity() {
     const handleClose = () => setOpen(false);
 
     return (
-        <div>
+        <>
             {/* Button Modal */}
             <Button
-                className="!border-none hover:!bg-transparent"
+                className="!border-none hover:!bg-transparent !min-w-[155px] !py-0 lg:!py-[9px]"
                 onClick={handleOpen}
                 variant="contained"
                 color="secondary"
@@ -80,7 +80,7 @@ function ModalSearchCity() {
                     </div>
                 </Box>
             </Modal>
-        </div>
+        </>
     )
 }