k

src/components/Navbar/Navbar.module.css

@@ -3,13 +3,21 @@
     padding: var(--mantine-spacing-md);
     display: flex;
     flex-direction: column;
-    border-right: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
     align-items: center;
+    @mixin dark {
+        background-color: var(--mantine-color-body);
+        box-shadow: 0 2px 4px var(--mantine-color-dark-7), 0 4px 24px var(--mantine-color-dark-7);
+    }
+    @mixin light {
+        background-color: #f9f9f9;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 4px 24px rgba(0, 0, 0, .08);
+    }
+    border-radius: rem(20);
+    width: 100%;
+    justify-content: space-between;
 }
 
 .navbarMain {
-    flex: 1;
-    margin-top: rem(50px);
     width: 100%;
 }
 

src/components/Navbar/Navbar.tsx

@@ -1,4 +1,4 @@
-import {Center, Image, rem, Stack, Tooltip, UnstyledButton, useMantineColorScheme} from '@mantine/core';
+import {Center, Flex, Image, rem, Stack, Tooltip, UnstyledButton, useMantineColorScheme} from '@mantine/core';
 import {
     IconBarcode,
     IconBox,
@@ -96,18 +96,22 @@ export function Navbar() {
 
     return (
         <nav className={classes.navbar}>
-            <Center>
-                <Image
-                    // style={{filter: "drop-shadow(0 0 30px #fff)"}}
-                    src={colorScheme == "dark" ? "/icons/logo-light.png" : "/icons/logo.png"}
-                />
-            </Center>
+            <Flex direction={"column"} gap={rem(30)}>
+                <Center
+                    p={rem(5)}
+                >
+                    <Image
+                        // style={{filter: "drop-shadow(0 0 30px #fff)"}}
+                        src={colorScheme == "dark" ? "/icons/logo-light.png" : "/icons/logo.png"}
+                    />
+                </Center>
 
-            <div className={classes.navbarMain}>
-                <Stack justify="center" gap={rem(10)}>
-                    {links}
-                </Stack>
-            </div>
+                <div className={classes.navbarMain}>
+                    <Stack justify="center" gap={rem(10)}>
+                        {links}
+                    </Stack>
+                </div>
+            </Flex>
 
             <Stack w={"100%"} justify="center" gap={0}>
                 <NavbarLink icon={IconDashboard}