litmap/src/Header.tsx

import { useState } from "react";
import {
  createStyles,
  Header,
  Container,
  Group,
  Burger,
  rem,
  Image,
  Menu,
  Dialog,
} from "@mantine/core";
import { IconExternalLink } from "@tabler/icons-react";
import { useDisclosure } from "@mantine/hooks";
import logo from "./assets/logos/logo-text.png";

const useStyles = createStyles((theme) => ({
  header: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    height: "100%",
  },

  links: {
    [theme.fn.smallerThan("xs")]: {
      display: "none",
    },
  },

  warning: {
    [theme.fn.largerThan("md")]: {
      display: "none",
    },
  },

  burger: {
    // [theme.fn.largerThan("xs")]: {
    display: "none",
    // }
  },

  link: {
    display: "block",
    lineHeight: 1,
    padding: `${rem(8)} ${rem(12)}`,
    borderRadius: theme.radius.sm,
    textDecoration: "none",
    color:
      theme.colorScheme === "dark"
        ? theme.colors.dark[0]
        : theme.colors.gray[7],
    fontSize: theme.fontSizes.md,
    fontWeight: 700,

    "&:hover": {
      backgroundColor: theme.colors.gray[0],
      color: "#eb7b1a",
    },
  },

  linkActive: {
    backgroundColor: "#ffb84d",
    "&:hover": {
      backgroundColor: "#ffb84d",
      color: "#eb7b1a",
    },
  },
}));

interface HeaderSimpleProps {
  links: { link: string; label: string }[];
}

export function HeaderSimple({ links }: HeaderSimpleProps) {
  // const [opened, { toggle }] = useDisclosure(false);
  const [opened, { toggle, close }] = useDisclosure(true);
  const [active, setActive] = useState("");
  const { classes, cx } = useStyles();

  const items = links.slice(1).map(
    (
      link // for custom authors link
    ) => (
      <a
        key={link.label}
        href={link.link}
        className={cx(classes.link, {
          [classes.linkActive]: active === link.link,
        })}
        // onClick={() => {
        //   setActive(link.link);
        // }}
      >
        {link.label}
      </a>
    )
  );

  return (
    <Header height={60}>
      <Dialog
        opened={opened}
        withCloseButton
        onClose={close}
        size="lg"
        radius="md"
        position={{ top: 70, right: 20 }}
        className={classes.warning}
      >
        Полная версия портала доступна с компьютера
      </Dialog>
      <Container className={classes.header}>
        {/* <Title order={3}><Anchor href='/' inherit={true} color='black' underline={false}>Литературные музеи России</Anchor></Title> */}
        {/* <MantineLogo size={28} /> */}

        <Image maw={150} src={logo} component="a" href="/" />

        <Group spacing={5} className={classes.links}>
          <Menu shadow="md" width={200}>
            <Menu.Target>
              <a
                key="Авторы"
                href="#authors"
                className={cx(classes.link, {
                  [classes.linkActive]: active === "#authors",
                })}
                onClick={(e) => {
                  e.preventDefault();
                  // setActive("#authors");
                }}
              >
                Авторы
              </a>
            </Menu.Target>

            <Menu.Dropdown>
              <Menu.Item
                rightSection={
                  <IconExternalLink
                    style={{ width: rem(14), height: rem(14) }}
                  />
                }
                component="a"
                href="https://bigenc.ru/c/ostrovskii-aleksandr-nikolaevich-c697e2"
                target="_blank"
              >
                Островский
              </Menu.Item>
              <Menu.Item
                rightSection={
                  <IconExternalLink
                    style={{ width: rem(14), height: rem(14) }}
                  />
                }
                component="a"
                href="https://bigenc.ru/c/prishvin-mikhail-mikhailovich-893107"
                target="_blank"
              >
                Пришвин
              </Menu.Item>
              <Menu.Item
                rightSection={
                  <IconExternalLink
                    style={{ width: rem(14), height: rem(14) }}
                  />
                }
                component="a"
                href="https://bigenc.ru/c/briusov-valerii-iakovlevich-fc6a35"
                target="_blank"
              >
                Брюсов
              </Menu.Item>
            </Menu.Dropdown>
          </Menu>
          {items}
        </Group>

        <Burger
          opened={opened}
          onClick={toggle}
          className={classes.burger}
          size="sm"
        />
      </Container>
    </Header>
  );
}