From b2753a9e07e42834fb59e289f1aeb2010ebf6580 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patryk=20K=C5=82osi=C5=84ski?= <klosu10@gmail.com>
Date: Mon, 16 Dec 2024 00:00:44 +0100
Subject: [PATCH] fix: Repair navbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Make the navbar responsive depending on height

Refs: CU-869739xd3
Signed-off-by: Patryk Kłosiński <klosu10@gmail.com>
---
 frontend/src/Components/Navbar/Navbar.tsx | 46 +++++++++--------------
 1 file changed, 18 insertions(+), 28 deletions(-)

diff --git a/frontend/src/Components/Navbar/Navbar.tsx b/frontend/src/Components/Navbar/Navbar.tsx
index ab9ee53..55d7bd1 100644
--- a/frontend/src/Components/Navbar/Navbar.tsx
+++ b/frontend/src/Components/Navbar/Navbar.tsx
@@ -1,4 +1,4 @@
-import {AppShell, Avatar, Box, Card, Group, Image, Stack, Text} from "@mantine/core";
+import {AppShell, Avatar, Card, Group, Image, ScrollArea, Stack, Text} from "@mantine/core";
 import MeowHubLogo from "../../Assets/mh_logo.svg";
 import {MenuButton} from "../Buttons/Menu";
 import {
@@ -56,33 +56,23 @@ export const Navbar = () => {
       </AppShell.Section>
 
       {/*Menu*/}
-      <Box
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          flexGrow: 1,
-          height: "100%",
-        }}
-      >
-        <Card mt={"lg"} p={"xs"} display={"flex"} h={"100%"} withBorder>
-          <Stack justify={"space-between"} h={"100%"}>
-            <Box>
-              <MenuButton icon={<IconHome/>} text={"Strona główna"} href={"/mainpage"}/>
-              <MenuButton icon={<IconZoom/>} text={"Wyszukaj"} href={"/search"}/>
-              <MenuButton icon={<IconPencil/>} text={"Napisz post"} href={"/createpost"}/>
-              <MenuButton icon={<IconUsers/>} text={"Znajomi"} href={"/friends"}/>
-              <MenuButton icon={<IconUsersGroup/>} text={"Grupy"} href={"/groups"}/>
-              <MenuButton icon={<IconUserPlus/>} text={"Obserwowani"} href={"/following"}/>
-              <MenuButton icon={<IconUserHeart/>} text={"Matching"} href={"placeholder5"}/>
-              <MenuButton icon={<IconMail/>} text={"Wiadomości"} href={"/messages"}/>
-            </Box>
-            <Box>
-              <MenuButton icon={<IconSettings/>} text={"Ustawienia"} href={"/settings"}/>
-              <LogOut/>
-            </Box>
-          </Stack>
-        </Card>
-      </Box>
+
+      <Card mt={"lg"} p={"xs"} h={"100%"} withBorder>
+        <AppShell.Section grow component={ScrollArea}>
+          <MenuButton icon={<IconHome/>} text={"Strona główna"} href={"/mainpage"}/>
+          <MenuButton icon={<IconZoom/>} text={"Wyszukaj"} href={"/search"}/>
+          <MenuButton icon={<IconPencil/>} text={"Napisz post"} href={"/createpost"}/>
+          <MenuButton icon={<IconUsers/>} text={"Znajomi"} href={"/friends"}/>
+          <MenuButton icon={<IconUsersGroup/>} text={"Grupy"} href={"/groups"}/>
+          <MenuButton icon={<IconUserPlus/>} text={"Obserwowani"} href={"/following"}/>
+          <MenuButton icon={<IconUserHeart/>} text={"Matching"} href={"placeholder5"}/>
+          <MenuButton icon={<IconMail/>} text={"Wiadomości"} href={"/messages"}/>
+        </AppShell.Section>
+        <AppShell.Section>
+          <MenuButton icon={<IconSettings/>} text={"Ustawienia"} href={"/settings"}/>
+          <LogOut/>
+        </AppShell.Section>
+      </Card>
     </>
   );
 }
\ No newline at end of file