Is there a way to automatically close the Mantine burger after selecting a navigation choice in the modal? It appears that the burger does not close automatically (due to the x icon remaining visible). My setup includes NextJS with Mantine & react-icons.
export default function HeaderMiddle({ links }: HeaderMiddleProps) {
const { colorScheme, toggleColorScheme } = useMantineColorScheme();
const dark = colorScheme === 'dark';
const [opened, { toggle, open, close }] = useDisclosure(false, {
onOpen: () => burgerClick(),
onClose: () => closeAllModals(),
});
const [active, setActive] = useState(links[0].link);
const { classes, cx } = useStyles();
const items = links.map((link) => (
<a
key={link.label}
href={link.link}
className={cx(classes.link, {
[classes.linkActive]: active === link.link,
})}
onClick={(event) => {
event.preventDefault();
setActive(link.link);
}}
>
{link.label}
</a>
));
const burgerItems = links.map((link) => (
<a
key={link.label}
href={link.link}
className={cx(classes.link, {
[classes.linkActive]: active === link.link,
})}
onClick={(event) => {
event.preventDefault();
setActive(link.link);
closeAllModals();
}}
>
{link.label}
</a>
));
const burgerClick = () => {
openModal({
title: 'Subscribe to newsletter',
children: <>{burgerItems}</>,
});
};
return (
<Header height={56} mb={120}>
<Container className={classes.inner}>
<Burger
opened={opened}
onClick={toggle}
size="sm"
className={classes.burger}
/>
<Group className={classes.links} spacing={5}>
{items}
</Group>
{/* <MantineLogo size={28} /> */}
<Group spacing={0} className={classes.social} position="right" noWrap>
...
</Group>
</Container>
</Header>
);
}
Any assistance on this matter would be greatly appreciated.
next: 12.1.5 @mantine/core: 4.2.12