add menu

src/Header.tsx

@@ -8,9 +8,10 @@ import {
   rem,
   Image,
   Anchor,
+  Menu,
 } from "@mantine/core";
+import { IconExternalLink } from '@tabler/icons-react';
 import { useDisclosure } from "@mantine/hooks";
-// import { MantineLogo } from '@mantine/ds';
 import logo from "./assets/logos/logo-text.png";
 
 const useStyles = createStyles((theme) => ({
@@ -47,21 +48,16 @@ const useStyles = createStyles((theme) => ({
     fontWeight: 500,
 
     "&:hover": {
-      backgroundColor:
+      backgroundColor: theme.colors.gray[0],
-        theme.colorScheme === "dark"
+      color: "#eb7b1a",
-          ? theme.colors.dark[6]
-          : theme.colors.gray[0],
     },
   },
 
   linkActive: {
-    "&, &:hover": {
+    backgroundColor: "#ffb84d",
-      backgroundColor: theme.fn.variant({
+    "&:hover": {
-        variant: "light",
+      backgroundColor: "#ffb84d",
-        color: theme.primaryColor,
+      color: "#eb7b1a",
-      }).background,
-      color: theme.fn.variant({ variant: "light", color: theme.primaryColor })
-        .color,
     },
   },
 }));
@@ -75,20 +71,24 @@ export function HeaderSimple({ links }: HeaderSimpleProps) {
   const [active, setActive] = useState("");
   const { classes, cx } = useStyles();
 
-  const items = links.map((link) => (
+  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={() => {
+        // onClick={() => {
-        setActive(link.link);
+        //   setActive(link.link);
-      }}
+        // }}
       >
         {link.label}
       </a>
-  ));
+    )
+  );
 
   return (
     <Header height={60}>
@@ -100,6 +100,62 @@ export function HeaderSimple({ links }: HeaderSimpleProps) {
         </Anchor>
 
         <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="http://museumschelykovo.ru/products/?cid=4"
+                target="_blank"
+              >
+                Островский
+              </Menu.Item>
+              <Menu.Item
+                rightSection={
+                  <IconExternalLink
+                    style={{ width: rem(14), height: rem(14) }}
+                  />
+                }
+                component="a"
+                href="https://prishvin.ru/prishvin"
+                target="_blank"
+              >
+                Пришвин
+              </Menu.Item>
+              <Menu.Item
+                rightSection={
+                  <IconExternalLink
+                    style={{ width: rem(14), height: rem(14) }}
+                  />
+                }
+                component="a"
+                href="https://goslitmuz.ru/museums/muzey-serebryanogo-veka/"
+                target="_blank"
+              >
+                Брюсов
+              </Menu.Item>
+            </Menu.Dropdown>
+          </Menu>
           {items}
         </Group>