fix: hide search in mobile version

2 years ago · 684392e85b
parent 84f7187375
commit 684392e85b
5 changed files with 429 additions and 376 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@ -9,10 +9,6 @@ import { CustomFonts } from './CustomFonts';
 import { KartaPage } from "./KartaPage";
 import { Landing } from "./Landing";
 import { Article } from "./Article";
-import { HeaderSimple } from "./Header";
-import { FooterLinks } from "./Footer";
-import headerLinks from "./assets/header.json";
-import footerLinks from "./assets/footer.json";

 const router = createBrowserRouter([
  {
@ -42,9 +38,7 @@ function App() {
    }}>
      <CustomFonts />
      <Box pos={"absolute"} w={"100%"} top={0}>
-        <HeaderSimple links={headerLinks.links} />
        <RouterProvider router={router} />
-        <FooterLinks data={footerLinks.data} />
      </Box>
    </MantineProvider>
  );
--- a/src/Article.tsx
+++ b/src/Article.tsx
@ -1,11 +1,23 @@
-import { Title, Container, rem, createStyles, TypographyStylesProvider, Image } from '@mantine/core';
-import { Carousel } from '@mantine/carousel';
-import { useLoaderData } from 'react-router-dom';
-import Markdown from 'react-markdown';
+import {
+  Title,
+  Container,
+  rem,
+  createStyles,
+  TypographyStylesProvider,
+  Image,
+} from "@mantine/core";
+import { Carousel } from "@mantine/carousel";
+import { useLoaderData } from "react-router-dom";
+import Markdown from "react-markdown";
+
+import { HeaderSimple } from "./Header";
+import { FooterLinks } from "./Footer";
+import headerLinks from "./assets/header.json";
+import footerLinks from "./assets/footer.json";

 const useStyles = createStyles((theme) => ({
  content: {
-    padding: rem(30)
+    padding: rem(30),
  },

  title: {
@ -13,41 +25,55 @@ const useStyles = createStyles((theme) => ({
    lineHeight: 1.2,
    fontWeight: 900,
    paddingBottom: rem(20),
-    [theme.fn.smallerThan('xs')]: {
+    [theme.fn.smallerThan("xs")]: {
      fontSize: rem(28),
    },
-  }
+  },
 }));

-
-
-
-
 export function Article() {
  const articleData = useLoaderData();
  const { classes } = useStyles();
-  const article = articleData.data[0].attributes
+  const article = articleData.data[0].attributes;
  // console.log(articleData)

  const generateCarousel = () => {
    if (articleData.data[0].attributes.carousel.data) {
      return (
        <Carousel slideSize="70%" mih={200} mah={500} slideGap="md" loop>
-          {articleData.data[0].attributes.carousel.data.map(image => <Carousel.Slide key={image.attributes.url}><Image fit='fill' mih={200} mah={500} mx="auto" radius="md" src={`https://strapi.litmusmap.ru${image.attributes.url}`} alt="Random image" /></Carousel.Slide>)}
+          {articleData.data[0].attributes.carousel.data.map((image) => (
+            <Carousel.Slide key={image.attributes.url}>
+              <Image
+                fit="fill"
+                mih={200}
+                mah={500}
+                mx="auto"
+                radius="md"
+                src={`https://strapi.litmusmap.ru${image.attributes.url}`}
+                alt="Random image"
+              />
+            </Carousel.Slide>
+          ))}
        </Carousel>
-      )
-    }
+      );
    }
+  };

  return (
+    <>
+      <HeaderSimple links={headerLinks.links} />
      <Container className={classes.content}>
        <Title order={1} className={classes.title}>
          {article.title}
        </Title>
-      <TypographyStylesProvider sx={{ '@media (prefers-color-scheme: dark)': { color: "#C1C2C5" } }}>
+        <TypographyStylesProvider
+          sx={{ "@media (prefers-color-scheme: dark)": { color: "#C1C2C5" } }}
+        >
          <Markdown>{article.content}</Markdown>
        </TypographyStylesProvider>
        {generateCarousel()}
      </Container>
+      <FooterLinks data={footerLinks.data} />
+    </>
  );
 }
--- a/src/Header.tsx
+++ b/src/Header.tsx
@ -8,7 +8,7 @@ import {
  rem,
  Image,
  Menu,
-  Dialog,
+  Paper,
  Stack,
 } from "@mantine/core";
 import { IconExternalLink } from "@tabler/icons-react";
@ -35,7 +35,7 @@ const useStyles = createStyles((theme) => ({
    },
  },

-  warning: {
+  mobilemenu: {
    [theme.fn.largerThan("md")]: {
      display: "none",
    },
@ -79,8 +79,8 @@ interface HeaderSimpleProps {
  links: { link: string; label: string }[];
 }

-export function HeaderSimple({ links }: HeaderSimpleProps) {
-  const [openedMenu, menuactions] = useDisclosure(false);
+export function HeaderSimple({ links, openedMenuKarta, menuactionskarta }: HeaderSimpleProps) {
+  const [openedMenu, menuactions] = menuactionskarta ? [openedMenuKarta, menuactionskarta] : useDisclosure(false);
  const [active, setActive] = useState("");
  const { classes, cx } = useStyles();

@ -106,22 +106,12 @@ 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> */}
-        {/* <MantineLogo size={28} /> */}

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

-        {/* Menu for mobile */}
-        <Dialog
-          opened={openedMenu}
-          withCloseButton={false}
-          onClose={menuactions.close}
-          size="xs"
-          radius="md"
-          position={{ top: 70, right: 20 }}
-          className={classes.warning}
-        >
-          <Stack spacing={5} className={classes.linksmobile}>
+
+        {/* Menu for pc */}
+        <Group spacing={5} className={classes.links}>
          <Menu shadow="md" width={200}>
            <Menu.Target>
              <a
@ -179,11 +169,31 @@ export function HeaderSimple({ links }: HeaderSimpleProps) {
            </Menu.Dropdown>
          </Menu>
          {items}
-          </Stack>
-        </Dialog>
+        </Group>

-        {/* Menu for pc */}
-        <Group spacing={5} className={classes.links}>
+        <Burger
+          opened={openedMenu}
+          onClick={menuactions.toggle}
+          className={classes.burger}
+          size="sm"
+        />
+      </Container>
+      {/* Menu for mobile */}
+        <Paper
+          display={!openedMenu && 'none'}
+          radius={0}
+          style={{
+            position: "absolute",
+            top: 60,
+            left: 0,
+            right: 0,
+            opacity: "95%",
+            padding: "10px 0 10px 1rem",
+            zIndex: 10
+          }}
+          className={classes.mobilemenu}
+        >
+          <Group spacing={5} className={classes.linksmobile}>
            <Menu shadow="md" width={200}>
              <Menu.Target>
                <a
@ -242,14 +252,7 @@ export function HeaderSimple({ links }: HeaderSimpleProps) {
            </Menu>
            {items}
          </Group>
-
-        <Burger
-          opened={openedMenu}
-          onClick={menuactions.toggle}
-          className={classes.burger}
-          size="sm"
-        />
-      </Container>
+        </Paper>
    </Header>
  );
 }
--- a/src/KartaPage.tsx
+++ b/src/KartaPage.tsx
@ -1,4 +1,9 @@
 import { Paper, Flex, ScrollArea, Autocomplete, Title } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { HeaderSimple } from "./Header";
+import { FooterLinks } from "./Footer";
+import headerLinks from "./assets/header.json";
+import footerLinks from "./assets/footer.json";
 import { ArticleCardVertical } from "./ArticleCard";
 import { ArticleCardMobile } from "./ArticleCardMobile";
 import Map, {
@ -18,7 +23,6 @@ import plus from "./assets/plus.png";
 import minus from "./assets/minus.png";
 import pin from "./assets/pin.png";

-
 export function KartaPage() {
  const mapRef = useRef(null);
  const [initial, setInitial] = useState(null);
@ -27,6 +31,8 @@ export function KartaPage() {
  const [selected, setSelected] = useState(-1);
  const [cursor, setCursor] = useState("grab");
  const [popupInfo, setPopupInfo] = useState(null);
+  const [openedMenu, menuactions] = useDisclosure(false);
+

  const host = "https://strapi.litmusmap.ru";

@ -37,11 +43,12 @@ export function KartaPage() {
    pinImage.onload = () => mapRef.current.addImage("pin-marker", pinImage);

    const icons = initial ? ["prishvin", "ostrovskiy", "brusov"] : [];
-    icons.map(i => {
+    icons.map((i) => {
      const iconImage = new Image();
-      iconImage.src = `./markers/${i}.png`
-      iconImage.onload = () => mapRef.current.addImage(`${i}-marker`, iconImage);
-    })
+      iconImage.src = `./markers/${i}.png`;
+      iconImage.onload = () =>
+        mapRef.current.addImage(`${i}-marker`, iconImage);
+    });
  };

  // Load articles
@ -49,7 +56,7 @@ export function KartaPage() {
    fetch(`${host}/api/articles?populate=*`)
      .then((r) => r.json())
      .then((d) => {
-        console.log(d.data)
+        console.log(d.data);
        setInitial(d.data);
        setArticles(d.data);
      });
@ -138,6 +145,8 @@ export function KartaPage() {
  };

  return (
+    <>
+      <HeaderSimple links={headerLinks.links} openedMenuKarta={openedMenu} menuactionskarta={menuactions}/>
      <div style={{ position: "relative" }}>
        <Map
          ref={mapRef}
@ -232,7 +241,15 @@ export function KartaPage() {
              }
              layout={{
                "icon-image": "pin-marker",
-              "icon-size": ["interpolate", ["linear"], ["zoom"], 7, 0.5, 12, 1],
+                "icon-size": [
+                  "interpolate",
+                  ["linear"],
+                  ["zoom"],
+                  7,
+                  0.5,
+                  12,
+                  1,
+                ],
              }}
              minzoom={7}
              maxzoom={12}
@ -289,14 +306,15 @@ export function KartaPage() {
        <Paper
          shadow={"md"}
          radius={0}
+          display={!openedMenu && 'none'}
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
-          height: "300px",
+            height: "340px",
            opacity: "95%",
-          padding: "1rem 0 1rem 1rem",
+            padding: "55px 0 1rem 1rem"
          }}
          sx={{
            "@media (min-width: 60em)": {
@ -412,5 +430,7 @@ export function KartaPage() {
          </ScrollArea>
        </Paper>
      </div>
+      <FooterLinks data={footerLinks.data} />
+    </>
  );
 }
--- a/src/Landing.tsx
+++ b/src/Landing.tsx
@ -6,6 +6,11 @@ import {
  TypographyStylesProvider,
 } from "@mantine/core";

+import { HeaderSimple } from "./Header";
+import { FooterLinks } from "./Footer";
+import headerLinks from "./assets/header.json";
+import footerLinks from "./assets/footer.json";
+
 const useStyles = createStyles((theme) => ({
  content: {
    padding: rem(30),
@ -31,6 +36,8 @@ export function Landing() {
  const { classes } = useStyles();

  return (
+    <>
+    <HeaderSimple links={headerLinks.links} />
    <Container className={classes.content}>
      <Title order={1} className={classes.title}>
        О проекте
@ -98,5 +105,8 @@ export function Landing() {
        </p>
      </TypographyStylesProvider>
    </Container>
+    <FooterLinks data={footerLinks.data} />
+    </>
+    
  );
 }