115 lines
3.4 KiB
TypeScript
115 lines
3.4 KiB
TypeScript
'use client'
|
|
|
|
import colors from "@/con/colors"
|
|
import stateNav from "@/state/state-nav"
|
|
import { ActionIcon, Button, Container, Flex, Image, Stack, Tooltip } from "@mantine/core"
|
|
import { useHover } from "@mantine/hooks"
|
|
import { IconSearch, IconUser } from "@tabler/icons-react"
|
|
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 { useRouter } from "next/navigation"
|
|
|
|
// contoh state auth (dummy aja dulu, bisa diganti sesuai sistem auth kamu)
|
|
const stateAuth = {
|
|
role: "admin", // coba ubah ke "user" buat test
|
|
}
|
|
|
|
export function NavbarMainMenu({ listNavbar }: { listNavbar: MenuItem[] }) {
|
|
const { item, isSearch } = useSnapshot(stateNav)
|
|
const router = useTransitionRouter()
|
|
const next = useRouter()
|
|
|
|
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" }}>
|
|
<Tooltip label="Go to Homepage" position="bottom" withArrow>
|
|
<ActionIcon
|
|
radius="xl"
|
|
variant="transparent"
|
|
onClick={() => {
|
|
router.push("/darmasaba")
|
|
stateNav.clear()
|
|
}}
|
|
>
|
|
<Image
|
|
radius="xl"
|
|
src="/assets/images/darmasaba-icon.png"
|
|
alt="Darmasaba Logo"
|
|
w={28}
|
|
h={28}
|
|
loading="lazy"
|
|
/>
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
|
|
{listNavbar.map((item, k) => (
|
|
<MenuItemCom key={k} item={item} />
|
|
))}
|
|
|
|
<Tooltip label="Search content" position="bottom" withArrow>
|
|
<ActionIcon
|
|
variant="transparent"
|
|
c={isSearch ? 'gray' : colors["blue-button"]}
|
|
onClick={() => {
|
|
stateNav.item = null
|
|
stateNav.isSearch = !stateNav.isSearch
|
|
}}
|
|
radius="xl"
|
|
>
|
|
<IconSearch size="1.5rem" />
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
|
|
{/* hanya tampil kalau role = admin */}
|
|
{stateAuth.role === "admin" && (
|
|
<Tooltip label="My Profile" position="bottom" withArrow>
|
|
<ActionIcon
|
|
onClick={() => {
|
|
next.push("/admin/landing-page/profile/program-inovasi")
|
|
}}
|
|
color={colors["blue-button"]}
|
|
radius="xl"
|
|
variant="light"
|
|
>
|
|
<IconUser size={22} />
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
)}
|
|
</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 ? "gray" : colors["blue-button"]}
|
|
onMouseEnter={() => {
|
|
stateNav.item = item.children || null
|
|
stateNav.isSearch = false
|
|
}}
|
|
variant="subtle"
|
|
radius="xl"
|
|
onClick={() => {
|
|
router.push(item.href)
|
|
stateNav.clear()
|
|
}}
|
|
fw={500}
|
|
>
|
|
{item.name}
|
|
</Button>
|
|
)
|
|
}
|