responsive page home and list

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">
-                    {footerR.map((item, idx) => (
-                        <li
-                            key={idx}
-                            className={`
-                            relative w-full 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>
-                <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>
+                <div className="w-full">
+                    <HeadMenu title={footerR[0]} isOpen={openMenu.right} name='right' changeMenu={changeMenu} />
+                    <ListMenu list={footerR} isOpen={openMenu.right} />
+                </div>
+                <div className="w-full">
+                    <HeadMenu title={footerL[0]} isOpen={openMenu.left} name='left' changeMenu={changeMenu} />
+                    <ListMenu list={footerL} isOpen={openMenu.left} />
+                </div>
 
                 {/* 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