From d26830bb366389f71b6bc1fdce33889c4626355d Mon Sep 17 00:00:00 2001
From: Jonas Leder <jonas@jonasled.de>
Date: Wed, 20 Jan 2021 22:20:10 +0100
Subject: [PATCH] add burger menu for mobile layout
---
public/internal/footer.php | 1 +
public/internal/menue.php | 57 ++++++++++++++++++--------------
scss/_mobile.scss | 68 ++++++++++++++++++++++++++++++++++++++
ts/burgerMenu.ts | 5 +++
4 files changed, 106 insertions(+), 25 deletions(-)
create mode 100644 ts/burgerMenu.ts
diff --git a/public/internal/footer.php b/public/internal/footer.php
index 59ba39d..bad543d 100644
--- a/public/internal/footer.php
+++ b/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);
diff --git a/public/internal/menue.php b/public/internal/menue.php
index abca133..e4d79e8 100644
--- a/public/internal/menue.php
+++ b/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ürzer V1</a><br>
- <a href="/Projekte/URLkuerzer2.php">URL Kü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ü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ürzer V1</a><br>
+ <a href="/Projekte/URLkuerzer2.php">URL Kü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ü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;
diff --git a/scss/_mobile.scss b/scss/_mobile.scss
index dbec2aa..451a627 100644
--- a/scss/_mobile.scss
+++ b/scss/_mobile.scss
@@ -1,3 +1,31 @@
+#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
diff --git a/ts/burgerMenu.ts b/ts/burgerMenu.ts
new file mode 100644
index 0000000..bb7f75e
--- /dev/null
+++ b/ts/burgerMenu.ts
@@ -0,0 +1,5 @@
+function handleBurger(){
+ (<HTMLElement> document.getElementById("burgerMenu")).classList.toggle("change");
+ (<HTMLElement> document.getElementById("mainMenuContainer")).classList.toggle("visible");
+
+}
\ No newline at end of file
--
GitLab