From be034ebbd07feb27c04eb0218ad169f0b7d64512 Mon Sep 17 00:00:00 2001
From: AlexSserb <aserbin190@gmail.com>
Date: Tue, 19 Aug 2025 11:59:58 +0400
Subject: [PATCH] feat: navbar and footer

---
 .../deals/components/shared/Board/Board.tsx   | 17 +++----
 .../components/shared/BoardMenu/BoardMenu.tsx |  5 +-
 .../CreateStatusButton.module.css             |  2 +-
 .../deals/components/shared/Header/Header.tsx | 14 ++----
 .../StatusColumnWrapper.module.css            |  7 ++-
 .../StatusColumnWrapper.tsx                   |  2 +-
 src/app/deals/page.tsx                        |  2 +-
 src/app/global.css                            |  2 +
 src/app/layout.tsx                            | 28 ++++++++++-
 .../AppShellFooterWrapper.tsx                 | 14 ++++++
 .../AppShellWrappers/AppShellMainWrapper.tsx  | 14 ++++++
 .../AppShellNavbarWrapper.tsx                 | 14 ++++++
 .../layout/Footer/Footer.module.css           | 32 +++++++++++++
 src/components/layout/Footer/Footer.tsx       | 31 +++++++++++++
 .../layout/Footer/FooterButtons.tsx           | 39 ++++++++++++++++
 .../layout/Footer/FooterClickable.tsx         | 29 ++++++++++++
 .../layout/Navbar/Navbar.module.css           | 38 +++++++++++++++
 src/components/layout/Navbar/Navbar.tsx       | 46 +++++++++++++++++++
 .../layout/Navbar/NavbarClickable.tsx         | 30 ++++++++++++
 src/components/layout/Navbar/NavbarLinks.tsx  | 36 +++++++++++++++
 .../layout/PageBlock/PageBlock.module.css     | 17 ++++---
 .../ColorSchemeToggle.module.css              | 23 +++++++++-
 .../ColorSchemeToggle/ColorSchemeToggle.tsx   | 10 ++--
 src/components/ui/Logo/Logo.tsx               | 38 +++++++++++++++
 24 files changed, 452 insertions(+), 38 deletions(-)
 create mode 100644 src/components/layout/AppShellWrappers/AppShellFooterWrapper.tsx
 create mode 100644 src/components/layout/AppShellWrappers/AppShellMainWrapper.tsx
 create mode 100644 src/components/layout/AppShellWrappers/AppShellNavbarWrapper.tsx
 create mode 100644 src/components/layout/Footer/Footer.module.css
 create mode 100644 src/components/layout/Footer/Footer.tsx
 create mode 100644 src/components/layout/Footer/FooterButtons.tsx
 create mode 100644 src/components/layout/Footer/FooterClickable.tsx
 create mode 100644 src/components/layout/Navbar/Navbar.module.css
 create mode 100644 src/components/layout/Navbar/Navbar.tsx
 create mode 100644 src/components/layout/Navbar/NavbarClickable.tsx
 create mode 100644 src/components/layout/Navbar/NavbarLinks.tsx
 create mode 100644 src/components/ui/Logo/Logo.tsx

diff --git a/src/app/deals/components/shared/Board/Board.tsx b/src/app/deals/components/shared/Board/Board.tsx
index d721655..ac09136 100644
--- a/src/app/deals/components/shared/Board/Board.tsx
+++ b/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={"Редактирование доски"}
diff --git a/src/app/deals/components/shared/BoardMenu/BoardMenu.tsx b/src/app/deals/components/shared/BoardMenu/BoardMenu.tsx
index e5cf87a..134481c 100644
--- a/src/app/deals/components/shared/BoardMenu/BoardMenu.tsx
+++ b/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()}>
diff --git a/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.module.css b/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.module.css
index 566eef3..f753052 100644
--- a/src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.module.css
+++ b/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;
diff --git a/src/app/deals/components/shared/Header/Header.tsx b/src/app/deals/components/shared/Header/Header.tsx
index ce5ecd0..c6fa8c1 100644
--- a/src/app/deals/components/shared/Header/Header.tsx
+++ b/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>
         );
     };
