111 lines
3.4 KiB
TypeScript
111 lines
3.4 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, Paper, ScrollArea, Stack, Text, Tooltip } 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>
|
|
<Paper
|
|
radius="0"
|
|
className="glass2"
|
|
w="100%"
|
|
pos="fixed"
|
|
top={0}
|
|
style={{ zIndex: 100 }}
|
|
>
|
|
<NavbarMainMenu listNavbar={navbarListMenu} />
|
|
|
|
<Box hiddenFrom="sm" bg={colors.grey[2]} px="md" py="sm">
|
|
<Group justify="space-between" wrap="nowrap">
|
|
<ActionIcon
|
|
variant="transparent"
|
|
size="xl"
|
|
radius="xl"
|
|
onClick={() => {
|
|
router.push("/darmasaba");
|
|
stateNav.mobileOpen = false;
|
|
}}
|
|
>
|
|
<Tooltip label="Go to homepage" position="bottom" withArrow>
|
|
<Image src="/darmasaba-icon.png" alt="Village Logo" width={48} height={48} loading="lazy"/>
|
|
</Tooltip>
|
|
</ActionIcon>
|
|
<Tooltip label={mobileOpen ? "Close menu" : "Open menu"} position="bottom" withArrow>
|
|
<Burger
|
|
opened={mobileOpen}
|
|
color={colors["blue-button"]}
|
|
onClick={() => (stateNav.mobileOpen = !stateNav.mobileOpen)}
|
|
size="sm"
|
|
/>
|
|
</Tooltip>
|
|
</Group>
|
|
{mobileOpen && (
|
|
<Paper
|
|
component={motion.div}
|
|
initial={{ x: '100%' }}
|
|
animate={{ x: 0 }}
|
|
exit={{ x: '100%' }}
|
|
transition={{ duration: 0.2 }}
|
|
pos="absolute"
|
|
left={0}
|
|
right={0}
|
|
top="100%"
|
|
m={0}
|
|
radius={0}
|
|
>
|
|
<NavbarMobile listNavbar={navbarListMenu} />
|
|
</Paper>
|
|
)}
|
|
</Box>
|
|
</Paper>
|
|
{(item || isSearch) && <Box className="glass" />}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
function NavbarMobile({ listNavbar }: { listNavbar: MenuItem[] }) {
|
|
const router = useRouter();
|
|
return (
|
|
<ScrollArea.Autosize mah="calc(100vh - 80px)" offsetScrollbars>
|
|
<Stack p="md" gap="xs">
|
|
{listNavbar.map((item, k) => (
|
|
<Box key={k}>
|
|
<Group
|
|
justify="space-between"
|
|
align="center"
|
|
p="xs"
|
|
onClick={() => {
|
|
router.push(item.href);
|
|
stateNav.mobileOpen = false;
|
|
}}
|
|
style={{ cursor: "pointer" }}
|
|
>
|
|
<Text c="dark.9" fw={600} fz="md">
|
|
{item.name}
|
|
</Text>
|
|
<IconSquareArrowRight size={18} />
|
|
</Group>
|
|
{item.children && (
|
|
<Box pl="md">
|
|
<NavbarMobile listNavbar={item.children} />
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
))}
|
|
</Stack>
|
|
</ScrollArea.Autosize>
|
|
);
|
|
}
|
|
|