55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import stateNav from "@/state/state-nav";
|
|
import { Button, Container, Stack } from "@mantine/core";
|
|
import _ from "lodash";
|
|
import { motion } from "motion/react";
|
|
import { MenuItem } from "../../../../types/menu-item";
|
|
import { useTransitionRouter } from 'next-view-transitions'
|
|
|
|
export function NavbarSubMenu({ item }: { item: MenuItem[] | null }) {
|
|
const router = useTransitionRouter()
|
|
return (
|
|
<motion.div
|
|
key={_.uniqueId()}
|
|
initial={{ opacity: 0.5 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 1 }}
|
|
>
|
|
<Container
|
|
key={stateNav.item?.[0]?.id}
|
|
onMouseLeave={() => {
|
|
stateNav.item = null;
|
|
stateNav.isSearch = false;
|
|
}}
|
|
w={{
|
|
base: "100%",
|
|
md: "80%",
|
|
}}
|
|
fluid
|
|
>
|
|
<Stack gap={0} align="start" py={"xl"}>
|
|
{item &&
|
|
item.map((item, k) => {
|
|
return (
|
|
<Button
|
|
key={k}
|
|
fz={"lg"}
|
|
color="dark.9"
|
|
variant="transparent"
|
|
onClick={() => {
|
|
router.push(item.href)
|
|
stateNav.item = null
|
|
stateNav.isSearch = false
|
|
}}
|
|
>
|
|
{item.name}
|
|
</Button>
|
|
);
|
|
})}
|
|
</Stack>
|
|
</Container>
|
|
</motion.div>
|
|
);
|
|
}
|