feat: implement news layout components and context for improved structure and functionality

2025-02-22 17:34:25 +08:00
parent d9c36c5ff0
commit 77c9843267
11 changed files with 110 additions and 49 deletions
@@ -0,0 +1,89 @@
+import { useState } from 'react'
+import { Link } from 'react-router'
+
+import { CloseIcon } from '~/components/icons/close'
+import { MenuIcon } from '~/components/icons/menu'
+import { useNewsContext } from '~/contexts/news'
+import { HeaderSearch } from '~/layouts/news/header-search'
+
+import { MENU } from './menu'
+
+export default function HeaderMenuMobile() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const { setIsLoginOpen } = useNewsContext()
+
+  const handleToggleMenu = (): void => {
+    setIsMenuOpen(!isMenuOpen)
+  }
+  return (
+    <>
+      <div className="relative z-20 flex min-h-[65px] bg-[#2E2F7C] font-[sans-serif] tracking-wide text-white sm:hidden sm:px-10">
+        <div className="mx-auto flex w-full max-w-screen-xl flex-wrap items-center gap-4 align-middle">
+          {/* Menu */}
+          <div
+            className={`z-20 transition-transform duration-300 max-lg:fixed max-lg:top-0 max-lg:left-0 max-lg:h-full max-lg:w-full max-lg:overflow-auto max-lg:bg-[#2E2F7C] max-lg:p-6 max-lg:shadow-md ${
+              isMenuOpen ? 'translate-x-0' : '-translate-x-full'
+            }`}
+          >
+            {/* Tombol Close */}
+            <button
+              onClick={handleToggleMenu}
+              className="fixed top-5 right-5 z-20 flex h-9 w-9 items-center justify-center lg:hidden"
+            >
+              <CloseIcon
+                width={50}
+                height={50}
+              />
+            </button>
+
+            {/* List Menu */}
+            <ul className="mx-10 mt-10 max-lg:space-y-3 lg:ml-14 lg:flex lg:gap-x-5">
+              {MENU.map((item, index) => (
+                <li
+                  key={index}
+                  className="px-3 max-lg:border-b max-lg:py-3"
+                >
+                  <Link
+                    key={item.title}
+                    to={item.url}
+                    className={
+                      'flex h-full items-center justify-center border-white px-[35px] sm:border-r'
+                    }
+                  >
+                    {item.title}
+                  </Link>
+                </li>
+              ))}
+
+              <button
+                className="w-full bg-white px-[35px] py-3 text-center text-[#2E2F7C] sm:hidden"
+                onClick={() => {
+                  setIsLoginOpen(true)
+                  setIsMenuOpen(false)
+                }}
+              >
+                Akun
+              </button>
+            </ul>
+          </div>
+
+          {/* Search dan Toggle Button */}
+          <div className="align-center flex w-full justify-center">
+            <button
+              onClick={handleToggleMenu}
+              className="h-[63px] border border-white px-4 lg:hidden"
+            >
+              <MenuIcon
+                width={25}
+                height={25}
+              />
+            </button>
+            <div className="w-full py-3">
+              <HeaderSearch />
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}