From bc73307a475df7edc725c616fb5f4819d9fe48a1 Mon Sep 17 00:00:00 2001
From: robertkleinschuster <github@kleinschuster.de>
Date: Fri, 26 May 2023 10:52:28 +0200
Subject: [PATCH] improved mobile nav appearance

---
 src/App.vue                          |  6 ++-
 src/components/NavBar.vue            | 63 +++++++++++++++-------------
 src/components/SearchSuggestions.vue |  4 +-
 3 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 93693dd3..331a2065 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -216,8 +216,10 @@ b {
 }
 
 .input:focus {
-    @apply border-2 border-red-500 outline-none;
-    box-shadow: 0 0 15px rgba(239, 68, 68, var(--un-border-opacity));
+    @apply outline-red-500;
+    outline-style: solid;
+    outline-width: 2px;
+    box-shadow: 0 0 15px rgba(239, 68, 68, 1);
 }
 
 hr {
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 5aa0cc36..b4ae6daf 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -59,35 +59,41 @@
         </ul>
     </nav>
     <!-- navigation bar for mobile devices -->
-    <ul
+    <div
         v-if="showTopNav"
-        class="flex flex-col justify-center items-end mb-4 children:(my-0.5 mr-5)"
-        @click="showTopNav = false"
+        class="mobile-nav flex flex-col mb-4 children:(p-1 w-full border-b border-dark-100 flex items-center gap-1)"
     >
-        <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>
-            <router-link v-t="'titles.playlists'" to="/playlists" />
-        </li>
-        <li v-if="!shouldShowTrending">
-            <router-link v-t="'titles.feed'" to="/feed" />
-        </li>
-    </ul>
+        <router-link v-if="shouldShowTrending" to="/trending">
+            <div class="i-fa6-solid:fire"></div>
+            <i18n-t keypath="titles.trending"></i18n-t>
+        </router-link>
+        <router-link to="/preferences">
+            <div class="i-fa6-solid:gear"></div>
+            <i18n-t keypath="titles.preferences"></i18n-t>
+        </router-link>
+        <router-link v-if="shouldShowLogin" to="/login">
+            <div class="i-fa6-solid:user"></div>
+            <i18n-t keypath="titles.login"></i18n-t>
+        </router-link>
+        <router-link v-if="shouldShowLogin" to="/register">
+            <div class="i-fa6-solid:user-plus"></div>
+            <i18n-t keypath="titles.register"></i18n-t>
+        </router-link>
+        <router-link v-if="shouldShowHistory" to="/history">
+            <div class="i-fa6-solid:clock-rotate-left"></div>
+            <i18n-t keypath="titles.history"></i18n-t>
+        </router-link>
+        <router-link to="/playlists">
+            <div class="i-fa6-solid:list"></div>
+            <i18n-t keypath="titles.playlists"></i18n-t>
+        </router-link>
+        <router-link v-if="!shouldShowTrending" to="/feed">
+            <div class="i-fa6-solid:play"></div>
+            <i18n-t keypath="titles.feed"></i18n-t>
+        </router-link>
+    </div>
     <!-- search suggestions for mobile devices -->
-    <div class="mobile-search md:hidden mx-2 search-container">
+    <div class="w-full mb-2 md:hidden search-container">
         <input
             v-model="searchText"
             class="input h-10 w-full"
@@ -189,8 +195,7 @@ export default {
     @apply absolute right-3 cursor-pointer rounded-full bg-[#ccc] w-4 h-4 text-center text-black opacity-50 hover:(opacity-70) text-size-[13px];
     line-height: 1.05;
 }
-.mobile-search {
-    width: calc(100% - 1rem);
-    @apply mx-2;
+.mobile-nav svg {
+    width: 16px;
 }
 </style>
diff --git a/src/components/SearchSuggestions.vue b/src/components/SearchSuggestions.vue
index 794085db..a6d30f82 100644
--- a/src/components/SearchSuggestions.vue
+++ b/src/components/SearchSuggestions.vue
@@ -82,7 +82,7 @@ export default {
 
 <style>
 .suggestions-container {
-    @apply left-1/2 translate-x-[-50%] transform-gpu max-w-3xl w-full box-border p-y-1.25 z-10 lt-md:max-w-[calc(100%-0.5rem)] bg-gray-300;
+    @apply left-1/2 translate-x-[-50%] transform-gpu max-w-3xl w-full box-border z-10 lt-md:max-w-[calc(100%-0.5rem)] bg-gray-300;
 }
 
 .dark .suggestions-container {
@@ -98,6 +98,6 @@ export default {
 }
 
 .suggestion {
-    @apply p-y-1;
+    @apply p-1;
 }
 </style>