From 25687abda4925bb6533cf7bcaf759c24d4a72132 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Ja=C5=82oszy=C5=84ski?=
 <sebastian.jaloszynski@student.put.poznan.pl>
Date: Sat, 7 Dec 2024 11:56:02 +0100
Subject: [PATCH] 212: Put nav items into Group component

---
 frontend/src/components/DefaultNavbar.tsx     | 19 ++++++-------------
 frontend/src/components/navbar/Navbar.tsx     | 19 ++++++-------------
 .../sidebar/SidebarNested.module.css          | 18 ++++++------------
 3 files changed, 18 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/DefaultNavbar.tsx b/frontend/src/components/DefaultNavbar.tsx
index 5ebb1816..5f1a4ef8 100644
--- a/frontend/src/components/DefaultNavbar.tsx
+++ b/frontend/src/components/DefaultNavbar.tsx
@@ -1,4 +1,4 @@
-import { Anchor, Card, Flex, Grid } from '@mantine/core';
+import { Anchor, Card, Flex, Grid, Group } from '@mantine/core';
 import ThemeSwitch from './navbar/ThemeSwitch.tsx';
 
 const LeftNavItems = () => {
@@ -25,20 +25,13 @@ const RightNavItems = () => {
 const DefaultNavbar = () => {
   return (
     <Card
-      style={{ margin: 0, borderRadius: 0, marginBottom: 0, height: '10vh' }}
+      style={{ margin: 0, borderRadius: 0, marginBottom: 0 }}
     >
       <nav>
-        <Grid>
-          <Grid.Col span={4}>
-            <LeftNavItems />
-          </Grid.Col>
-          <Grid.Col span={4}>
-            <div />
-          </Grid.Col>
-          <Grid.Col span={4}>
-            <RightNavItems />
-          </Grid.Col>
-        </Grid>
+        <Group justify='space-between'>
+          <LeftNavItems />
+          <RightNavItems />
+        </Group>
       </nav>
     </Card>
   );
diff --git a/frontend/src/components/navbar/Navbar.tsx b/frontend/src/components/navbar/Navbar.tsx
index d8b8c3ab..49f90af4 100644
--- a/frontend/src/components/navbar/Navbar.tsx
+++ b/frontend/src/components/navbar/Navbar.tsx
@@ -1,6 +1,6 @@
 import UserMenu from './UserMenu';
 import ThemeSwitch from './ThemeSwitch';
-import { Anchor, Card, Flex, Grid } from '@mantine/core';
+import { Anchor, Card, Flex, Group } from '@mantine/core';
 import StatusIndicator from './StatusIndicator';
 import RateLimitStatus from './RateLimitStatus.tsx';
 
@@ -31,20 +31,13 @@ const RightNavItems = () => {
 const Navbar = () => {
   return (
     <Card
-      style={{ margin: 0, borderRadius: 0, marginBottom: 0, height: '10vh' }}
+      style={{ margin: 0, borderRadius: 0, marginBottom: 0 }}
     >
       <nav>
-        <Grid>
-          <Grid.Col span={4}>
-            <LeftNavItems />
-          </Grid.Col>
-          <Grid.Col span={4}>
-            <div />
-          </Grid.Col>
-          <Grid.Col span={4}>
-            <RightNavItems />
-          </Grid.Col>
-        </Grid>
+        <Group justify='space-between'>
+          <LeftNavItems />
+          <RightNavItems />
+        </Group>
       </nav>
     </Card>
   );
diff --git a/frontend/src/components/sidebar/SidebarNested.module.css b/frontend/src/components/sidebar/SidebarNested.module.css
index 51a48b26..fd325c59 100644
--- a/frontend/src/components/sidebar/SidebarNested.module.css
+++ b/frontend/src/components/sidebar/SidebarNested.module.css
@@ -1,14 +1,11 @@
 .navbar {
-  background-color: light-dark(
-    var(--mantine-color-white),
-    var(--mantine-color-dark-6)
-  );
+  background-color: light-dark(var(--mantine-color-white),
+      var(--mantine-color-dark-6));
   padding: var(--mantine-spacing-md);
   padding-bottom: 0;
   display: flex;
   flex-direction: column;
-  border-right: rem(1px) solid
-    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  border-right: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
 }
 
 .header {
@@ -18,12 +15,10 @@
   max-height: 10%;
   min-height: 10%;
   padding: var(--mantine-spacing-md);
-  padding-top: 0;
   margin-left: calc(var(--mantine-spacing-sm) * -1);
   margin-right: calc(var(--mantine-spacing-sm) * -1);
   color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
-  border-bottom: rem(1px) solid
-    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
 }
 
 .links {
@@ -40,6 +35,5 @@
 .footer {
   margin-left: calc(var(--mantine-spacing-md) * -1);
   margin-right: calc(var(--mantine-spacing-md) * -1);
-  //border-top: rem(1px) solid
-    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
-}
+  border-top: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
\ No newline at end of file