feat: navbar and footer

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);

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>
     );
 }

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;