responsive page home and list

app/component/element/AutoCompleteSelect.js

@@ -7,7 +7,7 @@ function AutoCompleteSelect({ list, updateData, label }) {
         <Autocomplete
             disablePortal
             options={list}
-            className="!rounded-lg !w-[344px]"
+            className="!w-full !rounded-lg md:!w-[344px]"
             onChange={(event) => updateData && updateData(event)}
             sx={{
                 ...styleTextSelectRight,

components/home/search/modal/index.js

@@ -31,7 +31,7 @@ function ModalSearchCity() {
         <>
             {/* Button Modal */}
             <Button
-                className="!border-none hover:!bg-transparent !py-[11.5px] !px-[7px] sm:!py-3 sm:!px-[9px] md:!px-[11px] lg:!px-[12px] min-w-fit !rounded-3"
+                className="!border-none hover:!bg-transparent !py-[11.5px] !min-w-fit !px-[7px] sm:!py-3 sm:!px-[9px] md:!px-[11px] lg:!px-[12px] !rounded-3"
                 onClick={handleOpen}
                 variant="contained"
                 color="secondary"
@@ -49,7 +49,7 @@ function ModalSearchCity() {
                 open={open}
                 onClose={handleClose}
             >
-                <Box sx={styleDefault}>
+                <Box sx={styleDefault} className="!w-full !h-full md:!w-fit md:!h-fit">
                     <div
                         className="flex justify-end w-full"
                     >
@@ -57,9 +57,9 @@ function ModalSearchCity() {
                             <CloseModalD />
                         </div>
                     </div>
-                    <div className="px-2">
+                    <div className="md:p-[24px] pt-0">
-                        <p className="text-[#525252] mt-4 text-[16px] font-medium text-center">شهر یا استان مورد نظر را انتخاب نمایید:</p>
+                        <p className="text-[#525252] mt-[38px] md:mt-4 text-[16px] font-medium text-center">شهر یا استان مورد نظر را انتخاب نمایید:</p>
-                        <div className="flex flex-col mt-8 mb-14 justify-center items-center gap-10">
+                        <div className="flex flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
                             <AutoCompleteSelect
                                 list={states}
                                 label='استان'
@@ -71,9 +71,10 @@ function ModalSearchCity() {
                         </div>
                         <div className="w-full flex justify-end">
                             <Button
+                                className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
+                                onClick={handleClose}
                                 variant="contained"
                                 color="primary"
-                                className="flex !px-3 items-center justify-center gap-1 mr-auto"
                             >
                                 تایید و ادامه
                                 <ArrowLeftM />

components/icons/ArrowDownF.js

@@ -0,0 +1,9 @@
+function ArrowDownF() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path d="M19.92 8.95001L13.4 15.47C12.63 16.24 11.37 16.24 10.6 15.47L4.07996 8.95001" stroke="#262866" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    )
+}
+
+export default ArrowDownF

components/layout/footer/index.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { footerL, footerR } from "@/constans";
 import Logo from "@/app/component/Logo";
 import Link from "next/link";
@@ -11,6 +13,9 @@ import LocationF from "../../icons/LocationF";
 import CalendarAddF from "../../icons/CalendarAddF";
 import StethoscopeF from "../../icons/StethoscopeF";
 import LogoNamad from "./LogoNamad";
+import HeadMenu from "./menu/HeadMenu";
+import ListMenu from "./menu/ListMenu";
+import { useState } from "react";
 
 const socialMedias = [
     <Linkedin />,
@@ -26,6 +31,14 @@ const head = [
 ]
 
 function Footer() {
+
+    const [openMenu, setOpenMenu] = useState({
+        right: false,
+        left: false
+    });
+
+    const changeMenu = name => setOpenMenu({ ...openMenu, [name]: !openMenu[name] });
+
     return (
         <div className="pb-[11px]">
             <div className="flex items-center justify-evenly gap-[12px]">
@@ -58,28 +71,14 @@ function Footer() {
                 </div>
 
                 {/* Center */}
-                <ul className="w-full lg:w-fit flex flex-col gap-3">
+                <div className="w-full">
-                    {footerR.map((item, idx) => (
+                    <HeadMenu title={footerR[0]} isOpen={openMenu.right} name='right' changeMenu={changeMenu} />
-                        <li
+                    <ListMenu list={footerR} isOpen={openMenu.right} />
-                            key={idx}
+                </div>
-                            className={`
+                <div className="w-full">
-                            relative w-full after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0
+                    <HeadMenu title={footerL[0]} isOpen={openMenu.left} name='left' changeMenu={changeMenu} />
-                            ${idx === 0 ? 'text-[#3B3B3B] after:hover:w-full after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5' : 'text-[#616161] border-transparent font-normal'} 
+                    <ListMenu list={footerL} isOpen={openMenu.left} />
-                            text-[16px] w-fit`}
+                </div>
-                        >{item}</li>
-                    ))}
-                </ul>
-                <ul className="w-full lg:w-fit flex flex-col gap-3">
-                    {footerL.map((item, idx) => (
-                        <li
-                            key={idx}
-                            className={`
-                            relative after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0
-                            ${idx === 0 ? 'text-[#3B3B3B] after:hover:w-full after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5' : 'text-[#616161] border-transparent font-normal'} 
-                            text-[16px] w-fit`}
-                        >{item}</li>
-                    ))}
-                </ul>
 
                 {/* Left */}
                 <div className="w-full lg:w-fit flex flex-row lg:flex-col items-center lg:items-start justify-center gap-[50px]">

components/layout/footer/menu/HeadMenu.js

@@ -0,0 +1,21 @@
+import ArrowDownF from "@/components/icons/ArrowDownF"
+import { Button } from "@mui/material"
+
+function HeadMenu({ title, name, isOpen, changeMenu }) {
+    return (
+        <Button
+            className="!flex !items-center !justify-between !w-full !py-[8px] !px-[4px] !border !border-solid !border-transparent !rounded-bl-none !rounded-br-none !border-b-[#E5E5E5]"
+            onClick={() => changeMenu(name)}
+        >
+            <p className="text-[#262866] text-[14px] font-medium">{title}</p>
+            <div className={`
+                transition-all duration-500
+                ${isOpen ? 'rotate-180' : 'rotate-0'}
+            `}>
+                <ArrowDownF />
+            </div>
+        </Button>
+    )
+}
+
+export default HeadMenu

components/layout/footer/menu/ListMenu.js

@@ -0,0 +1,25 @@
+import React from 'react'
+
+function ListMenu({ list, isOpen }) {
+  return (
+    <ul className={`
+      mt-3 lg:mt-0 w-full lg:w-fit flex flex-col overflow-hidden transition-all duration-500 gap-3
+      ${isOpen ? 'max-h-[150px]' : 'max-h-0'}
+    `}>
+      {list.map((item, idx) => (
+        <li
+          key={idx}
+          className={`
+            relative after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0
+            ${idx === 0 ?
+              'hidden lg:flex text-[#3B3B3B] after:hover:w-full after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5' :
+              'text-[#616161] border-transparent font-normal'} 
+            text-[16px] w-fit
+            `}
+        >{item}</li>
+      ))}
+    </ul>
+  )
+}
+
+export default ListMenu

components/layout/header/index.js

@@ -21,8 +21,8 @@ function Header({ name }) {
             className="bg-[#FAFAFA] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full mx-auto"
         >
             <div className={`
-                h-20 px-4 py-8 flex transition-all duration-500 overflow-hidden justify-between items-center flex-nowrap
+                px-[8px] sm:px-[16px] md:px-[24px] lg:px-[32px] py-[4px] sm:py-[8px] md:py-[12px] lg:py-[16px] flex transition-all duration-500 overflow-hidden justify-between items-center flex-nowrap
-                ${isActive ? '!pr-0' : '!p-4'}
+                ${isActive ? '!pr-0' : '!px-4'}
             `}>
                 <div className="">
                     <BgGray

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

@@ -4,11 +4,11 @@ function ButtonMenu({ isActive, setIsActive }) {
     return (
         <Button
             onClick={() => setIsActive(!isActive)}
-            className="!flex !p-0.5 !w-[24px] !h-[24px] !flex-col !justify-between !items-center"
+            className="!py-[6px] !px-[2px] !flex !p-0.5 !w-[24px] !h-[24px] !flex-col !justify-between !items-center"
         >
             <span
                 className={`min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] 
-                    ${isActive ? 'rotate-45 w-1/2 translate-x-[60%] translate-y-[6px]' : 'rotate-0 w-full'}
+                    ${isActive ? '-rotate-45 w-1/2 translate-x-[60%] translate-y-[8px]' : 'rotate-0 w-full'}
                 `}
             ></span>
             <span
@@ -18,7 +18,7 @@ function ButtonMenu({ isActive, setIsActive }) {
             ></span>
             <span
                 className={`min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] 
-                    ${isActive ? '-rotate-45 w-1/2 translate-x-[60%] translate-y-[-6px]' : 'rotate-0 w-full'}
+                    ${isActive ? 'rotate-45 w-1/2 translate-x-[60%] translate-y-[-8px]' : 'rotate-0 w-full'}
                 `}
             ></span>
         </Button>

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

@@ -18,7 +18,7 @@ function Col({ isActive, setIsActive, name }) {
             md:top-[-30px] lg:top-[-40px] w-[85%] z-10 h-screen bg-[#FAFAFA] transition-all duration-500
             ${isActive ? 'right-0' : '-right-[85%]'}
             `}>
-                <ul className="flex flex-col items-start justify-center gap-[30px] mt-[78px]">
+                <ul className="flex flex-col items-start justify-center gap-[30px] mt-[38px]">
                     {listNav.map(nav => (
                         <li
                             key={nav.id}
@@ -29,7 +29,8 @@ function Col({ isActive, setIsActive, name }) {
                                 className="w-full"
                             >
                                 <Button className={`
-                                ${isActiveURL(nav.link.replace('/', ''), name) ?
+                                    !h-10
+                                    ${isActiveURL(nav.link.replace('/', ''), name) ?
                                         '!text-[#526CAC] !bg-[rgba(199,_206,_244,_0.30)]' :
                                         '!text-[#525252]'
                                     }