feat: 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={180} 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/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")]: {
-    display: "none",
-    // }
+    [theme.fn.largerThan("md")]: {
+      display: "none",
+    },
   },
 
   link: {
@@ -73,8 +80,7 @@ interface HeaderSimpleProps {
 }
 
 export function HeaderSimple({ links }: HeaderSimpleProps) {
-  // const [opened, { toggle }] = useDisclosure(false);
-  const [opened, { toggle, close }] = useDisclosure(true);
+  const [openedMenu, menuactions] = useDisclosure(false);
   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}
-          onClick={toggle}
+          opened={openedMenu}
+          onClick={menuactions.toggle}
           className={classes.burger}
           size="sm"
         />

src/KartaPage.tsx

@@ -292,6 +292,69 @@ export function KartaPage() {
         />
       </Map>
 
+      {/* Search mobile */}
+      <Paper
+        shadow={"md"}
+        radius={0}
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          height: "30vh",
+          opacity: "95%",
+          padding: "1rem 0 1rem 1rem",
+        }}
+        sx={{
+          "@media (min-width: 60em)": {
+            display: "none",
+          },
+        }}
+      >
+        <Autocomplete
+          mr={20}
+          mb={30}
+          placeholder="Поиск"
+          limit={2}
+          value={search}
+          onChange={setSearch}
+          data={[]}
+        />
+        <ScrollArea h={"20vh"} type="auto">
+          <Flex
+            mih={50}
+            gap="md"
+            justify="flex-start"
+            align="start"
+            direction="column"
+            wrap="wrap"
+            mr={20}
+          >
+            {articles !== null &&
+              articles.length > 0 &&
+              articles.map((article) => (
+                <ArticleCardVertical
+                  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