From 067ff488d26ac37bc738f47df5b970b7e8525586 Mon Sep 17 00:00:00 2001
From: DragonSlayer_14 <dragonslayer14@murena.io>
Date: Sat, 13 Jun 2026 18:53:29 +0200
Subject: [PATCH] =?UTF-8?q?Feat:=20Optimiert=20Navbar=20mit=20Mobile-Men?=
 =?UTF-8?q?=C3=BC,=20passt=20Margin-Styles=20f=C3=BCr=20`<main>`=20an=20un?=
 =?UTF-8?q?d=20erg=C3=A4nzt=20CSS-Kommentare?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/styles/app.scss              |  9 +++++++
 assets/styles/root/root.css         |  5 ++++
 templates/widgets/nav_bar.html.twig | 41 ++++++++++++++++++++++++-----
 3 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/assets/styles/app.scss b/assets/styles/app.scss
index 331e37d..6bb8a8f 100644
--- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -593,3 +593,12 @@ pre {
     white-space: nowrap;
     direction: ltr;
 }
+
+// =============================================================================
+// CSS Settings
+// =============================================================================
+
+main {
+    margin-top: 64px;
+    margin-bottom: 45px;
+}
diff --git a/assets/styles/root/root.css b/assets/styles/root/root.css
index 5043a72..fceec09 100644
--- a/assets/styles/root/root.css
+++ b/assets/styles/root/root.css
@@ -2,6 +2,11 @@ body {
     height: 100vh;
 }
 
+main {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+}
+
 /* Scanline sweep */
 .scanline {
     position: absolute;
diff --git a/templates/widgets/nav_bar.html.twig b/templates/widgets/nav_bar.html.twig
index e6c5594..0fbc4e4 100644
--- a/templates/widgets/nav_bar.html.twig
+++ b/templates/widgets/nav_bar.html.twig
@@ -3,22 +3,49 @@
      aria-label="Hauptnavigation">
     <div class="container d-flex justify-content-between align-items-center">
 
-        {# Links: Logo + CTDRA (als Block zusammengefasst) #}
+        {# Links: Logo + CTDRA #}
         <a href="/" id="nav-site-name" class="d-flex align-items-center gap-2 text-decoration-none">
             <img src="{{ asset('images/logo.png') }}"
                  alt="CTDRA Logo"
-                 id="nav-brand-logo">
+                 id="nav-brand-logo"
+                 style="height: 40px; width: auto;">
             <span class="fw-bold text-white">CTDRA</span>
         </a>
 
-        {# Mitte: Links zentriert mit mx-auto #}
+        {# Mitte: Desktop-Links zentriert #}
         <div class="d-none d-md-flex align-items-center gap-4 mx-auto">
             <a href="#" class="text-label-sm text-decoration-none nav-link-ds">News</a>
-            <a href="#" class="text-decoration-none nav-link-ds">Projects</a>
-            <a href="#" class="text-decoration-none nav-link-ds">About Me</a>
+            <a href="#" class="text-label-sm text-decoration-none nav-link-ds">Projects</a>
+            <a href="#" class="text-label-sm text-decoration-none nav-link-ds">About Me</a>
         </div>
 
-        {# Rechts: Platzhalter #}
-        <div>&nbsp;</div>
+        {# Rechts: Hamburger-Button (nur Mobile) + Platzhalter für Desktop #}
+        <div class="d-flex align-items-center">
+            {# Hamburger Button für Mobile mit Material Icon #}
+            <button class="navbar-toggler d-md-none border-0 text-white p-0"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#mobile-menu"
+                    aria-controls="mobile-menu"
+                    aria-expanded="false"
+                    aria-label="Navigation umschalten">
+                <span class="material-symbols-outlined">menu</span>
+            </button>
+
+            {# Platzhalter für Desktop (hält Balance) #}
+            <div class="d-none d-md-block">&nbsp;</div>
+        </div>
+
+    </div>
+
+    {# Mobile Menu Container (Collapsible) #}
+    <div class="collapse d-md-none" id="mobile-menu">
+        <div class="container py-3">
+            <div class="d-flex flex-column gap-3">
+                <a href="#" class="text-label-sm text-decoration-none text-white fs-6">News</a>
+                <a href="#" class="text-label-sm text-decoration-none text-white fs-6">Projects</a>
+                <a href="#" class="text-label-sm text-decoration-none text-white fs-6">About Me</a>
+            </div>
+        </div>
     </div>
 </nav>