Merge pull request #55 from JimTheCat/CU-8696pb2r2_Create-a-navbar_Pa…

…tryk-Kosiski Cu 8696pb2r2 create a navbar patryk kosiski
JimTheCat · Nov 17, 2024 · a4a1c75 · a4a1c75
2 parents b871e5c + b1875a8
commit a4a1c75
Show file tree

Hide file tree

Showing 9 changed files with 191 additions and 88 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>MeowHub</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -11,11 +11,11 @@
     "test": "jest"
   },
   "dependencies": {
-    "@mantine/core": "^7.13.3",
-    "@mantine/dates": "^7.13.3",
-    "@mantine/form": "^7.13.3",
-    "@mantine/hooks": "^7.13.3",
-    "@tabler/icons-react": "^2.35.0",
+    "@mantine/core": "^7.14.1",
+    "@mantine/dates": "^7.14.1",
+    "@mantine/form": "^7.14.1",
+    "@mantine/hooks": "^7.14.1",
+    "@tabler/icons-react": "^3.22.0",
     "dayjs": "^1.11.13",
     "i18next": "^23.16.1",
     "react": "^18.3.1",

diff --git a/frontend/public/mh_logo.svg b/frontend/public/mh_logo.svg
diff --git a/frontend/src/Components/Buttons/Menu/MenuButton.tsx b/frontend/src/Components/Buttons/Menu/MenuButton.tsx
@@ -0,0 +1,23 @@
+import {Button} from "@mantine/core";
+import React from "react";
+
+type MenuButtonProps = {
+  text: string;
+  icon: React.ReactNode;
+}
+
+export const MenuButton = (props: MenuButtonProps) => {
+  return (
+    <Button
+      variant={"subtle"}
+      size={"md"}
+      leftSection={props.icon}
+      autoContrast
+      fullWidth
+      justify={"flex-start"}
+      color={"gray"}
+    >
+      {props.text}
+    </Button>
+  );
+}
diff --git a/frontend/src/Components/Buttons/Menu/index.tsx b/frontend/src/Components/Buttons/Menu/index.tsx
@@ -0,0 +1 @@
+export * from './MenuButton';
diff --git a/frontend/src/Components/Layout/Layout.tsx b/frontend/src/Components/Layout/Layout.tsx
@@ -1,19 +1,15 @@
-import {AppShell, Skeleton} from "@mantine/core";
+import {AppShell} from "@mantine/core";
 import {Outlet} from "react-router-dom";
+import {Navbar} from "../Navbar";
 
 export const Layout = () => {
   return (
     <AppShell
       navbar={{width: 300, breakpoint: 'xs'}}
     >
       {/*TODO: Modify a navbar*/}
-      <AppShell.Navbar p="md">
-        Navbar
-        {Array(15)
-          .fill(0)
-          .map((_, index) => (
-            <Skeleton key={index} h={28} mt="sm" animate={false}/>
-          ))}
+      <AppShell.Navbar withBorder={false}>
+        <Navbar/>
       </AppShell.Navbar>
       <AppShell.Main>
         <Outlet/>