feat: boards dnd editor for mobile

src/app/deals/components/Boards/Boards.tsx

@@ -36,7 +36,7 @@ const Boards = () => {
                     renderItem={renderBoard}
                     onDragEnd={onDragEnd}
                     onItemClick={selectBoard}
-                    rowStyle={{ flexWrap: "nowrap" }}
+                    containerStyle={{ flexWrap: "nowrap" }}
                     disabled={isMobile}
                 />
                 <CreateBoardButton />

src/app/deals/components/CreateBoardButton/CreateBoardButton.tsx

@@ -7,7 +7,9 @@ const CreateBoardButton = () => {
     const { onCreateBoard } = useBoardsContext();
 
     return (
-        <Box style={{ cursor: "pointer" }}>
+        <Box
+            style={{ cursor: "pointer" }}
+            pr={"md"}>
             <InPlaceInput
                 placeholder={"Название доски"}
                 onComplete={onCreateBoard}

src/app/deals/components/Header/Header.tsx

@@ -1,22 +1,50 @@
 "use client";
 
-import { Group } from "@mantine/core";
+import { IconChevronLeft, IconSettings } from "@tabler/icons-react";
+import { isMobile } from "react-device-detect";
+import { Box, Group, Text } from "@mantine/core";
+import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
 
 const Header = () => {
     const { projects, setSelectedProject, selectedProject } =
         useProjectsContext();
+    const { setIsEditorDrawerOpened } = useBoardsContext();
 
-    return (
-        <Group
-            justify={"flex-end"}
-            w={"100%"}>
+    const getDesktopHeader = () => {
+        return (
             <ProjectSelect
                 data={projects}
                 value={selectedProject}
                 onChange={value => value && setSelectedProject(value)}
             />
+        );
+    };
+
+    const getMobileHeader = () => {
+        return (
+            <Group
+                justify={"space-between"}
+                w={"100%"}>
+                <Box p={"md"}>
+                    <IconChevronLeft />
+                </Box>
+                <Text>{selectedProject?.name}</Text>
+                <Box
+                    p={"md"}
+                    onClick={() => setIsEditorDrawerOpened(true)}>
+                    <IconSettings />
+                </Box>
+            </Group>
+        );
+    };
+
+    return (
+        <Group
+            justify={"flex-end"}
+            w={"100%"}>
+            {isMobile ? getMobileHeader() : getDesktopHeader()}
         </Group>
     );
 };