diff --git a/src/Header.tsx b/src/Header.tsx index 9510c9b..8e02116 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -1,47 +1,67 @@ -import { useState } from 'react'; -import { createStyles, Header, Container, Group, Burger, rem, Title, Anchor } from '@mantine/core'; -import { useDisclosure } from '@mantine/hooks'; +import { useState } from "react"; +import { + 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', - justifyContent: 'space-between', - alignItems: 'center', - height: '100%', + display: "flex", + justifyContent: "space-between", + alignItems: "center", + height: "100%", }, links: { - [theme.fn.smallerThan('xs')]: { - display: 'none', + [theme.fn.smallerThan("xs")]: { + display: "none", }, }, burger: { - [theme.fn.largerThan('xs')]: { - display: 'none', + [theme.fn.largerThan("xs")]: { + display: "none", }, }, link: { - display: 'block', + 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], + textDecoration: "none", + color: + theme.colorScheme === "dark" + ? theme.colors.dark[0] + : theme.colors.gray[7], fontSize: theme.fontSizes.sm, fontWeight: 500, - '&:hover': { - backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0], + "&:hover": { + backgroundColor: + theme.colorScheme === "dark" + ? theme.colors.dark[6] + : theme.colors.gray[0], }, }, linkActive: { - '&, &:hover': { - backgroundColor: theme.fn.variant({ variant: 'light', color: theme.primaryColor }).background, - color: theme.fn.variant({ variant: 'light', color: theme.primaryColor }).color, + "&, &:hover": { + backgroundColor: theme.fn.variant({ + 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) => ( { setActive(link.link); }} @@ -71,14 +93,23 @@ export function HeaderSimple({ links }: HeaderSimpleProps) { return (
- <Anchor href='/' inherit={true} color='black' underline={false}>Литературные музеи России</Anchor> + {/* <Anchor href='/' inherit={true} color='black' underline={false}>Литературные музеи России</Anchor> */} {/* */} + + + + {items} - +
); -} \ No newline at end of file +} diff --git a/src/assets/brusov.png b/src/assets/brusov.png new file mode 100644 index 0000000..1e65fc1 Binary files /dev/null and b/src/assets/brusov.png differ diff --git a/src/assets/header.json b/src/assets/header.json index 541cd79..8b16e2d 100644 --- a/src/assets/header.json +++ b/src/assets/header.json @@ -6,7 +6,7 @@ }, { "link": "#", - "label": "Территории" + "label": "Музеи" }, { "link": "#", diff --git a/src/assets/logos/logo-text.png b/src/assets/logos/logo-text.png new file mode 100644 index 0000000..64842ab Binary files /dev/null and b/src/assets/logos/logo-text.png differ diff --git a/src/assets/logos/logo.png b/src/assets/logos/logo.png new file mode 100644 index 0000000..8a7ecb9 Binary files /dev/null and b/src/assets/logos/logo.png differ