Merge branch 'feature/update_header' into 'dev'

Update Header

See merge request eb2342s/swe-b1-a!17

webseite/assets/css/subject.css

@@ -29,7 +29,7 @@ body {
     left: 0;
     top: 0;
     transition: transform 0.3s ease;
-    z-index: 50;
+    z-index: 40;
 }
 
 .sidebar-header {
@@ -100,7 +100,7 @@ body {
 .main-content {
     margin-left: 280px;
     width: calc(100% - 280px);
-    padding-top: 5rem;
+    padding-top: 3rem;
     transition: margin-left 0.3s ease;
 }
 
@@ -287,15 +287,6 @@ body {
     }
 }
 
-.menu-toggle {
-    padding: 0.75rem;
-    border-radius: 10px;
-    cursor: pointer;
-    display: none;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.3s ease;
-}
 
 /* Add floating animation for icons */
 @keyframes float {

webseite/assets/css/topic.css

@@ -28,7 +28,7 @@ body {
     left: 0;
     top: 0;
     transition: transform 0.3s ease;
-    z-index: 50;
+    z-index: 40;
 }
 
 .sidebar-header {
@@ -187,6 +187,16 @@ body {
         width: 100%;
         padding: 1rem;
     }
+
+    .menu-toggle {
+        display: flex !important;
+    }
+}
+
+@media (min-width: 1025px) {
+    .menu-toggle {
+        display: none;
+    }
 }
 
 /* Active nav link style */
@@ -209,12 +219,3 @@ body {
     left: 0;
     font-weight: bold;
 }
-
-.menu-toggle {
-    padding: 0.75rem;
-    border-radius: 10px;
-    cursor: pointer;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.3s ease;
-}

webseite/assets/js/sidebar.js

@@ -27,7 +27,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 right: 0;
                 bottom: 0;
                 background: rgba(0, 0, 0, 0.5);
-                z-index: 45;
+                z-index: 30;
                 transition: opacity 0.3s ease;
             `;
         document.body.appendChild(overlay);

webseite/header.php

@@ -0,0 +1,126 @@
+<!-- header.php -->
+<nav class="fixed top-0 w-full right-0 bg-white/80 backdrop-blur-lg shadow-sm z-50">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex justify-between h-16">
+            <!-- Menu Toggle Button -->
+            <div class="flex items-center space-x-4">
+
+                <button class="menu-toggle hidden text-[var(--primary-color)] border-2 border-[var(--primary-color)] w-10 h-10 flex items-center justify-center rounded-lg hover:bg-[var(--primary-color)] hover:text-white transition duration-300">
+                    <i class="fas fa-bars"></i>
+                </button>
+
+                <a href="index.php" class="flex items-center">
+                    <img src="assets/images/hsgg-logo.png" alt="HSGG Logo" class="h-10 mr-3">
+                    <span class="text-2xl font-bold text-[var(--primary-color)]">HSGG</span>
+                </a>
+            </div>
+
+            <!-- Login/Logout Button -->
+            <div class="flex items-center space-x-4">
+                <!-- Search Bar TODO: Implement search functionality -->
+                <form action="search.php" method="GET" class="relative flex items-center">
+                    <input type="text" name="query" placeholder="Suche..."
+                           class="w-64 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--primary-color)] pl-10">
+                    <i class="fas fa-search absolute left-3 text-gray-400"></i>
+                </form>
+
+                <?php
+                require_once("classes/User.php");
+                session_start();
+                if (isset($_SESSION['user']) && $_SESSION['user']->isLoggedIn()) {
+                    // Logout Button
+                    echo '<form id="logoutForm" action="logout.php" method="POST" style="display:inline;">
+                                <button id="logoutButton" class="bg-white text-[var(--primary-color)] border-2 border-[var(--primary-color)] w-10 h-10 flex items-center justify-center rounded-lg hover:bg-[var(--primary-color)] hover:text-white transition duration-300">
+                                     <i class="fas fa-sign-out-alt"></i>
+                                </button>                          
+                          </form>';
+                    // Username Dropdown - Weitere Funktionen implementierbar
+                    echo '<div class="relative">
+                              <button id="userDropdownButton" class="bg-[var(--primary-color)] text-white px-4 py-2 rounded-lg hover:bg-[var(--accent-color)] transition duration-300">' . htmlspecialchars($_SESSION['user']->getUsername()) . '</button>
+                          </div>';
+                } else {
+                    // Login Button
+                    echo '<button id="loginButton" class="bg-white text-[var(--primary-color)] border-2 border-[var(--primary-color)] w-10 h-10 flex items-center justify-center rounded-lg hover:bg-[var(--primary-color)] hover:text-white transition duration-300">
+                              <i class="fas fa-sign-in-alt"></i>
+                          </button>';
+                }
+                ?>
+            </div>
+        </div>
+    </div>
+</nav>
+
+<!-- Login Popup | erscheint nur, wenn kein Nutzer eingeloggt ist -->
+<?php
+if (!isset($_SESSION['user']) || !$_SESSION['user']->isLoggedIn()) {
+    ?>
+    <div id="loginPopup" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50" role="dialog"
+         aria-labelledby="loginTitle" aria-hidden="true">
+        <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-sm relative">
+            <button id="closePopupButton" class="absolute top-2 right-2 text-gray-500 text-xl"
+                    aria-label="Close Login Popup">&times;
+            </button>
+            <h2 id="loginTitle" class="text-2xl font-bold mb-6 text-center">Login</h2>
+            <form id="loginForm" action="login.php" method="POST">
+                <div class="mb-4">
+                    <label for="username" class="block text-gray-700 mb-2">Benutzername:</label>
+                    <input type="text" id="username" name="username" class="w-full p-2 border rounded-lg" required
+                           autofocus>
+                </div>
+                <div class="mb-4">
+                    <label for="password" class="block text-gray-700 mb-2">Passwort:</label>
+                    <input type="password" id="password" name="password" class="w-full p-2 border rounded-lg" required>
+                </div>
+                <button type="submit"
+                        class="w-full bg-[var(--primary-color)] text-white px-4 py-2 rounded-lg hover:bg-[var(--accent-color)] transition duration-300">
+                    Login
+                </button>
+            </form>
+            <div id="errorMessage" class="hidden text-red-500 text-center mt-4">Falscher Benutzername oder Passwort
+            </div>
+        </div>
+    </div>
+    <?php
+}
+?>
+
+<script>
+    // JavaScript to handle opening and closing of the login popup
+    const loginButton = document.getElementById('loginButton');
+    const loginPopup = document.getElementById('loginPopup');
+    const closePopupButton = document.getElementById('closePopupButton');
+    const usernameInput = document.getElementById('username');
+    const errorMessage = document.getElementById('errorMessage');
+
+    loginButton.addEventListener('click', function () {
+        loginPopup.classList.remove('hidden');
+        usernameInput.focus(); // Set focus to username field
+    });
+
+    closePopupButton.addEventListener('click', function () {
+        loginPopup.classList.add('hidden');
+    });
+
+    window.addEventListener('click', function (event) {
+        if (event.target === loginPopup) {
+            loginPopup.classList.add('hidden');
+        }
+    });
+
+    // Schließe Popup mit ESC
+    document.addEventListener('keydown', function (event) {
+        if (event.key === "Escape" && !loginPopup.classList.contains('hidden')) {
+            loginPopup.classList.add('hidden');
+        }
+    });
+
+    // Zeige Fehlermeldung beim Login an
+    window.addEventListener('DOMContentLoaded', (event) => {
+        const urlParams = new URLSearchParams(window.location.search);
+        if (urlParams.has('error') && urlParams.get('error') === '1') {
+            loginPopup.classList.remove('hidden');
+            errorMessage.classList.remove('hidden');
+        }
+    });
+
+</script>

webseite/impressum.php

@@ -16,16 +16,7 @@
 </div>
 
 <!-- Navigation -->
-<nav class="fixed top-0 w-full bg-white/80 backdrop-blur-lg shadow-sm z-50">
+<?php include 'header.php'; ?>
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="flex justify-between h-16">
-            <a href="index.php" class="flex items-center">
-                <img src="assets/images/hsgg-logo.png" alt="HSGG Logo" class="h-10 mr-3">
-                <span class="text-2xl font-bold text-[var(--primary-color)]">HSGG</span>
-            </a>
-        </div>
-    </div>
-</nav>
 
 <div class="content mt-24 max-w-7xl mx-[16px] xl:mx-auto">
     <h1 class="text-3xl font-bold text-gray-900 mb-6">Impressum</h1>

webseite/index.php

@@ -21,71 +21,7 @@
     <div class="blob absolute w-96 h-96 bg-sky-300/30 bottom-0 right-0"></div>
 </div>
 
-<!-- Navigation -->
+<?php include 'header.php'; ?>
-<nav class="fixed top-0 w-full bg-white/80 backdrop-blur-lg shadow-sm z-50">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="flex justify-between h-16">
-            <a href="index.php" class="flex items-center">
-                <img src="assets/images/hsgg-logo.png" alt="HSGG Logo" class="h-10 mr-3">
-                <span class="text-2xl font-bold text-[var(--primary-color)]">HSGG</span>
-            </a>
-
-            <!-- Login/Logout Button -->
-            <div class="flex items-center space-x-4">
-                <?php
-                require_once("classes/User.php");
-                session_start();
-                if (isset($_SESSION['user']) && $_SESSION['user']->isLoggedIn()) {
-                    // Logout Button
-                    echo '<form id="logoutForm" action="logout.php" method="POST" style="display:inline;">
-                              <button id="logoutButton" type="submit" class="bg-[var(--primary-color)] text-white px-4 py-2 rounded-lg hover:bg-[var(--accent-color)] transition duration-300">Logout</button>
-                          </form>';
-                    // Username Dropdown - Weitere Funktionen implementierbar
-                    echo '<div class="relative">
-                              <button id="userDropdownButton" class="bg-[var(--primary-color)] text-white px-4 py-2 rounded-lg hover:bg-[var(--accent-color)] transition duration-300">' . htmlspecialchars($_SESSION['user']->getUsername()) . '</button>
-                          </div>';
-                } else {
-                    // Login Button
-                    echo '<button id="loginButton" class="bg-[var(--primary-color)] text-white px-4 py-2 rounded-lg hover:bg-[var(--accent-color)] transition duration-300">Login</button>';
-                }
-                ?>
-            </div>
-        </div>
-    </div>
-</nav>
-
-<!-- Login Popup | erscheint nur, wenn kein Nutzer eingeloggt ist -->
-<?php
-if (!isset($_SESSION['user']) || !$_SESSION['user']->isLoggedIn()) {
-    ?>
-    <div id="loginPopup" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50" role="dialog"
-         aria-labelledby="loginTitle" aria-hidden="true">
-        <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-sm relative">
-            <button id="closePopupButton" class="absolute top-2 right-2 text-gray-500 text-xl"
-                    aria-label="Close Login Popup">&times;
-            </button>
-            <h2 id="loginTitle" class="text-2xl font-bold mb-6 text-center">Login</h2>
-            <form id="loginForm" action="login.php" method="POST">
-                <div class="mb-4">
-                    <label for="username" class="block text-gray-700 mb-2">Benutzername:</label>
-                    <input type="text" id="username" name="username" class="w-full p-2 border rounded-lg" required
-                           autofocus>
-                </div>
-                <div class="mb-4">
-                    <label for="password" class="block text-gray-700 mb-2">Passwort:</label>
-                    <input type="password" id="password" name="password" class="w-full p-2 border rounded-lg" required>
-                </div>
-                <button type="submit"
-                        class="w-full bg-[var(--primary-color)] text-white px-4 py-2 rounded-lg hover:bg-[var(--accent-color)] transition duration-300">
-                    Login
-                </button>
-            </form>
-            <div id="errorMessage" class="hidden text-red-500 text-center mt-4">Falscher Benutzername oder Passwort</div>
-        </div>
-    </div>
-    <?php
-}
-?>
 
 <!-- Hero Section -->
 <div class="hidden md:block pt-24 px-4">
@@ -154,46 +90,5 @@ if (!isset($_SESSION['user']) || !$_SESSION['user']->isLoggedIn()) {
     </div>
 </footer>
 
-<script>
-    // JavaScript to handle opening and closing of the login popup
-    const loginButton = document.getElementById('loginButton');
-    const loginPopup = document.getElementById('loginPopup');
-    const closePopupButton = document.getElementById('closePopupButton');
-    const usernameInput = document.getElementById('username');
-    const errorMessage = document.getElementById('errorMessage');
-
-    loginButton.addEventListener('click', function () {
-        loginPopup.classList.remove('hidden');
-        usernameInput.focus(); // Set focus to username field
-    });
-
-    closePopupButton.addEventListener('click', function () {
-        loginPopup.classList.add('hidden');
-    });
-
-    window.addEventListener('click', function (event) {
-        if (event.target === loginPopup) {
-            loginPopup.classList.add('hidden');
-        }
-    });
-
-    // Schließe Popup mit ESC
-    document.addEventListener('keydown', function (event) {
-        if (event.key === "Escape" && !loginPopup.classList.contains('hidden')) {
-            loginPopup.classList.add('hidden');
-        }
-    });
-
-    // Zeige Fehlermeldung beim Login an
-    window.addEventListener('DOMContentLoaded', (event) => {
-        const urlParams = new URLSearchParams(window.location.search);
-        if (urlParams.has('error') && urlParams.get('error') === '1') {
-            loginPopup.classList.remove('hidden');
-            errorMessage.classList.remove('hidden');
-        }
-    });
-
-</script>
-
 </body>
 </html>

webseite/subject.php

@@ -31,8 +31,9 @@ $topics = $subjectData->topics;
 
 
 <body class="min-h-screen">
+<?php include 'header.php'; ?>
 
-<nav class="sidebar bg-[<?php echo($subjectData->color); ?>]">
+<nav class="sidebar bg-[<?php echo($subjectData->color); ?>] pt-24">
     <div class="sidebar-header">
         <i class="fas fa-graduation-cap"></i>
 
@@ -47,15 +48,6 @@ $topics = $subjectData->topics;
     </a>
 </nav>
 
-<div class="search-container bg-white">
-    <button class="menu-toggle h-12 w-12 border-2 p-1 hover:border-[<?php echo($subjectData->color); ?>]">
-        <i class="fas fa-bars"></i>
-    </button>
-    <input type="text" class="search-box p-3 border-2 w-full focus:border-[<?php echo($subjectData->color); ?>]"
-           id="searchInput" placeholder="Suche nach Themen, Übungen oder Hilfe..."
-           oninput="handleSearch()">
-</div>
-
 <div class="main-content">
     <div class="max-w-7xl mx-auto px-4 py-12 grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-8 mb-8">
 

webseite/topic.php

@@ -36,13 +36,10 @@ if (!isset($topicData)) {
 
 
 <body class="min-h-screen">
-
+<?php include 'header.php'; ?>
-<button class="menu-toggle fixed top-4 left-4 z-50 bg-white h-12 w-12 border-2 p-1 hover:border-[<?php echo($subjectData->color); ?>]">
-    <i class="fas fa-bars"></i>
-</button>
 
 <!-- Left Sidebar -->
-<nav class="sidebar bg-[<?php echo($subjectData->color); ?>]">
+<nav class="sidebar bg-[<?php echo($subjectData->color); ?>] pt-24">
     <div class="sidebar-header">
         <i class="fas fa-graduation-cap"></i>
         <h2><?php echo($subjectData->displayName); ?></h2>