feat: navbar and footer

src/app/deals/components/shared/Board/Board.tsx

@@ -44,14 +44,15 @@ const Board: FC<Props> = ({ board }) => {
                                 {board.name}
                             </Text>
                         </Box>
-                        <BoardMenu
-                            isHovered={
-                                !isMobile &&
-                                (selectedBoard?.id === board.id || isHovered)
-                            }
-                            board={board}
-                            startEditing={startEditing}
-                        />
+                        {!isMobile && (
+                            <BoardMenu
+                                isHovered={
+                                    selectedBoard?.id === board.id || isHovered
+                                }
+                                board={board}
+                                startEditing={startEditing}
+                            />
+                        )}
                     </>
                 )}
                 modalTitle={"Редактирование доски"}

src/app/deals/components/shared/BoardMenu/BoardMenu.tsx

@@ -11,15 +11,14 @@ type Props = {
 };
 
 const BoardMenu: FC<Props> = ({ board, startEditing, isHovered = true }) => {
-    const { selectedBoard, onDeleteBoard } = useBoardsContext();
+    const { onDeleteBoard } = useBoardsContext();
 
     return (
         <Menu>
             <Menu.Target>
                 <Box
                     style={{
-                        opacity:
-                            isHovered || selectedBoard?.id === board.id ? 1 : 0,
+                        opacity: isHovered ? 1 : 0,
                         cursor: "pointer",
                     }}
                     onClick={e => e.stopPropagation()}>

src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.module.css

@@ -1,7 +1,7 @@
 
 .container {
     cursor: pointer;
-    height: calc(100vh - 150px);
+    height: 100%;
 
     @media (max-width: 48em) {
         width: 80vw;

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

@@ -6,7 +6,6 @@ import Boards from "@/app/deals/components/shared/Boards/Boards";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
-import { ColorSchemeToggle } from "@/components/ui/ColorSchemeToggle/ColorSchemeToggle";
 import useIsMobile from "@/hooks/useIsMobile";
 
 const Header = () => {
@@ -26,14 +25,11 @@ const Header = () => {
                 justify={"end"}
                 wrap={"nowrap"}
                 pr={"md"}>
-                <Group wrap={"nowrap"}>
-                    <ColorSchemeToggle />
-                    <ProjectSelect
-                        data={projects}
-                        value={selectedProject}
-                        onChange={value => value && setSelectedProject(value)}
-                    />
-                </Group>
+                <ProjectSelect
+                    data={projects}
+                    value={selectedProject}
+                    onChange={value => value && setSelectedProject(value)}
+                />
             </Group>
         );
     };

src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css

@@ -1,9 +1,8 @@
 
 .container {
-    height: calc(100vh - 150px);
-
     @media (max-width: 48em) {
         width: 80vw;
+        height: calc(100vh - 200px);
     }
 }
 
@@ -11,6 +10,10 @@
     border-radius: var(--mantine-spacing-md);
     gap: 0;
 
+    @media (max-width: 48em) {
+        max-height: calc(100vh - 200px);
+    }
+
     @mixin light {
         background-color: var(--color-light-aqua);
     }

src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.tsx

@@ -22,7 +22,7 @@ const StatusColumnWrapper = ({ renderHeader, children }: Props) => {
                     scrollbarSize={10}
                     type={"always"}
                     scrollbars={"y"}>
-                    <Stack mah={"calc(100vh - 220px)"}>{children}</Stack>
+                    <Stack mah={"calc(100vh - 250px)"}>{children}</Stack>
                 </ScrollArea>
             </Stack>
         </Box>

src/app/deals/page.tsx

@@ -15,7 +15,7 @@ export default function DealsPage() {
         <ProjectsContextProvider>
             <BoardsContextProvider>
                 <PageContainer>
-                    <PageBlock className={"mobile-padding-height"}>
+                    <PageBlock className={"mobile-margin-height"}>
                         <Header />
                         <StatusesContextProvider>
                             <DealsContextProvider>

src/app/global.css

@@ -12,6 +12,8 @@
     --light-thick-shadow: 4px 4px 10px darkgray;
     --dark-shadow: 1px 1px 10px 1px var(--mantine-color-dark-6);
     --dark-thick-shadow: 5px 5px 10px 1px var(--mantine-color-dark-6);
+    /* Heights */
+    --page-height: calc(100vh - (var(--mantine-spacing-md) * 2));
 }
 
 body {

src/app/layout.tsx

@@ -5,6 +5,7 @@ import "swiper/css/pagination";
 import "swiper/css/scrollbar";
 import { ReactNode } from "react";
 import {
+    AppShell,
     ColorSchemeScript,
     mantineHtmlProps,
     MantineProvider,
@@ -13,6 +14,11 @@ import { theme } from "@/theme";
 import "@/app/global.css";
 import { ModalsProvider } from "@mantine/modals";
 import { Notifications } from "@mantine/notifications";
+import AppShellFooterWrapper from "@/components/layout/AppShellWrappers/AppShellFooterWrapper";
+import AppShellMainWrapper from "@/components/layout/AppShellWrappers/AppShellMainWrapper";
+import AppShellNavbarWrapper from "@/components/layout/AppShellWrappers/AppShellNavbarWrapper";
+import Footer from "@/components/layout/Footer/Footer";
+import Navbar from "@/components/layout/Navbar/Navbar";
 import { modals } from "@/modals/modals";
 import { ReactQueryProvider } from "@/providers/ReactQueryProvider";
 import ReduxProvider from "@/providers/ReduxProvider";
@@ -58,7 +64,27 @@ export default function RootLayout({ children }: Props) {
                             <ModalsProvider
                                 labels={{ confirm: "Да", cancel: "Нет" }}
                                 modals={modals}>
-                                {children}
+                                <AppShell
+                                    layout={"alt"}
+                                    withBorder={false}
+                                    navbar={{
+                                        width: 160,
+                                        breakpoint: "sm",
+                                        collapsed: {
+                                            desktop: false,
+                                            mobile: true,
+                                        },
+                                    }}>
+                                    <AppShellNavbarWrapper>
+                                        <Navbar />
+                                    </AppShellNavbarWrapper>
+                                    <AppShellMainWrapper>
+                                        {children}
+                                    </AppShellMainWrapper>
+                                    <AppShellFooterWrapper>
+                                        <Footer />
+                                    </AppShellFooterWrapper>
+                                </AppShell>
                             </ModalsProvider>
                         </ReduxProvider>
                         <Notifications position="bottom-right" />