fix: hide search in mobile version

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>
   );

src/Article.tsx

@@ -1,11 +1,23 @@
-import { Title, Container, rem, createStyles, TypographyStylesProvider, Image } from '@mantine/core';
+import {
-import { Carousel } from '@mantine/carousel';
+  Title,
-import { useLoaderData } from 'react-router-dom';
+  Container,
-import Markdown from 'react-markdown';
+  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} />
+    </>
   );
 }

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) {
+export function HeaderSimple({ links, openedMenuKarta, menuactionskarta }: HeaderSimpleProps) {
-  const [openedMenu, menuactions] = useDisclosure(false);
+  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
+        {/* Menu for pc */}
-          opened={openedMenu}
+        <Group spacing={5} className={classes.links}>
-          withCloseButton={false}
-          onClose={menuactions.close}
-          size="xs"
-          radius="md"
-          position={{ top: 70, right: 20 }}
-          className={classes.warning}
-        >
-          <Stack spacing={5} className={classes.linksmobile}>
           <Menu shadow="md" width={200}>
             <Menu.Target>
               <a
@@ -179,11 +169,31 @@ export function HeaderSimple({ links }: HeaderSimpleProps) {
             </Menu.Dropdown>
           </Menu>
           {items}
-          </Stack>
+        </Group>
-        </Dialog>
 
-        {/* Menu for pc */}
+        <Burger
-        <Group spacing={5} className={classes.links}>
+          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>
-
+        </Paper>
-        <Burger
-          opened={openedMenu}
-          onClick={menuactions.toggle}
-          className={classes.burger}
-          size="sm"
-        />
-      </Container>
     </Header>
   );
 }

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.src = `./markers/${i}.png`;
-      iconImage.onload = () => mapRef.current.addImage(`${i}-marker`, iconImage);
+      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} />
+    </>
   );
 }

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} />
+    </>
+    
   );
 }