change element component & add menu head & responsive head home

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>
     )
 }