Filters panel and navbar buttons

frontend/src/app.jsx

@@ -5,6 +5,7 @@ import { useState } from 'preact/hooks'
 
 // Components
 import NavBar from './components/NavBar/navbar'
+import FiltersPanel from './components/Filters/panel'
 import Button from './components/Buttons/button'
 
 // Styles
@@ -30,6 +31,8 @@ export function App() {
       </Button>
 
       <NavBar></NavBar>
+      
+      <FiltersPanel></FiltersPanel>
     </>
   )
 }

frontend/src/components/Filters/panel.jsx

@@ -0,0 +1,16 @@
+import { h } from 'preact' // Necessary ?
+import styles from './panel.module.css'
+
+function FiltersPanel({ children, className, ...rest}) {
+
+    return (
+        <div
+            className={styles.navbar}
+            {...rest} // Allow passing other props like 'disabled', 'type', etc.
+            >
+                {children}
+        </div>
+    )
+}
+
+export default FiltersPanel;

frontend/src/components/Filters/panel.module.css

@@ -0,0 +1,19 @@
+.navbar {
+    position: absolute;
+    top: 13rem;
+    bottom: 3rem;
+    right: 3rem;
+    /* left: 12rem; */
+    left: 21rem;
+    
+    margin: 1rem;
+    width: 18rem;
+    min-height: 40rem;
+    
+    background-color: #1a1a1a;
+    color: #eaeaea;
+
+    border: #3a3a3a solid;
+    border-width: .1em;
+    border-radius: .5rem;
+}

frontend/src/components/NavBar/navbar.jsx

@@ -4,12 +4,15 @@ import styles from './navbar.module.css'
 function NavBar({ children, className, ...rest}) {
 
     return (
-        <div
+        <nav
             className={styles.navbar}
             {...rest} // Allow passing other props like 'disabled', 'type', etc.
             >
                 {children}
-        </div>
+            <a href='index'> Home </a>
+            <a href='settings'> Mods </a>
+            <a href='settings'> Modpacks </a>
+        </nav>
     )
 }
 

frontend/src/components/NavBar/navbar.module.css

@@ -14,5 +14,25 @@
     border-width: .1em;
     border-radius: .5rem;
 
+    display: flex;
+    flex-direction: row;
+    align-items: center; /* Vertically align items along the cross axis */
+    padding-left: 1em;
+}
 
+.navbar > a {
+    position: relative;
+    /* margin: 0 1.2em; */
+    padding: .2em .7em;
+
+    color: #eaeaea;
+    border-radius: .5rem;
+    font-size: 1.4rem;
+    font-weight: 500;
+
+    transition: 200ms;
+}
+
+.navbar > a:hover {
+    background-color: #eaeaea10;
 }