create hamburger menu and responsive 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)} />
+    </>
   );
 }