diff --git a/src/Header.tsx b/src/Header.tsx index 8e02116..ca6238e 100644 --- a/src/Header.tsx +++ b/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: - theme.colorScheme === "dark" - ? theme.colors.dark[6] - : theme.colors.gray[0], + backgroundColor: theme.colors.gray[0], + color: "#eb7b1a", }, }, linkActive: { - "&, &:hover": { - backgroundColor: theme.fn.variant({ - variant: "light", - color: theme.primaryColor, - }).background, - color: theme.fn.variant({ variant: "light", color: theme.primaryColor }) - .color, + backgroundColor: "#ffb84d", + "&:hover": { + backgroundColor: "#ffb84d", + color: "#eb7b1a", }, }, })); @@ -75,20 +71,24 @@ export function HeaderSimple({ links }: HeaderSimpleProps) { const [active, setActive] = useState(""); const { classes, cx } = useStyles(); - const items = links.map((link) => ( - { - setActive(link.link); - }} - > - {link.label} - - )); + const items = links.slice(1).map( + ( + link // for custom authors link + ) => ( + { + // setActive(link.link); + // }} + > + {link.label} + + ) + ); return (
@@ -100,6 +100,62 @@ export function HeaderSimple({ links }: HeaderSimpleProps) { + + + { + e.preventDefault(); + // setActive("#authors"); + }} + > + Авторы + + + + + + } + component="a" + href="http://museumschelykovo.ru/products/?cid=4" + target="_blank" + > + Островский + + + } + component="a" + href="https://prishvin.ru/prishvin" + target="_blank" + > + Пришвин + + + } + component="a" + href="https://goslitmuz.ru/museums/muzey-serebryanogo-veka/" + target="_blank" + > + Брюсов + + + {items}