115 lines
3.8 KiB
TypeScript
115 lines
3.8 KiB
TypeScript
import { useState } from 'react'
|
|
import { Link, useFetcher, useRouteLoaderData } from 'react-router'
|
|
|
|
import type { TCategoriesResponse } from '~/apis/common/get-categories'
|
|
import { CloseIcon } from '~/components/icons/close'
|
|
import { MenuIcon } from '~/components/icons/menu'
|
|
import { Button } from '~/components/ui/button'
|
|
import { useNewsContext } from '~/contexts/news'
|
|
import { HeaderSearch } from '~/layouts/news/header-search'
|
|
import type { loader } from '~/routes/_news'
|
|
|
|
type THeaderMenuMobile = {
|
|
menu?: TCategoriesResponse['data']
|
|
}
|
|
|
|
export default function HeaderMenuMobile(properties: THeaderMenuMobile) {
|
|
const { menu } = properties
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
|
const { setIsLoginOpen } = useNewsContext()
|
|
const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
|
|
const { userData } = loaderData || {}
|
|
const fetcher = useFetcher()
|
|
|
|
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.id}
|
|
to={`/category/${item.code}`}
|
|
className={
|
|
'flex h-full items-center justify-center border-white px-[35px] sm:border-r'
|
|
}
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
|
|
{userData ? (
|
|
<fetcher.Form
|
|
method="POST"
|
|
action="/actions/logout"
|
|
>
|
|
<Button
|
|
variant="newsSecondary"
|
|
className="w-full px-[35px] py-3 text-center sm:hidden"
|
|
type="submit"
|
|
>
|
|
Logout
|
|
</Button>
|
|
</fetcher.Form>
|
|
) : (
|
|
<Button
|
|
variant="newsSecondary"
|
|
className="w-full px-[35px] py-3 text-center sm:hidden"
|
|
onClick={() => {
|
|
setIsMenuOpen(false)
|
|
setIsLoginOpen(true)
|
|
}}
|
|
>
|
|
Masuk
|
|
</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>
|
|
</>
|
|
)
|
|
}
|