From 22bb085d5e926747aca744872433252fc36c55f6 Mon Sep 17 00:00:00 2001
From: Grisu <grisu_steam@gmx.de>
Date: Sun, 19 Jun 2022 16:02:11 +0200
Subject: [PATCH] responsiv navbar

---
 app/public/css/styles.css            | 111 ++++++++++++++++++++++-----
 app/public/header_footer/footer.html |   2 +-
 app/public/header_footer/header.php  |  61 ++++++++-------
 app/public/js/navbar.js              |   6 ++
 4 files changed, 132 insertions(+), 48 deletions(-)
 create mode 100644 app/public/js/navbar.js

diff --git a/app/public/css/styles.css b/app/public/css/styles.css
index 43144df..3122852 100644
--- a/app/public/css/styles.css
+++ b/app/public/css/styles.css
@@ -1,5 +1,9 @@
 @import url(./trashcan.css);
 
+*{
+    box-sizing: border-box;
+}
+
 html { 
     background: url("../pictures/Gerätehaus.jpg") no-repeat center center fixed; 
     -webkit-background-size: cover;
@@ -9,29 +13,98 @@ html {
     height: 100%;
 }
 
-nav a{
-    float: right;
-    text-decoration: none;
-    color: #FFFFFF;
-    font-size: 18px;
-    padding: 15px 25px;
-    display: inline-block;
-    transition: all 0.5s ease 0s;
+.navbar {
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #090CA9;
+    color: white;
 }
 
 #logo {
-    font-size: 20px;
-    text-transform: uppercase;
-    color: #FFFFFF;
-    font-weight: bold;
-    float: left;
-    padding: 20px;
-    margin-left: 0.5rem;
+    font-size: 1.5rem;
+    margin: .5rem;
+}
+
+.navbar-links {
+    height: 100%;
+}
+
+.navbar-links ul {
+    display: flex;
+    margin: 0;
+    padding: 0;
+}
+
+.navbar-links li {
+    list-style: none;
+}
+
+.navbar-links li a {
+    display: block;
+    text-decoration: none;
+    color: white;
+    padding: 1rem;
+}
+
+.navbar-links li:hover {
+    background-color: #002e5b;
+}
+
+.toggle-button {
+    position: absolute;
+    top: .75rem;
+    right: .1rem;
+    display: none;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 30px;
+    height: 21px;
+}
+
+.toggle-button .bar {
+    height: 3px;
+    width: 100%;
+    background-color: white;
+    border-radius: 10px;
+}
+
+
+@media (max-width: 800px) {
+    .navbar {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .toggle-button {
+        display: flex;
+    }
+
+    .navbar-links {
+        display: none;
+        width: 100%;
+    }
+
+    .navbar-links ul {
+        width: 100%;
+        flex-direction: column;
+    }
+
+    .navbar-links ul li {
+        text-align: end;
+    }
+
+    .navbar-links ul li a {
+        padding: .5rem 1rem;
+    }
+
+    .navbar-links.active {
+        display: flex;
+    }
 }
 
 header {
-    overflow: hidden;
-    background-color: #090CA9;
     margin-bottom: 5px;
 }
 
@@ -43,10 +116,6 @@ body {
     justify-content: center;
 }
 
-nav {
-    margin-right: 0.5rem;
-}
-
 h1 {
     margin: 0px auto;
     font-size: 26px;
diff --git a/app/public/header_footer/footer.html b/app/public/header_footer/footer.html
index 505a2f6..b317cc2 100644
--- a/app/public/header_footer/footer.html
+++ b/app/public/header_footer/footer.html
@@ -1,2 +1,2 @@
-
+    </body>
 </html>
\ No newline at end of file
diff --git a/app/public/header_footer/header.php b/app/public/header_footer/header.php
index 259747e..96520ac 100644
--- a/app/public/header_footer/header.php
+++ b/app/public/header_footer/header.php
@@ -6,31 +6,40 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="stylesheet" href="css/styles.css">
+        <script src="../js/navbar.js" defer></script>
         <script src="js/edit_table.js"></script>
     </head>
-
-    <header>
-        <section>
-            <div id="logo">
-                Punktesystem-KSP
-            </div>
-        <nav>
-            <a href="logout.php">Logout</a>
-            <a href="index.php">Home</a>
-            <?php
-                if(isset($_SESSION['user_group'])) {
-                    if ($_SESSION['user_group'] == 'admin') {
-                        echo "<a href=\"manage_user.php\">Benutzerverwaltung</a>\n";
-                        echo "<a href=\"mannschaft.php\">Mannschaftsverwaltung</a>\n";
-                        echo "<a href=\"stationen.php\">Stationen</a>\n";
-                    }
-                    if ($_SESSION['user_group'] == 'statistics') {
-                        echo "<a href=\"statistik.php\">Ergebnisse</a>";
-                    } else {
-                        echo "<a href=\"statistik.php\">Ergebnisse eintragen</a>";
-                    }
-                }
-            ?>
-        </nav>
-        </section>
-    </header>
\ No newline at end of file
+    <body>
+        <header>
+            <nav class="navbar">
+                <div id="logo">
+                    Punktesystem-KSP
+                </div>
+                <a href="#" class="toggle-button">
+                    <span class="bar"></span>
+                    <span class="bar"></span>
+                    <span class="bar"></span>
+                </a>
+                <div class="navbar-links">
+                    <ul>
+                        <li><a href="index.php">Home</a></li>
+                        <?php
+                            if(isset($_SESSION['user_group'])) {
+                                if ($_SESSION['user_group'] == 'admin') {
+                                    echo "<li><a href=\"manage_user.php\">Benutzerverwaltung</a></li>\n";
+                                    echo "<li><a href=\"mannschaft.php\">Mannschaftsverwaltung</a></li>\n";
+                                    echo "<li><a href=\"stationen.php\">Stationen</a></li>\n";
+                                }
+                                if ($_SESSION['user_group'] == 'statistics') {
+                                    echo "<li><a href=\"statistik.php\">Ergebnisse</a></li>";
+                                } else {
+                                    echo "<li><a href=\"statistik.php\">Ergebnisse eintragen</a></li>";
+                                }
+                            }
+                        ?>
+                        
+                        <li><a href="logout.php">Logout</a></li>
+                    </ul>
+                </div>
+            </nav>
+        </header>
\ No newline at end of file
diff --git a/app/public/js/navbar.js b/app/public/js/navbar.js
new file mode 100644
index 0000000..c3b1d84
--- /dev/null
+++ b/app/public/js/navbar.js
@@ -0,0 +1,6 @@
+const toggleButton = document.getElementsByClassName('toggle-button')[0]
+const navbarLinks = document.getElementsByClassName('navbar-links')[0]
+
+toggleButton.addEventListener('click', () => {
+  navbarLinks.classList.toggle('active')
+})
\ No newline at end of file