From 07dcbd66d4390a80ab17f944a36c07a7d9cd1f74 Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Fri, 22 Jul 2022 18:08:52 +0200
Subject: [PATCH] responsive navigation bar

---
 src/App.vue               |  4 ++
 src/components/NavBar.vue | 80 +++++++++++++++++++++++++++------------
 2 files changed, 59 insertions(+), 25 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 357279c3..97a29085 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -208,4 +208,8 @@ h2 {
 .auto .link-secondary {
     @apply dark:(text-gray-300 hover:(text-gray-400 underline underline-gray-400));
 }
+
+.line {
+    @apply px-2.5 py-0.25 my-0.45 rounded-xl bg-white;
+}
 </style>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 8888a2e2..8735bc2d 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -26,32 +26,61 @@
                 @blur="onInputBlur"
             />
         </div>
-        <div class="flex-1 flex justify-end">
-            <ul class="flex text-1xl children:pl-3">
-                <li v-if="shouldShowTrending">
-                    <router-link v-t="'titles.trending'" to="/trending" />
-                </li>
-                <li>
-                    <router-link v-t="'titles.preferences'" to="/preferences" />
-                </li>
-                <li v-if="shouldShowLogin">
-                    <router-link v-t="'titles.login'" to="/login" />
-                </li>
-                <li v-if="shouldShowLogin">
-                    <router-link v-t="'titles.register'" to="/register" />
-                </li>
-                <li v-if="shouldShowHistory">
-                    <router-link v-t="'titles.history'" to="/history" />
-                </li>
-                <li v-if="authenticated">
-                    <router-link v-t="'titles.playlists'" to="/playlists" />
-                </li>
-                <li v-if="authenticated">
-                    <router-link v-t="'titles.feed'" to="/feed" />
-                </li>
-            </ul>
-        </div>
+        <!-- three vertical lines for toggling the hamburger menu on mobile -->
+        <button class="md:hidden flex flex-col justify-end mr-3" @click="showTopNav = !showTopNav">
+            <span class="line"></span>
+            <span class="line"></span>
+            <span class="line"></span>
+        </button>
+        <!-- navigation bar for large screen devices -->
+        <ul class="hidden md:(flex-1 flex justify-end flex text-1xl children:pl-3)">
+            <li v-if="shouldShowTrending">
+                <router-link v-t="'titles.trending'" to="/trending" />
+            </li>
+            <li>
+                <router-link v-t="'titles.preferences'" to="/preferences" />
+            </li>
+            <li v-if="shouldShowLogin">
+                <router-link v-t="'titles.login'" to="/login" />
+            </li>
+            <li v-if="shouldShowLogin">
+                <router-link v-t="'titles.register'" to="/register" />
+            </li>
+            <li v-if="shouldShowHistory">
+                <router-link v-t="'titles.history'" to="/history" />
+            </li>
+            <li v-if="authenticated">
+                <router-link v-t="'titles.playlists'" to="/playlists" />
+            </li>
+            <li v-if="authenticated && !shouldShowTrending">
+                <router-link v-t="'titles.feed'" to="/feed" />
+            </li>
+        </ul>
     </nav>
+    <!-- navigation bar for mobile devices -->
+    <ul v-if="showTopNav" class="flex flex-col justify-center items-end mb-4 children:(my-0.5 mr-5)">
+        <li v-if="shouldShowTrending">
+            <router-link v-t="'titles.trending'" to="/trending" />
+        </li>
+        <li>
+            <router-link v-t="'titles.preferences'" to="/preferences" />
+        </li>
+        <li v-if="shouldShowLogin">
+            <router-link v-t="'titles.login'" to="/login" />
+        </li>
+        <li v-if="shouldShowLogin">
+            <router-link v-t="'titles.register'" to="/register" />
+        </li>
+        <li v-if="shouldShowHistory">
+            <router-link v-t="'titles.history'" to="/history" />
+        </li>
+        <li v-if="authenticated">
+            <router-link v-t="'titles.playlists'" to="/playlists" />
+        </li>
+        <li v-if="authenticated && !shouldShowTrending">
+            <router-link v-t="'titles.feed'" to="/feed" />
+        </li>
+    </ul>
     <div class="w-full md:hidden">
         <input
             v-model="searchText"
@@ -85,6 +114,7 @@ export default {
         return {
             searchText: "",
             suggestionsVisible: false,
+            showTopNav: false,
         };
     },
     mounted() {