Improve mobile UI

src/components/NavbarView.vue

@@ -1,28 +1,57 @@
 <script lang="ts">
+import { ref } from 'vue'
 import SearchBar from './SearchBar.vue'
 import LanguageSwitcher from './LanguageSwitcher.vue'
 export default {
   components: {
     SearchBar,
     LanguageSwitcher
+  },
+  setup() {
+    return {
+      open: ref(false)
+    }
+  },
+  methods: {
+    toggle() {
+    	this.open = !this.open
+    }
   }
 }
 </script>
 
 <template>
-  <div class="p-4 flex items-center justify-between bg-ctp-base text-white">
-    <router-link to="/">
-      <h1 class="font-bold text-2xl">Safe<color class="text-purple-500">Twitch</color></h1>
-    </router-link>
 
-    <div>
-      <search-bar></search-bar>
-    </div>
+    <nav class="flex items-center justify-between flex-wrap p-4">
+      <div class="flex items-center flex-no-shrink text-white mr-6">
+        <router-link to="/">
+          <h1 class="font-bold text-2xl">Safe<color class="text-purple-500">Twitch</color></h1>
+        </router-link>
+      </div>
 
-    <ul class="inline-flex space-x-6 font-medium">
-      <a href="https://codeberg.org/dragongoose/safetwitch">{{ $t('nav.code') }}</a>
-      <router-link to="/privacy">{{ $t('nav.privacy') }}</router-link>
-      <language-switcher></language-switcher>
-    </ul>
-  </div>
+      <search-bar class="mt-4 mr-4 hidden sm:inline-block sm:mt-0"></search-bar>
+
+      <div class="text-white hidden sm:block">
+        <a href="https://codeberg.org/dragongoose/safetwitch" class="mt-4 mr-4 sm:inline-block sm:mt-0">{{ $t('nav.code') }}</a>
+        <router-link to="/privacy" class="mt-4 mr-4 sm:inline-block sm:mt-0">{{ $t('nav.privacy') }}</router-link>
+        <language-switcher class="mt-4 sm:inline-block sm:mt-0"></language-switcher>
+      </div>
+
+      <div class="block sm:hidden">
+        <button @click="toggle" class="flex items-center px-3 py-2">
+          <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
+        </button>
+      </div>
+
+      <div :class="open ? 'block': 'hidden'" class="w-full flex-grow">
+        <div class="p-4 flex flex-col items-center space-y-5 bg-ctp-base text-white">
+          <search-bar></search-bar>
+          <ul class="inline-flex space-x-3 md:space-x-6 font-medium">
+            <a href="https://codeberg.org/dragongoose/safetwitch">{{ $t('nav.code') }}</a>
+            <router-link to="/privacy">{{ $t('nav.privacy') }}</router-link>
+            <language-switcher></language-switcher>
+          </ul>
+        </div>
+      </div>
+    </nav>
 </template>

src/components/SearchBar.vue

@@ -15,7 +15,7 @@ export default {
 </script>
 
 <template>
-  <div class="relative hidden md:block">
+  <div class="relative md:block">
     <label for="searchBar" class="hidden">{{ $t('main.search') }}</label>
     <v-icon name="io-search-outline" class="absolute my-auto inset-y-0 left-2"></v-icon>
     <input

src/views/HomepageView.vue

@@ -152,5 +152,6 @@ export default {
         <category-preview :category-data="category"></category-preview>
       </li>
     </ul>
+
   </div>
 </template>