add burger menu for mobile layout

public/internal/footer.php

@@ -54,6 +54,7 @@ function getFooter(){
         checkHide();
     </script>
     <script src="/js/includeHTML.js"></script>
+    <script src="/js/burgerMenu.js"></script>
     </body>
     </html>
     EOF);

public/internal/menue.php

@@ -5,32 +5,39 @@ function getMenu($page){
     $status = $page == "status" ? "class=\"menueSelected\"" : "";
 
     return <<<EOF
-    <a href="/" $startpage>Startseite</a>
-    <div class="dropdown">
-        <a href="#" $projects>Projekte</a>
-        <div class="dropdown-content">
-            <a href="/Projekte/proxdroid.php">Proxdroid - Proxmox Android App</a><br>
-            <a href="/Projekte/websitecloner.php">Website Cloner</a><br>
-            <a href="/Projekte/youtubedownloader.php">YouTube Downloader</a><br>
-            <a href="/Projekte/mqttpush.php">MQTT Push</a><br>
-            <a href="/Projekte/gclogLink.php">Geocaching Premium Log link Generator</a><br>
-            <a href="/Projekte/ledtisch1.php">LED Tisch Version 1</a><br>
-            <a href="/Projekte/ledtisch2.php">LED Tisch Version 2</a><br>
-            <a href="/Projekte/regensensor.php">Regensensor</a><br>
-            <a href="/Projekte/blitzortung.php">Blitzortung</a><br>
-            <a href="/Projekte/insecam.php">Insecam</a><br>
-            <a href="/Projekte/URLkuerzer1.php">URL K&uuml;rzer V1</a><br>
-            <a href="/Projekte/URLkuerzer2.php">URL K&uuml;rzer V2</a><br>
-            <a href="/Projekte/smartmirror.php">Smart Mirror</a><br>
-            <a href="/Projekte/snowboy.php">Installation von Snowboy</a><br>
-        </div>
+    <div id="burgerMenu" onclick="handleBurger()">
+      <div class="bar1"></div>
+      <div class="bar2"></div>
+      <div class="bar3"></div>
     </div>
-    <a href="//kuerzer.ml">URL K&uuml;rzer</a>
-    <div class="dropdown">
-        <a href="#" $status>Status</a>
-        <div class="dropdown-content">
-            <a href="//status.jonasled.de">Server</a><br>
-            <a href="/ntpstatus.php">NTP Server</a><br>
+    <div id="mainMenuContainer">
+        <a href="/" $startpage>Startseite</a>
+        <div class="dropdown">
+            <a href="#" $projects>Projekte</a>
+            <div class="dropdown-content">
+                <a href="/Projekte/proxdroid.php">Proxdroid - Proxmox Android App</a><br>
+                <a href="/Projekte/websitecloner.php">Website Cloner</a><br>
+                <a href="/Projekte/youtubedownloader.php">YouTube Downloader</a><br>
+                <a href="/Projekte/mqttpush.php">MQTT Push</a><br>
+                <a href="/Projekte/gclogLink.php">Geocaching Premium Log link Generator</a><br>
+                <a href="/Projekte/ledtisch1.php">LED Tisch Version 1</a><br>
+                <a href="/Projekte/ledtisch2.php">LED Tisch Version 2</a><br>
+                <a href="/Projekte/regensensor.php">Regensensor</a><br>
+                <a href="/Projekte/blitzortung.php">Blitzortung</a><br>
+                <a href="/Projekte/insecam.php">Insecam</a><br>
+                <a href="/Projekte/URLkuerzer1.php">URL K&uuml;rzer V1</a><br>
+                <a href="/Projekte/URLkuerzer2.php">URL K&uuml;rzer V2</a><br>
+                <a href="/Projekte/smartmirror.php">Smart Mirror</a><br>
+                <a href="/Projekte/snowboy.php">Installation von Snowboy</a><br>
+            </div>
+        </div>
+        <a href="//kuerzer.ml">URL K&uuml;rzer</a>
+        <div class="dropdown">
+            <a href="#" $status>Status</a>
+            <div class="dropdown-content">
+                <a href="//status.jonasled.de">Server</a><br>
+                <a href="/ntpstatus.php">NTP Server</a><br>
+            </div>
         </div>
     </div>
 EOF;

scss/_mobile.scss

+#burgerMenu {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: none;
+  cursor: pointer;
+
+  .bar1, .bar2, .bar3 {
+    width: 35px;
+    height: 5px;
+    background-color: $text-color;
+    margin: 6px 0;
+    transition: 0.4s;
+  }
+  &.change .bar1 {
+    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
+    transform: rotate(-45deg) translate(-9px, 6px);
+  }
+
+  &.change .bar2 {opacity: 0;}
+
+  &.change .bar3 {
+    -webkit-transform: rotate(45deg) translate(-8px, -8px);
+    transform: rotate(45deg) translate(-8px, -8px);
+  }
+}
+
+
 @media only screen and (max-width: 600px) {
   #homeImage{
     float: none;
@@ -30,4 +58,44 @@
   article{
     width: 95%;
   }
+
+  #burgerMenu{
+    display: inline-block;
+  }
+
+  .visible{
+    display: inline-grid !important;
+  }
+
+  #mainMenuContainer{
+    display: none;
+
+    text-align: left;
+    background-color: $back-color-3;
+    width: 100%;
+
+    a {
+      text-align: left;
+      border-bottom: #111721 solid 2px;
+      width: 100%;
+    }
+
+    .dropdown-content{
+      display: block;
+      position: relative;
+      left: 0;
+      transform: none;
+      width: 100%;
+      a{
+        padding-left: 40px;
+      }
+    }
+  }
+  #mainMenu{
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
 }
\ No newline at end of file

ts/burgerMenu.ts

+function handleBurger(){
+    (<HTMLElement> document.getElementById("burgerMenu")).classList.toggle("change");
+    (<HTMLElement> document.getElementById("mainMenuContainer")).classList.toggle("visible");
+
+}
\ No newline at end of file