3

I want to make the Mantine burger auto close after a nav choice is selected in the modal. It seems as if it is not possible for the Mantine burger to automatically close (because the x icon stays). I am using 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 help with this would be appreciated.

next: 12.1.5 @mantine/core: 4.2.12

soupCodez
  • 31
  • 1
  • 3

2 Answers2

0

After clicking the link call close method of useDisclosure, it will make opened to false. Burger state is depend on opened so, it wil close the burger on false.

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();
        // It will set opened to false (so it will close Burger)
        close()
      }}
    >
      {link.label}
    </a>
  ));
Abhishek
  • 726
  • 3
  • 10
0

I found something that might help you On the Mantine Doc, one header called 'Responsive header' is working fine after you clicked on any of the burger items.

Simply follow the codes and should be fine!

G3N
  • 141
  • 6