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]">