create hamburger menu and responsive header

src/components/layout/footer/FooterInfo.tsx

@@ -1,5 +1,6 @@
 import { appConstants } from '@/assets/constants';
 import images from '@/assets/images/images';
+import { Icon, IconName } from '@/components/uikit/icons';
 import { t } from '@/locales/translates';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -31,12 +32,7 @@ export default function FooterInfo({
             key={social.title}
             className="text-white lg:flex-1"
           >
-            {/* <Image
-              alt={social.title}
-              src={images[social.title]}
-              className="h-6 w-6 object-contain"
-            /> */}
-            {social.title}
+            <Icon name={social.icon as IconName} className="text-primary" />
           </Link>
         ))}
       </div>

src/components/layout/hamburgerMenu/index.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import Link from 'next/link';
+import Image from 'next/image';
+import images from '@/assets/images/images';
+import { usePathname } from 'next/navigation';
+import { Icon } from '@/components/uikit/icons';
+import { t } from '@/locales/translates';
+import { useEffect, useRef } from 'react';
+import FooterInfo from '../footer/FooterInfo';
+import routeFactory from '@/assets/constants/routeFactory';
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const links = [routeFactory.home, routeFactory.about, routeFactory.contact];
+
+export default function HamburgerMenu({ isOpen, onClose }: Props) {
+  const pathname = usePathname();
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        onClose();
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      document.getElementsByTagName('main')[0].style.overflow = 'hidden';
+    } else {
+      document.getElementsByTagName('main')[0].style.overflow = 'auto';
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+  return (
+    <div className="fixed inset-x-0 top-0 z-50 flex h-screen">
+      <div className="absolute inset-0 bg-black/60" />
+
+      <div
+        ref={menuRef}
+        className="relative z-10 flex h-full w-80 max-w-full flex-col bg-black p-5 text-white"
+      >
+        <div className="mb-14 flex items-center justify-between">
+          <Link href="/" className="h-12 w-auto">
+            <Image
+              alt="logo"
+              src={images.logo}
+              className="h-full w-auto object-contain"
+            />
+          </Link>
+          <button onClick={onClose}>
+            <Icon name="close" className="h-6 w-6 text-white" />
+          </button>
+        </div>
+
+        <nav className="flex flex-col gap-6">
+          {links.map(({ route: link, title }) => {
+            const isActive = pathname === link();
+            return (
+              <Link
+                key={link()}
+                href={link()}
+                onClick={onClose}
+                className={`rounded-lg px-4 py-3 text-center text-sm font-medium ${
+                  isActive
+                    ? 'bg-primary text-white'
+                    : 'border border-white/10 text-white hover:bg-white/10'
+                }`}
+              >
+                {title as string}
+              </Link>
+            );
+          })}
+        </nav>
+
+        <div className="mt-auto flex flex-col items-center pt-10 text-xs text-gray-400">
+          <FooterInfo className="text-center" />
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/layout/header/index.tsx

@@ -1,47 +1,53 @@
 import images from '@/assets/images/images';
 import Navbar from '../navbar';
-import Button from '@/components/uikit/button';
+import Button, { IconButton } from '@/components/uikit/button';
 import { t } from '@/locales/translates';
+import { Icon } from '@/components/uikit/icons';
 
 export default function Header() {
+  const bannerFooter = [
+    t('com_home_Banner_link1') as string,
+    t('com_home_Banner_link2') as string,
+    t('com_home_Banner_link3') as string,
+  ];
   return (
     <header
-      className=" bg-cover text-white h-screen relative bg-no-repeat bg-right w-full"
+      className="relative w-full bg-cover bg-right bg-no-repeat text-white md:h-screen"
       style={{ backgroundImage: `url(${images.homeBanner.src})` }}
     >
-      <div className="absolute inset-0 bg-black opacity-50 z-0 blur-[100px]" />
+      <div className="absolute inset-0 z-0 bg-black opacity-50 blur-[100px]" />
       <Navbar />
-      <div className="container mx-auto bg-cover bg-center text-white flex justify-between items-center flex-col relative z-10 h-[80%] py-20">
-        <div className=" w-full flex flex-col justify-start ">
-          <h1 className="text-7xl md:text-6xl font-light">
+      <div className="relative z-10 container mx-auto flex h-[80%] flex-col items-center bg-cover bg-center pb-6 text-white md:justify-between md:py-20">
+        <div className="flex w-full flex-col justify-start">
+          <h1 className="text-xl font-light md:text-5xl lg:text-7xl">
             {t('com_home_banner_title') as string}
           </h1>
-          <h1 className="text-7xl md:text-6xl font-bold">
+          <h1 className="text-xl font-bold md:text-5xl lg:text-7xl">
             {t('com_home_banner_title_bold') as string}
           </h1>
           <p
-            className="mb-8 mt-5 text-base font-normal"
+            className="mt-2 mb-8 text-xs font-normal md:mt-5 md:text-sm lg:text-base"
             dangerouslySetInnerHTML={{
               __html: t('com_home_banner_description') as string,
             }}
           />
           <div>
-            <Button variant="solid" endIcon={'x'}>
+            <Button endIcon={'x'}>
               {t('com_home_banner_button') as string}
             </Button>
           </div>
         </div>
 
-        <div className="w-full flex justify-center gap-8 text-sm border-t-[1px] border-white/10 pt-12 ">
-          <a href="#" className="hover:underline">
-            {t('com_home_Banner_link1') as string}
-          </a>
-          <a href="#" className="hover:underline">
-            {t('com_home_Banner_link2') as string}
-          </a>
-          <a href="#" className="hover:underline">
-            {t('com_home_Banner_link3') as string}
-          </a>
+        <div className="text-nase flex w-full flex-col justify-center gap-8 border-t-0 border-white/10 pt-6 md:flex-row md:border-t-[1px] md:pt-12">
+          {bannerFooter.map((item, index) => (
+            <div
+              key={index}
+              className="flex items-center gap-2 hover:underline"
+            >
+              <Icon name="achievement" className="text-primary" />
+              {item}
+            </div>
+          ))}
         </div>
       </div>
     </header>

src/components/layout/navbar/index.tsx

@@ -1,11 +1,99 @@
+// 'use client';
+
+// import images from '@/assets/images/images';
+// import { Icon } from '@/components/uikit/icons';
+// import { t } from '@/locales/translates';
+// import Image from 'next/image';
+// import Link from 'next/link';
+// import { usePathname } from 'next/navigation';
+// import { useState } from 'react';
+
+// export default function Navbar() {
+//   const [open, setOpen] = useState(false);
+//   const pathname = usePathname();
+
+//   const links = [
+//     { href: '/', label: t('pages_home_title') as string },
+//     { href: '/about', label: t('pages_about_title') as string },
+//     { href: '/blog', label: t('pages_contact_title') as string },
+//     { href: '/contact', label: t('pages_contact_title') as string },
+//     { href: '/product', label: t('pages_product_title') as string },
+//     { href: '/project', label: t('pages_project_title') as string },
+//   ];
+
+//   const linkClass = (href: string) =>
+//     pathname === href ? ' text-red-500 font-semibold' : 'text-white';
+
+//   return (
+//     <nav className="relative z-10 container mx-auto shrink-0 bg-transparent pt-7 pb-3 md:py-11">
+//       <div className="flex items-center justify-between border-b-0 border-white/10 pb-6 md:border-b-[1px]">
+//         <Link href="/" className="h-12 w-auto">
+//           <Image
+//             alt="logo"
+//             src={images.logo}
+//             className="h-full w-auto object-contain"
+//           />
+//         </Link>
+//         <ul className="hidden space-x-6 text-sm md:flex lg:text-base">
+//           {links.map(({ href, label }) => (
+//             <li key={href}>
+//               <Link
+//                 href={href}
+//                 className={`${linkClass(href)} hover:text-primary-light`}
+//               >
+//                 {label}
+//               </Link>
+//             </li>
+//           ))}
+//           <li>
+//             <a className="flex items-center gap-2" href="tel:+098123456789">
+//               <Icon name="phone" className="text-primary" />
+//               <p>+098 123456789</p>
+//             </a>
+//           </li>
+//         </ul>
+
+//         <button
+//           className="text-gray-700 md:hidden"
+//           onClick={() => setOpen(!open)}
+//         >
+//           {open ? (
+//             <Icon name="close" className="text-white" />
+//           ) : (
+//             <Icon name="menu" className="text-white" />
+//           )}
+//         </button>
+//       </div>
+
+//       {open && (
+//         <ul className="mt-2 space-y-2 px-2 md:hidden">
+//           {links.map(({ href, label }) => (
+//             <li key={href}>
+//               <Link
+//                 href={href}
+//                 className={linkClass(href)}
+//                 onClick={() => setOpen(false)}
+//               >
+//                 {label}
+//               </Link>
+//             </li>
+//           ))}
+//         </ul>
+//       )}
+//     </nav>
+//   );
+// }
+
 'use client';
 
 import images from '@/assets/images/images';
-import { t } from '@/locales/translates';
+import { Icon } from '@/components/uikit/icons';
 import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useState } from 'react';
+import HamburgerMenu from '../hamburgerMenu';
+import { t } from '@/locales/translates';
 
 export default function Navbar() {
   const [open, setOpen] = useState(false);
@@ -19,58 +107,52 @@ export default function Navbar() {
     { href: '/product', label: t('pages_product_title') as string },
     { href: '/project', label: t('pages_project_title') as string },
   ];
-
   const linkClass = (href: string) =>
-    pathname === href ? ' text-red-500 font-semibold' : 'text-white';
+    pathname === href ? 'text-primary font-semibold' : 'text-white';
 
   return (
-    <nav className="bg-transparent container mx-auto py-11 shrink-0 relative z-10 ">
-      <div className=" flex items-center justify-between">
-        <Link href="/" className="text-xl font-bold w-auto h-12 ">
-          <Image alt="logo" src={images.logo} className="w-auto h-full object-contain" />
-        </Link>
-        <ul className="hidden md:flex space-x-6">
-          {links.map(({ href, label }) => (
-            <li key={href}>
-              <Link
-                href={href}
-                className={`${linkClass(href)} hover:text-primary-light `}
-              >
-                {label}
-              </Link>
-            </li>
-          ))}
-          <li>
-            <a className="flex gap-2 items-center" href="tel:+098123456789">
-              <span>xx</span>
-              <p>+098 123456789</p>
-            </a>
-          </li>
-        </ul>
+    <>
+      <nav className="relative z-50 container mx-auto bg-transparent pt-7 pb-3 md:py-11">
+        <div className="flex items-center justify-between border-b-0 border-white/10 pb-6 md:border-b">
+          <Link href="/" className="h-12 w-auto">
+            <Image
+              alt="logo"
+              src={images.logo}
+              className="h-full w-auto object-contain"
+            />
+          </Link>
 
-        <button
-          className="md:hidden text-gray-700"
-          onClick={() => setOpen(!open)}
-        >
-          {open ? <p>x</p> : <p>menu</p>}
-        </button>
-      </div>
-
-      {open && (
-        <ul className="md:hidden mt-2 space-y-2 px-2">
-          {links.map(({ href, label }) => (
-            <li key={href}>
-              <Link
-                href={href}
-                className={linkClass(href)}
-                onClick={() => setOpen(false)}
-              >
-                {label}
-              </Link>
+          <ul className="hidden space-x-6 text-sm md:flex lg:text-base">
+            {links.map(({ href, label }) => (
+              <li key={href}>
+                <Link
+                  href={href}
+                  className={`${linkClass(href)} hover:text-primary-light`}
+                >
+                  {label}
+                </Link>
+              </li>
+            ))}
+            <li>
+              <a className="flex items-center gap-2" href="tel:+098123456789">
+                <Icon name="phone" className="text-primary" />
+                <p>+098 123456789</p>
+              </a>
             </li>
-          ))}
-        </ul>
-      )}
-    </nav>
+          </ul>
+
+          {!open && (
+            <button
+              className="text-white md:hidden"
+              onClick={() => setOpen(true)}
+            >
+              <Icon name="menu" className="h-6 w-6" />
+            </button>
+          )}
+        </div>
+      </nav>
+
+      <HamburgerMenu isOpen={open} onClose={() => setOpen(false)} />
+    </>
   );
 }