77 lines
2.6 KiB
TypeScript
77 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import stateNav from "@/state/state-nav";
|
|
import { Button, Container, Stack, Text } from "@mantine/core";
|
|
import { motion } from "motion/react";
|
|
import { IconArrowRight } from "@tabler/icons-react";
|
|
import { MenuItem } from "../../../../types/menu-item";
|
|
import { useTransitionRouter } from "next-view-transitions";
|
|
import colors from "@/con/colors";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
export function NavbarSubMenu({ item }: { item: MenuItem[] | null }) {
|
|
const router = useTransitionRouter();
|
|
const pathname = usePathname();
|
|
return (
|
|
<motion.div
|
|
key={Math.random().toString(36).slice(2)}
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.4, ease: "easeOut" }}
|
|
>
|
|
<Container
|
|
key={stateNav.item?.[0]?.id}
|
|
onMouseLeave={() => {
|
|
stateNav.item = null;
|
|
stateNav.isSearch = false;
|
|
}}
|
|
w={{ base: "100%", md: "80%" }}
|
|
fluid
|
|
py="xl"
|
|
>
|
|
{item && item.length > 0 ? (
|
|
<Stack gap="xs" align="stretch">
|
|
{item.map((link, index) => (
|
|
<Button
|
|
key={index}
|
|
variant="subtle"
|
|
justify="space-between"
|
|
size="lg"
|
|
radius="md"
|
|
color={link.href && pathname.startsWith(link.href) ? 'blue' : 'gray'}
|
|
onClick={() => {
|
|
if (link.href) {
|
|
router.push(link.href);
|
|
stateNav.item = null;
|
|
stateNav.isSearch = false;
|
|
}
|
|
}}
|
|
rightSection={<IconArrowRight size={18} />}
|
|
styles={(theme) => ({
|
|
root: {
|
|
background: link.href && pathname.startsWith(link.href) ? colors['blue-button-2'] : 'transparent',
|
|
color: link.href && pathname.startsWith(link.href) ? colors['blue-button'] : 'gray',
|
|
fontWeight: link.href && pathname.startsWith(link.href) ? 600 : 500,
|
|
transition: "all 0.2s ease",
|
|
"&:hover": {
|
|
background: link.href && pathname.startsWith(link.href) ? colors['blue-button-2'] : theme.colors.gray[0],
|
|
}
|
|
},
|
|
})}
|
|
>
|
|
{link.name}
|
|
</Button>
|
|
))}
|
|
</Stack>
|
|
) : (
|
|
<Stack align="center" py="xl">
|
|
<Text c="dimmed" size="sm">
|
|
No submenu available
|
|
</Text>
|
|
</Stack>
|
|
)}
|
|
</Container>
|
|
</motion.div>
|
|
);
|
|
}
|