72 lines
2.5 KiB
TypeScript
72 lines
2.5 KiB
TypeScript
'use client'
|
|
|
|
import colors from "@/con/colors"
|
|
import stateNav from "@/state/state-nav"
|
|
import { ActionIcon, Button, Container, Flex, Image, Stack } from "@mantine/core"
|
|
import { useHover } from "@mantine/hooks"
|
|
import { useTransitionRouter } from 'next-view-transitions'
|
|
import { useSnapshot } from "valtio"
|
|
import { MenuItem } from "../../../../types/menu-item"
|
|
import { NavbarSearch } from "./NavBarSearch"
|
|
import { NavbarSubMenu } from "./NavbarSubMenu"
|
|
import { IconSearch } from "@tabler/icons-react"
|
|
|
|
export function NavbarMainMenu({ listNavbar }: {
|
|
listNavbar: MenuItem[]
|
|
}) {
|
|
const { item, isSearch } = useSnapshot(stateNav)
|
|
const router = useTransitionRouter()
|
|
return <Stack gap={0} visibleFrom="sm" bg={colors["white-trans-1"]}>
|
|
<Container pos={"relative"} w={{
|
|
base: '100%',
|
|
md: '80%',
|
|
}} fluid>
|
|
<Flex align={"center"} justify={"space-between"} wrap={{
|
|
base: "wrap",
|
|
md: "nowrap"
|
|
}}>
|
|
<ActionIcon radius={"100"} variant="transparent" onClick={() => {
|
|
router.push("/darmasaba")
|
|
stateNav.clear()
|
|
|
|
}} >
|
|
<Image radius={"100"} src={"/assets/images/darmasaba-icon.png"} alt="icon" w={24} h={24} loading="lazy" />
|
|
</ActionIcon>
|
|
{listNavbar.map((item, k) => {
|
|
return <MenuItemCom key={k} item={item} />
|
|
})}
|
|
<ActionIcon variant="transparent" c={isSearch ? 'grey' : colors["blue-button"]}
|
|
onClick={() => {
|
|
stateNav.item = null
|
|
stateNav.isSearch = !stateNav.isSearch
|
|
}}
|
|
>
|
|
{/* TODO: add icon search */}
|
|
<IconSearch size={"1.5rem"} />
|
|
</ActionIcon>
|
|
</Flex>
|
|
</Container>
|
|
{item && <NavbarSubMenu item={item as MenuItem[]} />}
|
|
{isSearch && <NavbarSearch />}
|
|
</Stack>
|
|
|
|
}
|
|
|
|
function MenuItemCom({ item, }: { item: MenuItem }) {
|
|
const { ref, hovered } = useHover()
|
|
const router = useTransitionRouter()
|
|
|
|
return <Button
|
|
ref={ref}
|
|
color={hovered ? "grey" : colors["blue-button"]}
|
|
onMouseEnter={() => {
|
|
stateNav.item = item.children || null
|
|
stateNav.isSearch = false
|
|
}}
|
|
variant="transparent"
|
|
onClick={() => {
|
|
router.push(item.href)
|
|
stateNav.clear()
|
|
}}
|
|
>{item.name}</Button>
|
|
} |