update header

src/Header.tsx

@@ -1,47 +1,67 @@
-import { useState } from 'react';
+import { useState } from "react";
-import { createStyles, Header, Container, Group, Burger, rem, Title, Anchor } from '@mantine/core';
+import {
-import { useDisclosure } from '@mantine/hooks';
+  createStyles,
+  Header,
+  Container,
+  Group,
+  Burger,
+  rem,
+  Image,
+  Anchor,
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
 // import { MantineLogo } from '@mantine/ds';
+import logo from "./assets/logos/logo-text.png";
 
 const useStyles = createStyles((theme) => ({
   header: {
-    display: 'flex',
+    display: "flex",
-    justifyContent: 'space-between',
+    justifyContent: "space-between",
-    alignItems: 'center',
+    alignItems: "center",
-    height: '100%',
+    height: "100%",
   },
 
   links: {
-    [theme.fn.smallerThan('xs')]: {
+    [theme.fn.smallerThan("xs")]: {
-      display: 'none',
+      display: "none",
     },
   },
 
   burger: {
-    [theme.fn.largerThan('xs')]: {
+    [theme.fn.largerThan("xs")]: {
-      display: 'none',
+      display: "none",
     },
   },
 
   link: {
-    display: 'block',
+    display: "block",
     lineHeight: 1,
     padding: `${rem(8)} ${rem(12)}`,
     borderRadius: theme.radius.sm,
-    textDecoration: 'none',
+    textDecoration: "none",
-    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
+    color:
+      theme.colorScheme === "dark"
+        ? theme.colors.dark[0]
+        : theme.colors.gray[7],
     fontSize: theme.fontSizes.sm,
     fontWeight: 500,
 
-    '&:hover': {
+    "&:hover": {
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+      backgroundColor:
+        theme.colorScheme === "dark"
+          ? theme.colors.dark[6]
+          : theme.colors.gray[0],
     },
   },
 
   linkActive: {
-    '&, &:hover': {
+    "&, &:hover": {
-      backgroundColor: theme.fn.variant({ variant: 'light', color: theme.primaryColor }).background,
+      backgroundColor: theme.fn.variant({
-      color: theme.fn.variant({ variant: 'light', color: theme.primaryColor }).color,
+        variant: "light",
+        color: theme.primaryColor,
+      }).background,
+      color: theme.fn.variant({ variant: "light", color: theme.primaryColor })
+        .color,
     },
   },
 }));
@@ -52,14 +72,16 @@ interface HeaderSimpleProps {
 
 export function HeaderSimple({ links }: HeaderSimpleProps) {
   const [opened, { toggle }] = useDisclosure(false);
-  const [active, setActive] = useState('');
+  const [active, setActive] = useState("");
   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 })}
+      className={cx(classes.link, {
+        [classes.linkActive]: active === link.link,
+      })}
       onClick={() => {
         setActive(link.link);
       }}
@@ -71,13 +93,22 @@ export function HeaderSimple({ links }: HeaderSimpleProps) {
   return (
     <Header height={60}>
       <Container className={classes.header}>
-        <Title order={3}><Anchor href='/' inherit={true} color='black' underline={false}>Литературные музеи России</Anchor></Title>
+        {/* <Title order={3}><Anchor href='/' inherit={true} color='black' underline={false}>Литературные музеи России</Anchor></Title> */}
         {/* <MantineLogo size={28} /> */}
+        <Anchor href="/">
+          <Image maw={150} src={logo} />
+        </Anchor>
+
         <Group spacing={5} className={classes.links}>
           {items}
         </Group>
 
-        <Burger opened={opened} onClick={toggle} className={classes.burger} size="sm" />
+        <Burger
+          opened={opened}
+          onClick={toggle}
+          className={classes.burger}
+          size="sm"
+        />
       </Container>
     </Header>
   );

src/assets/header.json

@@ -6,7 +6,7 @@
         },
         {
             "link": "#",
-            "label": "Территории"
+            "label": "Музеи"
         },
         {
             "link": "#",