80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
"use client";
|
|
import colors from "@/con/colors";
|
|
import navbarListMenu from "@/con/navbar-list-menu";
|
|
import stateNav from "@/state/state-nav";
|
|
import { ActionIcon, Box, Burger, Group, Image, Stack, Text } from "@mantine/core";
|
|
import { IconSquareArrowRight } from "@tabler/icons-react";
|
|
import { motion } from 'framer-motion';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useSnapshot } from "valtio";
|
|
import { MenuItem } from "../../../../types/menu-item";
|
|
import { NavbarMainMenu } from "./NavbarMainMenu";
|
|
|
|
export function Navbar() {
|
|
const { item, isSearch, mobileOpen } = useSnapshot(stateNav);
|
|
const router = useRouter()
|
|
return (
|
|
<Box>
|
|
<Box
|
|
className="glass2"
|
|
w={"100%"}
|
|
pos={"fixed"}
|
|
top={0}
|
|
style={{
|
|
zIndex: 100,
|
|
overflow: "scroll"
|
|
}}
|
|
>
|
|
<NavbarMainMenu listNavbar={navbarListMenu} />
|
|
|
|
<Stack hiddenFrom="sm" bg={colors.grey[2]}>
|
|
<Group justify="space-between">
|
|
<ActionIcon variant="transparent" onClick={() => {
|
|
router.push("/darmasaba")
|
|
stateNav.mobileOpen = false
|
|
}}
|
|
size={80} radius={"xl"}
|
|
>
|
|
<Image src="/darmasaba-icon.png" alt="Logo Desa" width={50} height={50} />
|
|
</ActionIcon>
|
|
<Burger onClick={() => stateNav.mobileOpen = !stateNav.mobileOpen} color={colors["blue-button"]} opened={mobileOpen} />
|
|
</Group>
|
|
{mobileOpen && <motion.div
|
|
initial={{ x: 300 }}
|
|
animate={{ x: 0 }}
|
|
transition={{ duration: 0.1 }}
|
|
style={{
|
|
height: "100vh",
|
|
overflow: "scroll"
|
|
}}
|
|
>
|
|
<NavbarMobile listNavbar={navbarListMenu} />
|
|
</motion.div>}
|
|
</Stack>
|
|
|
|
</Box>
|
|
{(item || isSearch) && <Box className="glass" />}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
function NavbarMobile({ listNavbar }: { listNavbar: MenuItem[] }) {
|
|
const router = useRouter()
|
|
return <Stack p={"md"} style={{ backgroundColor: "rgba(255, 255, 255, 0.3)" }}>
|
|
{listNavbar.map((item, k) => {
|
|
return <Stack key={k}>
|
|
<Group justify="space-between" onClick={() => {
|
|
router.push(item.href)
|
|
stateNav.mobileOpen = false
|
|
}}>
|
|
<Text c="dark.9"
|
|
style={{ fontWeight: "bold" }}
|
|
>{item.name}</Text>
|
|
<IconSquareArrowRight />
|
|
</Group>
|
|
{item.children && <NavbarMobile listNavbar={item.children} />}
|
|
</Stack>
|
|
})}
|
|
</Stack>
|
|
}
|