Merge pull request #234 from RMoodsTeam/212-bug-fix-navbar-being-hidd…

…en-when-resizing 212: Put nav items into Group component
RMoodsTeam · Dec 8, 2024 · 307cc33 · 307cc33
2 parents aff9706 + 25687ab
commit 307cc33
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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));
+}