fix: Repair navbar

Make the navbar responsive depending on height Refs: CU-869739xd3 Signed-off-by: Patryk Kłosiński <[email protected]>
JimTheCat · Dec 15, 2024 · b2753a9 · b2753a9
1 parent 24b3c4c
commit b2753a9
Showing 1 changed file with 18 additions and 28 deletions.
diff --git 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>
     </>
   );
 }