diff --git a/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css b/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css
index ce58f41..3a1a715 100644
--- a/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css
+++ b/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);
     }
diff --git a/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.tsx b/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.tsx
index 2a76e42..0a8d9bf 100644
--- a/src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.tsx
+++ b/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>
diff --git a/src/app/deals/page.tsx b/src/app/deals/page.tsx
index 15e6cf7..8c129f9 100644
--- a/src/app/deals/page.tsx
+++ b/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>
diff --git a/src/app/global.css b/src/app/global.css
index cb37267..647ca84 100644
--- a/src/app/global.css
+++ b/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 {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index aa7a7bf..b07d8cf 100644
--- a/src/app/layout.tsx
+++ b/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" />
diff --git a/src/components/layout/AppShellWrappers/AppShellFooterWrapper.tsx b/src/components/layout/AppShellWrappers/AppShellFooterWrapper.tsx
new file mode 100644
index 0000000..7b0eeb6
--- /dev/null
+++ b/src/components/layout/AppShellWrappers/AppShellFooterWrapper.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import { FC, ReactNode } from "react";
+import { AppShell } from "@mantine/core";
+
+type Props = {
+    children: ReactNode;
+};
+
+const AppShellFooterWrapper: FC<Props> = ({ children }) => {
+    return <AppShell.Footer hiddenFrom={"sm"}>{children}</AppShell.Footer>;
+};
+
+export default AppShellFooterWrapper;
diff --git a/src/components/layout/AppShellWrappers/AppShellMainWrapper.tsx b/src/components/layout/AppShellWrappers/AppShellMainWrapper.tsx
new file mode 100644
index 0000000..b21b660
--- /dev/null
+++ b/src/components/layout/AppShellWrappers/AppShellMainWrapper.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import { FC, ReactNode } from "react";
+import { AppShell } from "@mantine/core";
+
+type Props = {
+    children: ReactNode;
+};
+
+const AppShellMainWrapper: FC<Props> = ({ children }) => {
+    return <AppShell.Main>{children}</AppShell.Main>;
+};
+
+export default AppShellMainWrapper;
diff --git a/src/components/layout/AppShellWrappers/AppShellNavbarWrapper.tsx b/src/components/layout/AppShellWrappers/AppShellNavbarWrapper.tsx
new file mode 100644
index 0000000..ce18ca6
--- /dev/null
+++ b/src/components/layout/AppShellWrappers/AppShellNavbarWrapper.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import { FC, ReactNode } from "react";
+import { AppShell } from "@mantine/core";
+
+type Props = {
+    children: ReactNode;
+};
+
+const AppShellNavbarWrapper: FC<Props> = ({ children }) => {
+    return <AppShell.Navbar>{children}</AppShell.Navbar>;
+};
+
+export default AppShellNavbarWrapper;
diff --git a/src/components/layout/Footer/Footer.module.css b/src/components/layout/Footer/Footer.module.css
new file mode 100644
index 0000000..40513d0
--- /dev/null
+++ b/src/components/layout/Footer/Footer.module.css
@@ -0,0 +1,32 @@
+.container {
+    @mixin light {
+        border-top: solid gray 2px;
+    }
+    @mixin dark {
+        border-top: solid var(--mantine-color-dark-7) 2px;
+    }
+}
+
+.link {
+    width: 100%;
+    height: rem(50px);
+    border-radius: var(--mantine-radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    @mixin light {
+        color: var(--mantine-color-gray-7);
+    }
+    @mixin dark {
+        color: var(--mantine-color-dark-0);
+    }
+
+    &[data-active] {
+        &,
+        &:hover {
+            color: var(--mantine-color-blue-light-color);
+        }
+    }
+}
diff --git a/src/components/layout/Footer/Footer.tsx b/src/components/layout/Footer/Footer.tsx
new file mode 100644
index 0000000..1e77081
--- /dev/null
+++ b/src/components/layout/Footer/Footer.tsx
@@ -0,0 +1,31 @@
+import { IconCircleDotted, IconLayoutKanban } from "@tabler/icons-react";
+import FooterButtons from "@/components/layout/Footer/FooterButtons";
+
+const buttonsData = [
+    {
+        icon: IconLayoutKanban,
+        label: "Сделки",
+        href: "/deals",
+    },
+    {
+        icon: IconCircleDotted,
+        label: "Label 1",
+        href: "/oiiai",
+    },
+    {
+        icon: IconCircleDotted,
+        label: "Label 2",
+        href: "/opaopa",
+    },
+    {
+        icon: IconCircleDotted,
+        label: "Label 3",
+        href: "/hihihaha",
+    },
+];
+
+const Footer = () => {
+    return <FooterButtons buttonsData={buttonsData} />;
+};
+
+export default Footer;
diff --git a/src/components/layout/Footer/FooterButtons.tsx b/src/components/layout/Footer/FooterButtons.tsx
new file mode 100644
index 0000000..fad5d30
--- /dev/null
+++ b/src/components/layout/Footer/FooterButtons.tsx
@@ -0,0 +1,39 @@
+import { IconPlus } from "@tabler/icons-react";
+import { Group, Stack, Text } from "@mantine/core";
+import FooterClickable from "@/components/layout/Footer/FooterClickable";
+import styles from "./Footer.module.css";
+
+type LinkData = {
+    icon: typeof IconPlus;
+    label: string;
+    href: string;
+};
+
+type Props = {
+    buttonsData: LinkData[];
+};
+
+const FooterButtons = ({ buttonsData }: Props) => {
+    return (
+        <Group
+            className={styles.container}
+            p={"xs"}
+            wrap={"nowrap"}
+            justify={"space-between"}>
+            {buttonsData.map(data => (
+                <FooterClickable
+                    href={data.href}
+                    key={data.label}>
+                    <Stack
+                        gap={0}
+                        align={"center"}>
+                        <data.icon />
+                        <Text>{data.label}</Text>
+                    </Stack>
+                </FooterClickable>
+            ))}
+        </Group>
+    );
+};
+
+export default FooterButtons;
diff --git a/src/components/layout/Footer/FooterClickable.tsx b/src/components/layout/Footer/FooterClickable.tsx
new file mode 100644
index 0000000..9c780ea
--- /dev/null
+++ b/src/components/layout/Footer/FooterClickable.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { ReactNode } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { UnstyledButton } from "@mantine/core";
+import styles from "./Footer.module.css";
+
+type Props = {
+    href: string;
+    children: ReactNode;
+};
+
+const FooterClickable = ({ children, href }: Props) => {
+    const pathname = usePathname();
+    const router = useRouter();
+
+    const onClick = () => router.push(href);
+
+    return (
+        <UnstyledButton
+            onClick={onClick}
+            className={styles.link}
+            data-active={pathname === href || undefined}>
+            {children}
+        </UnstyledButton>
+    );
+};
+
+export default FooterClickable;
diff --git a/src/components/layout/Navbar/Navbar.module.css b/src/components/layout/Navbar/Navbar.module.css
new file mode 100644
index 0000000..7936c1b
--- /dev/null
+++ b/src/components/layout/Navbar/Navbar.module.css
@@ -0,0 +1,38 @@
+.link {
+    width: 100%;
+    height: rem(50px);
+    border-radius: var(--mantine-radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    @mixin light {
+        color: var(--mantine-color-gray-7);
+    }
+    @mixin dark {
+        color: var(--mantine-color-dark-0);
+    }
+
+    &:hover {
+        @mixin light {
+            background-color: var(--mantine-color-gray-1);
+        }
+        @mixin dark {
+            background-color: var(--mantine-color-dark-5);
+        }
+    }
+
+    &[data-active] {
+        &,
+        &:hover {
+            @mixin light {
+                background-color: var(--color-light-aqua);
+            }
+            @mixin dark {
+                background-color: var(--mantine-color-dark-6);
+            }
+            color: var(--mantine-color-blue-light-color);
+        }
+    }
+}
diff --git a/src/components/layout/Navbar/Navbar.tsx b/src/components/layout/Navbar/Navbar.tsx
new file mode 100644
index 0000000..98a6928
--- /dev/null
+++ b/src/components/layout/Navbar/Navbar.tsx
@@ -0,0 +1,46 @@
+import { IconCircleDotted, IconLayoutKanban } from "@tabler/icons-react";
+import { Flex } from "@mantine/core";
+import PageBlock from "@/components/layout/PageBlock/PageBlock";
+import { ColorSchemeToggle } from "@/components/ui/ColorSchemeToggle/ColorSchemeToggle";
+import Logo from "@/components/ui/Logo/Logo";
+import NavbarLinks from "./NavbarLinks";
+
+const linksData = [
+    {
+        icon: IconLayoutKanban,
+        label: "Сделки",
+        href: "/deals",
+    },
+    {
+        icon: IconCircleDotted,
+        label: "Назад",
+        href: "/oiiai",
+    },
+];
+
+const Navbar = () => {
+    return (
+        <PageBlock
+            style={{
+                marginBlock: "var(--mantine-spacing-md)",
+                marginLeft: "var(--mantine-spacing-md)",
+            }}
+            fullHeight>
+            <Flex
+                direction={"column"}
+                h={"100%"}>
+                <Logo title={"Fulfillment & Delivery"} />
+                <Flex
+                    mx={"xs"}
+                    direction={"column"}
+                    justify={"space-between"}
+                    h={"100%"}>
+                    <NavbarLinks linksData={linksData} />
+                    <ColorSchemeToggle />
+                </Flex>
+            </Flex>
+        </PageBlock>
+    );
+};
+
+export default Navbar;
diff --git a/src/components/layout/Navbar/NavbarClickable.tsx b/src/components/layout/Navbar/NavbarClickable.tsx
new file mode 100644
index 0000000..935884a
--- /dev/null
+++ b/src/components/layout/Navbar/NavbarClickable.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { ReactNode } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { UnstyledButton } from "@mantine/core";
+import styles from "./Navbar.module.css";
+
+type Props = {
+    href: string;
+    children: ReactNode;
+    active?: boolean;
+};
+
+const NavbarClickable = ({ children, href, active = false }: Props) => {
+    const pathname = usePathname();
+    const router = useRouter();
+
+    const onClick = () => router.push(href);
+
+    return (
+        <UnstyledButton
+            onClick={onClick}
+            className={styles.link}
+            data-active={active || pathname === href || undefined}>
+            {children}
+        </UnstyledButton>
+    );
+};
+
+export default NavbarClickable;
diff --git a/src/components/layout/Navbar/NavbarLinks.tsx b/src/components/layout/Navbar/NavbarLinks.tsx
new file mode 100644
index 0000000..86665a6
--- /dev/null
+++ b/src/components/layout/Navbar/NavbarLinks.tsx
@@ -0,0 +1,36 @@
+import { IconPlus } from "@tabler/icons-react";
+import { Stack, Tooltip } from "@mantine/core";
+import NavbarClickable from "./NavbarClickable";
+
+type LinkData = {
+    icon: typeof IconPlus;
+    label: string;
+    href: string;
+};
+
+type Props = {
+    linksData: LinkData[];
+};
+
+const NavbarLinks = ({ linksData }: Props) => {
+    return (
+        <Stack gap={"xs"}>
+            {linksData.map((linkData, index) => (
+                <Tooltip
+                    key={index}
+                    display={!linkData.label ? "none" : "flex"}
+                    label={linkData.label}
+                    position="right"
+                    transitionProps={{ duration: 0 }}>
+                    <NavbarClickable
+                        href={linkData.href}
+                        key={linkData.label}>
+                        <linkData.icon />
+                    </NavbarClickable>
+                </Tooltip>
+            ))}
+        </Stack>
+    );
+};
+
+export default NavbarLinks;
diff --git a/src/components/layout/PageBlock/PageBlock.module.css b/src/components/layout/PageBlock/PageBlock.module.css
index 60b39b3..6aa3a1f 100644
--- a/src/components/layout/PageBlock/PageBlock.module.css
+++ b/src/components/layout/PageBlock/PageBlock.module.css
@@ -10,24 +10,29 @@
         padding: var(--mantine-spacing-md);
 
         @mixin dark {
-            box-shadow: var(--dark-thick-shadow);
+            box-shadow: var(--dark-shadow);
         }
         @mixin light {
-            box-shadow: var(--light-thick-shadow);
+            box-shadow: var(--light-shadow);
         }
     }
 }
 
-.mobile-padding-height {
-    height: 100vh;
+.mobile-margin-height {
+    height: var(--page-height);
+    @media (min-width: 48em) {
+        margin: var(--mantine-spacing-md);
+    }
 }
 
 .container-full-height {
-    min-height: calc(100vh - (var(--mantine-spacing-md) * 2));
+    min-height: var(--page-height);
+    height: var(--page-height);
+    max-height: var(--page-height);
 }
 
 .container-full-height-fixed {
-    height: calc(100vh - (var(--mantine-spacing-md) * 2));
+    height: var(--page-height);
 }
 
 .container-no-border-radius {
diff --git a/src/components/ui/ColorSchemeToggle/ColorSchemeToggle.module.css b/src/components/ui/ColorSchemeToggle/ColorSchemeToggle.module.css
index aeec4a0..26bd449 100644
--- a/src/components/ui/ColorSchemeToggle/ColorSchemeToggle.module.css
+++ b/src/components/ui/ColorSchemeToggle/ColorSchemeToggle.module.css
@@ -1,9 +1,30 @@
 .container {
+    width: 100%;
+    height: rem(50px);
+    border-radius: var(--mantine-radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    @mixin light {
+        color: var(--mantine-color-gray-7);
+    }
     @mixin dark {
-        background-color: var(--mantine-color-dark-7);
+        color: var(--mantine-color-dark-0);
+    }
+
+    &:hover {
+        @mixin light {
+            background-color: var(--mantine-color-gray-1);
+        }
+        @mixin dark {
+            background-color: var(--mantine-color-dark-6);
+        }
     }
 }
 
+
 .icon {
     width: rem(18px);
     height: rem(18px);
diff --git a/src/components/ui/ColorSchemeToggle/ColorSchemeToggle.tsx b/src/components/ui/ColorSchemeToggle/ColorSchemeToggle.tsx
index 1b5ba66..7c56aa8 100644
--- a/src/components/ui/ColorSchemeToggle/ColorSchemeToggle.tsx
+++ b/src/components/ui/ColorSchemeToggle/ColorSchemeToggle.tsx
@@ -3,7 +3,7 @@
 import { IconMoon, IconSun } from "@tabler/icons-react";
 import classNames from "classnames";
 import {
-    ActionIcon,
+    Button,
     useComputedColorScheme,
     useMantineColorScheme,
 } from "@mantine/core";
@@ -20,12 +20,12 @@ export function ColorSchemeToggle() {
     };
 
     return (
-        <ActionIcon
+        <Button
+            unstyled
             onClick={toggleColorScheme}
-            variant="default"
             size="xl"
             radius="lg"
-            aria-label="Toggle color scheme"
+            aria-label="Сменить тему"
             className={style.container}>
             <IconSun
                 className={classNames(style.icon, style.light)}
@@ -35,6 +35,6 @@ export function ColorSchemeToggle() {
                 className={classNames(style.icon, style.dark)}
                 stroke={1.5}
             />
-        </ActionIcon>
+        </Button>
     );
 }
diff --git a/src/components/ui/Logo/Logo.tsx b/src/components/ui/Logo/Logo.tsx
new file mode 100644
index 0000000..9d7ed88
--- /dev/null
+++ b/src/components/ui/Logo/Logo.tsx
@@ -0,0 +1,38 @@
+import { Center, Image, Stack, Text, Title } from "@mantine/core";
+import { myColor } from "@/theme";
+
+type Props = {
+    title?: string;
+};
+
+const Logo = ({ title }: Props) => {
+    return (
+        <Stack
+            align="center"
+            gap={0}>
+            <Image
+                src="/favicon.svg"
+                alt="LogiDex Logo"
+                w={70}
+            />
+            <Title
+                ta={"center"}
+                order={4}
+                mt={"xs"}>
+                LogiDex
+            </Title>
+            {title && (
+                <Center>
+                    <Text
+                        fz={"xs"}
+                        mb={"lg"}
+                        style={{ color: myColor[6], textAlign: "center" }}>
+                        {title}
+                    </Text>
+                </Center>
+            )}
+        </Stack>
+    );
+};
+
+export default Logo;