89 lines
3.5 KiB
TypeScript
89 lines
3.5 KiB
TypeScript
import { useState } from 'react'
|
|
import { Link } from 'react-router'
|
|
|
|
import { HeaderSearch } from '~/layouts/header-search'
|
|
|
|
import { MENU } from './menu'
|
|
|
|
export default function HeaderMenuMobile() {
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
|
|
|
const handleToggleMenu = (): void => {
|
|
setIsMenuOpen(!isMenuOpen)
|
|
}
|
|
return (
|
|
<>
|
|
<div className="relative z-50 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-50 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-2 right-4 z-[100] flex h-9 w-9 items-center justify-center lg:hidden"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-3.5 w-3.5 fill-white"
|
|
viewBox="0 0 320.591 320.591"
|
|
>
|
|
<path d="M30.391 318.583a30.37 30.37 0 0 1-21.56-7.288c-11.774-11.844-11.774-30.973 0-42.817L266.643 10.665c12.246-11.459 31.462-10.822 42.921 1.424 10.362 11.074 10.966 28.095 1.414 39.875L51.647 311.295a30.366 30.366 0 0 1-21.256 7.288z" />
|
|
<path d="M287.9 318.583a30.37 30.37 0 0 1-21.257-8.806L8.83 51.963C-2.078 39.225-.595 20.055 12.143 9.146c11.369-9.736 28.136-9.736 39.504 0l259.331 257.813c12.243 11.462 12.876 30.679 1.414 42.922-.456.487-.927.958-1.414 1.414a30.368 30.368 0 0 1-23.078 7.288z" />
|
|
</svg>
|
|
</button>
|
|
|
|
{/* List Menu */}
|
|
<ul className="mx-10 max-lg:space-y-3 lg:ml-14 lg:flex lg:gap-x-5">
|
|
{MENU.map((item) => (
|
|
<li 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">
|
|
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"
|
|
>
|
|
<svg
|
|
className="h-7 w-7"
|
|
fill="#fff"
|
|
viewBox="0 0 20 20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<div className="w-full py-3">
|
|
<HeaderSearch></HeaderSearch>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|