From 171d068a789bf221b4422ede048aaa1c9349228c Mon Sep 17 00:00:00 2001
From: reschan <h>
Date: Tue, 2 Aug 2022 13:25:57 +0700
Subject: [PATCH] implement mobile navbar

---
 builder/index_full.html | 45 ++++++++++++++++++++++++++++++++++++++++-
 js/builder.js           | 12 +++++++++++
 2 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/builder/index_full.html b/builder/index_full.html
index 5fa94d0..0f241bb 100644
--- a/builder/index_full.html
+++ b/builder/index_full.html
@@ -36,7 +36,50 @@
         <hr/>
         <a href = "https://discord.gg/CGavnAnerv" target = "_blank"><img src = "../media/icons/discord.png" alt = "WB Discord" title = "WB Discord"><b>WB Discord</b></a>
     </div>
-    <div class="container-fluid overall-box">
+    <div id="mobile-navbar" class="navbar dark-5 dark-shadow fixed-top d-lg-none pb-0">
+        <div class="container-fluid scaled-font justify-content-center" style="height: 5vh;">
+            <div class="navbar-brand mx-auto scaled-font" style="height: 100%;">
+                <img src="../media/icons/new/builder.png" alt="" style="height: 100%;">
+                <span>WynnBuilder</span>
+            </div>
+            <button class="btn dropdown-toggle dark-2 px-4 text-white scaled-font border-info border-2" onclick="toggle_tab('mobile-navbar-dropdown');"></button>
+        </div>
+        <div class="container-fluid scaled-font dark-3 px-3 py-3" id="mobile-navbar-dropdown" style="display: none;">
+            <a href="../builder/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
+                <img src="../media/icons/new/builder.png" alt="" style="height: 100%;">
+                <span>WynnBuilder</span>
+            </a>
+            <a href="../crafter/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
+                <img src="../media/icons/new/crafter.png" alt="" style="height: 100%;">
+                <span>WynnCrafter</span>
+            </a>
+            <a href="../items/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
+                <img src="../media/icons/new/searcher.png" alt="" style="height: 100%;">
+                <span>WynnAtlas</span>
+            </a>
+            <a href="../custom/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
+                <img src="../media/icons/new/custom.png" alt="" style="height: 100%;">
+                <span>WynnCustom</span>
+            </a>
+            <a href="../map/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
+                <img src="../media/icons/new/compass.png" alt="" style="height: 100%;">
+                <span>WynnGPS</span>
+            </a>
+            <a href="../wynnfo/" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
+                <img src="../media/icons/new/book.png" alt="" style="height: 100%;">
+                <span>WynnFo</span>
+            </a>
+            <a onclick = "toggleIcons()" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
+                <img src="../media/icons/new/reload.png" alt="" style="height: 100%;">
+                <span>Swap Icon Style</span>
+            </a>
+            <a href="https://discord.gg/CGavnAnerv" class="w-100 mb-3 text-white" style="height: 5vh; text-decoration: none;">
+                <img src="../media/icons/discord.png" alt="" style="height: 100%;">
+                <span>Discord</span>
+            </a>
+        </div>
+    </div>
+    <div class="container-fluid overall-box mt-lg-2" style="margin-top: 5vh;">
         <!-- REMOVE THIS DIV AT SOME POINT. -->
         <div class = "row scaled-font mx-auto" id = "discord-banner-dev">
                 <div class = "col text-center item-title">Join the <a class = "link" href = "https://discord.gg/CGavnAnerv" target = "_blank">discord</a> today to suggest new features, submit bug reports, and hangout/talk to devs!</div>
diff --git a/js/builder.js b/js/builder.js
index 468b642..81a64a6 100644
--- a/js/builder.js
+++ b/js/builder.js
@@ -384,6 +384,18 @@ function init() {
             break;
         }
     }
+
+    // navbar appearance control
+    let scrollPos = 0
+    document.addEventListener('scroll', (e) => {
+        if (document.documentElement.scrollTop - scrollPos > 20) {
+            document.getElementById("mobile-navbar").style.display = "none";
+            document.getElementById("mobile-navbar-dropdown").style.display = "none";
+        } else if (document.documentElement.scrollTop - scrollPos < -50) {
+            document.getElementById("mobile-navbar").style.display = "";
+        }
+        scrollPos = document.documentElement.scrollTop;
+    });
 }
 
 window.onerror = function(message, source, lineno, colno, error) {