fix: mobile version

src/ArticleCard.tsx

@@ -59,11 +59,11 @@ export function ArticleCardVertical({
   return (
     <Card withBorder shadow="sm" radius="md" p={0} w={'100%'} className={classes.card}>
       <Group noWrap spacing={0}>
-        <Image src={image} height={205} width={205} component='a' href={`/article/${id}`}/>
+        <Image src={image} height={160} width={140} component='a' href={`/article/${id}`}/>
         <Stack p='md'>
-          <Text transform="uppercase" color="dimmed" size="xs">
+          {/* <Text transform="uppercase" color="dimmed" size="xs">
             {category}
-          </Text>
+          </Text> */}
           <Text component='a' href={`/article/${id}`} className={classes.title} mt="xs" mb="md" color={id === selected ? '#e66a5a' : 'black'}>
             {title}
           </Text>

src/ArticleCardMobile.tsx

@@ -0,0 +1,80 @@
+import { createStyles, Card, Image, Stack, Text, Group, Flex } from '@mantine/core';
+import globe from './assets/globe.png'
+
+
+const useStyles = createStyles((theme) => ({
+  card: {
+    backgroundColor: theme.white,
+  },
+
+  title: {
+    fontWeight: 700,
+    fontFamily: theme.fontFamily,
+    lineHeight: 1.2,
+    '&:hover': {
+      color: '#eb7b1a'
+    }
+  },
+
+  body: {
+    padding: theme.spacing.md,
+  },
+
+  address: {
+    "&:hover": {
+      cursor: "pointer",
+      filter: 'brightness(0) saturate(100%) invert(50%) sepia(92%) saturate(1223%) hue-rotate(352deg) brightness(97%) contrast(91%)'
+    }
+  }
+}));
+
+interface ArticleCardVerticalProps {
+  id: number;
+  image: string;
+  category: string;
+  title: string;
+  address: string;
+  longitude: number;
+  latitude: number;
+  selected: number;
+  // author: {
+  //   name: string;
+  //   avatar: string;
+  // };
+}
+
+export function ArticleCardMobile({
+  id,
+  image,
+  category,
+  title,
+  address,
+  longitude,
+  latitude,
+  // author,
+  selected,
+  clickAddressAction
+}: ArticleCardVerticalProps) {
+  const { classes } = useStyles();
+  return (
+    <Card withBorder shadow="sm" radius="md" p={0} w={'100%'} className={classes.card}>
+      <Group noWrap spacing={0}>
+      {/* <Image src={image} height={140} width={100} component='a' href={`/article/${id}`}/> */}
+        <Stack p='xs'>
+          <Text component='a' href={`/article/${id}`} className={classes.title} mt="xs" mb={0} color={id === selected ? '#e66a5a' : 'black'}>
+            {title}
+          </Text>
+          <Flex align='center' onClick={() => clickAddressAction(id)} className={classes.address}>
+            {/* <IconCurrentLocation style={{ width: rem(12), height: rem(12) }} /> */}
+            <Image src={globe} style={{ width: 32, height: 32 }} />
+            <Text size="xs" pl={5} pb={2}>
+              {address}
+              <br/>
+              {`${longitude.toFixed(3).replace('.', ',')}°  ${latitude.toFixed(3).replace('.', ',')}°`}
+            </Text>
+          </Flex>
+        </Stack>
+      </Group>
+    </Card>
+  );
+}

src/Header.tsx

@@ -9,6 +9,7 @@ import {
   Image,
   Menu,
   Dialog,
+  Stack,
 } from "@mantine/core";
 import { IconExternalLink } from "@tabler/icons-react";
 import { useDisclosure } from "@mantine/hooks";
@@ -23,7 +24,13 @@ const useStyles = createStyles((theme) => ({
   },
 
   links: {
-    [theme.fn.smallerThan("xs")]: {
+    [theme.fn.smallerThan("md")]: {
+      display: "none",
+    },
+  },
+
+  linksmobile: {
+    [theme.fn.largerThan("md")]: {
       display: "none",
     },
   },
@@ -35,9 +42,9 @@ const useStyles = createStyles((theme) => ({
   },
 
   burger: {
-    // [theme.fn.largerThan("xs")]: {
+    [theme.fn.largerThan("md")]: {
-    display: "none",
+      display: "none",
-    // }
+    },
   },
 
   link: {
@@ -73,8 +80,7 @@ interface HeaderSimpleProps {
 }
 
 export function HeaderSimple({ links }: HeaderSimpleProps) {
-  // const [opened, { toggle }] = useDisclosure(false);
+  const [openedMenu, menuactions] = useDisclosure(false);
-  const [opened, { toggle, close }] = useDisclosure(true);
   const [active, setActive] = useState("");
   const { classes, cx } = useStyles();
 
@@ -99,23 +105,84 @@ export function HeaderSimple({ links }: HeaderSimpleProps) {
 
   return (
     <Header height={60}>
-      <Dialog
-        opened={opened}
-        withCloseButton
-        onClose={close}
-        size="lg"
-        radius="md"
-        position={{ top: 70, right: 20 }}
-        className={classes.warning}
-      >
-        Полная версия портала доступна с компьютера
-      </Dialog>
       <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 shadow="md" width={200} position="left-start">
+              <Menu.Target>
+                <a
+                  key="Авторы"
+                  href="#authors"
+                  className={cx(classes.link, {
+                    [classes.linkActive]: active === "#authors",
+                  })}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    // setActive("#authors");
+                  }}
+                >
+                  Авторы
+                </a>
+              </Menu.Target>
+
+              <Menu.Dropdown>
+                <Menu.Item
+                  rightSection={
+                    <IconExternalLink
+                      style={{ width: rem(14), height: rem(14) }}
+                    />
+                  }
+                  component="a"
+                  href="https://bigenc.ru/c/ostrovskii-aleksandr-nikolaevich-c697e2"
+                  target="_blank"
+                >
+                  Островский
+                </Menu.Item>
+                <Menu.Item
+                  rightSection={
+                    <IconExternalLink
+                      style={{ width: rem(14), height: rem(14) }}
+                    />
+                  }
+                  component="a"
+                  href="https://bigenc.ru/c/prishvin-mikhail-mikhailovich-893107"
+                  target="_blank"
+                >
+                  Пришвин
+                </Menu.Item>
+                <Menu.Item
+                  rightSection={
+                    <IconExternalLink
+                      style={{ width: rem(14), height: rem(14) }}
+                    />
+                  }
+                  component="a"
+                  href="https://bigenc.ru/c/briusov-valerii-iakovlevich-fc6a35"
+                  target="_blank"
+                >
+                  Брюсов
+                </Menu.Item>
+              </Menu.Dropdown>
+            </Menu>
+            {items}
+          </Stack>
+        </Dialog>
+
+        {/* Menu for pc */}
         <Group spacing={5} className={classes.links}>
           <Menu shadow="md" width={200}>
             <Menu.Target>
@@ -177,8 +244,8 @@ export function HeaderSimple({ links }: HeaderSimpleProps) {
         </Group>
 
         <Burger
-          opened={opened}
+          opened={openedMenu}
-          onClick={toggle}
+          onClick={menuactions.toggle}
           className={classes.burger}
           size="sm"
         />

src/KartaPage.tsx

@@ -1,5 +1,6 @@
 import { Paper, Flex, ScrollArea, Autocomplete, Title } from "@mantine/core";
 import { ArticleCardVertical } from "./ArticleCard";
+import { ArticleCardMobile } from "./ArticleCardMobile";
 import Map, {
   Source,
   Layer,
@@ -292,6 +293,69 @@ export function KartaPage() {
         />
       </Map>
 
+      {/* Search mobile */}
+      <Paper
+        shadow={"md"}
+        radius={0}
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          height: "300px",
+          opacity: "95%",
+          padding: "1rem 0 1rem 1rem",
+        }}
+        sx={{
+          "@media (min-width: 60em)": {
+            display: "none",
+          },
+        }}
+      >
+        <Autocomplete
+          mr={20}
+          mb={10}
+          placeholder="Поиск"
+          limit={2}
+          value={search}
+          onChange={setSearch}
+          data={[]}
+        />
+        <ScrollArea h={"225px"} type="auto">
+          <Flex
+            // mih={50}
+            gap="xs"
+            justify="flex-start"
+            align="start"
+            direction="column"
+            wrap="wrap"
+            mr={20}
+          >
+            {articles !== null &&
+              articles.length > 0 &&
+              articles.map((article) => (
+                <ArticleCardMobile
+                  key={article.id}
+                  id={article.id}
+                  image={
+                    article.attributes.cover.data !== null
+                      ? host + article.attributes.cover.data.attributes.url
+                      : ""
+                  }
+                  category="музеи"
+                  title={article.attributes.title}
+                  address={article.attributes.address}
+                  longitude={article.attributes.longitude}
+                  latitude={article.attributes.latitude}
+                  selected={selected}
+                  clickAddressAction={handleAddressClick}
+                />
+              ))}
+          </Flex>
+        </ScrollArea>
+      </Paper>
+
+      {/* Search pc */}
       <Paper
         shadow={"md"}
         withBorder