From 2d9b146517b7c43521a2c41bc17bdd5a5920f379 Mon Sep 17 00:00:00 2001
From: NOrtmann1 <ortmann.niklas@yahoo.de>
Date: Mon, 11 May 2026 13:14:04 +0200
Subject: [PATCH] off canvas navbar

---
 css/navbar.css      | 84 +++++++++++++++++++++++++++++++++++++++++++--
 includes/navbar.php |  6 ++--
 2 files changed, 86 insertions(+), 4 deletions(-)

diff --git a/css/navbar.css b/css/navbar.css
index eb10ce5..47160ca 100644
--- a/css/navbar.css
+++ b/css/navbar.css
@@ -102,7 +102,7 @@ CSS für den Block Navbar mit seinen Elementen nach BEM
 
     .nav__left {
         order: 1;
-        flex: 1; /* Nimmt den Platz links ein */
+        flex: 1; /* nimmt den Platz ganz links ein */
     }
 
     .nav__right {
@@ -114,7 +114,7 @@ CSS für den Block Navbar mit seinen Elementen nach BEM
     .nav__center {
         order: 3;
         flex-basis: 100%; /* Erzwingt, dass dieses Element eine eigene Zeile einnimmt */
-        justify-content: center; /* Zentriert die Links in der zweiten Zeile */
+        justify-content: center; /*zentriert die Links in der zweiten Zeile */
         padding: 0.5rem 0;
         border-top: 1px solid rgba(255,255,255,0.1); /* Optionale Trennlinie */
         margin-top: 0.5rem;
@@ -127,4 +127,84 @@ CSS für den Block Navbar mit seinen Elementen nach BEM
 
 #mobile-nav {
     display: none;
+}
+
+@media (max-width: 660px) {
+    .nav {
+        flex-direction: column;
+        padding: 10px;
+    }
+
+    .nav__left {
+        order: 1;
+        width: 100%;
+        justify-content: center;
+        margin-bottom: 0.5rem;
+    }
+
+    .nav__right {
+        order: 2;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .nav__center {
+        display: none; /* Desktop aus*/
+    }
+
+    #mobile-nav {
+        display: block;
+        order: 1;
+        background: #333d43;
+        border: none;
+        color: #fff;
+        font-size: 1.5rem;
+        padding: 0.5rem 1rem;
+        border-radius: 0.2rem;
+        cursor: pointer;
+    }
+
+    .nav__search {
+        order: 2;
+        flex-grow: 1; /* restlichen Platz ausfüllen*/
+        margin: 0;
+    }
+
+    .nav__right .nav__button, .nav__right .nav__link {
+        display: none; /* restliche navbar aus */
+    }
+    /* off canvas menu */
+    .nav__mobile-menu {
+        display: flex;
+        flex-direction: column;
+        position: fixed;
+        top: 0;
+        left: -100%; /* kommt von links */
+        width: 280px;
+        height: 100vh;
+        background: #333d43;
+        z-index: 1000;
+        transition: left 0.3s ease;
+        padding: 2rem 1rem;
+        box-shadow: 2px 0 10px rgba(0,0,0,0.5);
+        overflow-y: auto;
+    }
+
+    .nav_mobile-menu.is-active {
+        left: 0;
+    }
+
+    .nav__mobile-menu a {
+        color: #fff;
+        text-decoration: none;
+        font-size: 1.2rem;
+        font-weight: 600;
+        display: block;
+        padding: 0.5rem 1rem;
+        border-bottom: 1px solid #333d43;
+    }
+
 }
\ No newline at end of file
diff --git a/includes/navbar.php b/includes/navbar.php
index 4c14ea6..17f2f5b 100644
--- a/includes/navbar.php
+++ b/includes/navbar.php
@@ -7,16 +7,18 @@ Globales Menü, wird via PHP später in alle Seiten eingebunden
 	        <img src="images/logos/logo_full.png" alt="Logo" style="height: 50px">
 	    </a>
     </div>
+
     <!-- Mobile navbar mit Burger-Symbol -->
     <button id="mobile-nav" aria-label="Menü öffnen">
         ☰
     </button>
-    <!--
+
     <ul id="mobile-menu" class="nav__mobile-menu">
+        <li><a href="auth/login.php">Anmelden</a></li>
         <li class="nav__item"><a href="content/mathe.php">Mathe</a></li>
         <li class="nav__item"><a href="content/physik.php">Physik</a></li>
     </ul>
-    -->
+
     <!-- normale Navbar (Desktop) -->
     <div class="nav__center">
         <div class="nav__item nav__dropdown">