Create Navigation component

src/components/Navigation/Navigation.jsx

@@ -0,0 +1,31 @@
+import "./styles.sass"
+import {GamepadOutlined, HistoryEduOutlined, TrendingUpOutlined} from "@mui/icons-material";
+
+export const Navigation = () => {
+    return (
+        <nav>
+            <div className="navigation">
+                <h2>Planspiele</h2>
+
+                <div className="nav-items">
+                    <div className="nav-item nav-item-active">
+                        <GamepadOutlined />
+                        <h3>Alle Spiele</h3>
+                    </div>
+                    <div className="nav-item">
+                        <TrendingUpOutlined />
+                        <h3>Wirtschaft</h3>
+                    </div>
+                    <div className="nav-item">
+                        <HistoryEduOutlined />
+                        <h3>Geschichte</h3>
+                    </div>
+                </div>
+            </div>
+            <div className="action-buttons">
+                <a href="https://docs.edu.gnm.dev" target="_blank">Hilfe</a>
+                <button className="btn btn-light">Unterstützen</button>
+            </div>
+        </nav>
+    )
+}

src/components/Navigation/styles.sass

@@ -0,0 +1,49 @@
+@use "@/styles/colors" as *
+
+nav
+  margin: 1rem 2rem
+  display: flex
+  align-items: center
+  justify-content: space-between
+
+  h2, h3
+    margin: 0
+
+.navigation
+  display: flex
+  align-items: center
+  gap: 2rem
+
+.nav-items
+  display: flex
+  align-items: center
+  gap: 1rem
+
+.nav-item
+  display: flex
+  align-items: center
+  gap: 0.5rem
+
+  h3
+    font-weight: 500
+
+  &:hover
+    cursor: pointer
+
+    h3, svg
+      color: rgba($primary, 0.8)
+
+.nav-item-active
+  h3, svg
+    color: $primary
+
+.action-buttons
+  display: flex
+  align-items: center
+  gap: 1rem
+
+  a
+    color: $text-light
+    font-size: 14pt
+    font-weight: 500
+    text-decoration: none