feat: search on small screens

elk-zone · Dec 27, 2022 · a8be0c6 · a8be0c6
1 parent 6412127
commit a8be0c6
Show file tree

Hide file tree

Showing 11 changed files with 50 additions and 20 deletions.
diff --git a/components/nav/NavBottom.vue b/components/nav/NavBottom.vue
@@ -14,26 +14,30 @@ const moreMenuVisible = ref(false)
       <NuxtLink to="/home" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
         <div i-ri:home-5-line />
       </NuxtLink>
+      <NuxtLink to="/search" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
+        <div i-ri:search-line />
+      </NuxtLink>
       <NuxtLink to="/notifications" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
         <div i-ri:notification-4-line />
       </NuxtLink>
+      <NuxtLink to="/conversations" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
+        <div i-ri:at-line />
+      </NuxtLink>
     </template>
-    <NuxtLink :to="`/${currentServer}/explore`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
-      <div i-ri:hashtag />
-    </NuxtLink>
-    <NuxtLink group :to="`/${currentServer}/public/local`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
-      <div i-ri:group-2-line />
-    </NuxtLink>
-    <template v-if="!isMastoInitialised || !currentUser">
+    <template v-if="isMastoInitialised && !currentUser">
+      <NuxtLink :to="`/${currentServer}/explore`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
+        <div i-ri:hashtag />
+      </NuxtLink>
+      <NuxtLink to="/search" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
+        <div i-ri:search-line />
+      </NuxtLink>
+      <NuxtLink group :to="`/${currentServer}/public/local`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
+        <div i-ri:group-2-line />
+      </NuxtLink>
       <NuxtLink :to="`/${currentServer}/public`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
         <div i-ri:earth-line />
       </NuxtLink>
     </template>
-    <template v-if="isMastoInitialised && currentUser">
-      <NuxtLink to="/conversations" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
-        <div i-ri:at-line />
-      </NuxtLink>
-    </template>
     <NavBottomMoreMenu v-slot="{ changeShow, show }" v-model="moreMenuVisible" flex flex-row items-center place-content-center h-full flex-1 cursor-pointer>
       <label
         flex items-center place-content-center h-full flex-1 class="select-none"

diff --git a/components/nav/NavSide.vue b/components/nav/NavSide.vue
@@ -15,7 +15,11 @@ const { notifications } = useNotifications()
         </div>
       </template>
     </NavSideItem>
-    <NavSideItem :text="$t('nav.explore')" :to="`/${currentServer}/explore`" icon="i-ri:hashtag" />
+
+    <!-- Use Search for small screens once the right sidebar is collapsed -->
+    <NavSideItem :text="$t('nav.search')" to="/search" icon="i-ri:search-line" lg:hidden />
+    <NavSideItem :text="$t('nav.explore')" :to="`/${currentServer}/explore`" icon="i-ri:hashtag" hidden lg:block />
+
     <NavSideItem :text="$t('nav.local')" :to="`/${currentServer}/public/local`" icon="i-ri:group-2-line " />
     <NavSideItem :text="$t('nav.federated')" :to="`/${currentServer}/public`" icon="i-ri:earth-line" />
     <NavSideItem :text="$t('nav.conversations')" to="/conversations" icon="i-ri:at-line" user-only />

diff --git a/components/search/SearchWidget.vue b/components/search/SearchWidget.vue
@@ -66,7 +66,7 @@ const activate = () => {
         outline="focus:none"
         pr-4
         rtl-pl-4
-        :placeholder="t('nav.search', ['Elk'])"
+        :placeholder="t('nav.search')"
         pb="1px"
         placeholder-text-secondary
         @keydown.down.prevent="shift(1)"

diff --git a/locales/cs-CZ.json b/locales/cs-CZ.json
@@ -119,6 +119,7 @@
     "local": "Lokální",
     "notifications": "Upozornění",
     "profile": "Profil",
+    "search": "Vyhledávání",
     "select_feature_flags": "Zapnout funkce",
     "select_language": "Vybrat jazyk",
     "show_intro": "Zobrazit více informací o aplikaci",

diff --git a/locales/de-DE.json b/locales/de-DE.json
@@ -119,7 +119,7 @@
     "local": "Lokal",
     "notifications": "Mitteilungen",
     "profile": "Profil",
-    "search": "Durchsuche {0}",
+    "search": "Durchsuche",
     "select_feature_flags": "Feature-Flags aktivieren",
     "select_language": "Sprache auswählen",
     "show_intro": "Intro anzeigen",

diff --git a/locales/en-US.json b/locales/en-US.json
@@ -142,7 +142,7 @@
     "local": "Local",
     "notifications": "Notifications",
     "profile": "Profile",
-    "search": "Search {0}",
+    "search": "Search",
     "select_feature_flags": "Toggle Feature Flags",
     "select_font_size": "Select Font Size",
     "select_language": "Select Language",

diff --git a/locales/es-ES.json b/locales/es-ES.json
@@ -138,7 +138,7 @@
     "local": "Local",
     "notifications": "Notificaciones",
     "profile": "Perfil",
-    "search": "Buscar {0}",
+    "search": "Buscar",
     "select_feature_flags": "Cambiar marcadores de funcionalidades",
     "select_font_size": "Cambiar tamaño de letra",
     "select_language": "Cambiar idioma",

diff --git a/locales/fr-FR.json b/locales/fr-FR.json
@@ -137,7 +137,7 @@
     "local": "Local",
     "notifications": "Notifications",
     "profile": "Profil",
-    "search": "Rechercher {0}",
+    "search": "Rechercher",
     "select_feature_flags": "Activer/Désactiver Feature Flags",
     "select_language": "Selectionner langue",
     "show_intro": "Ré-afficher l'introduction",

diff --git a/locales/ja-JP.json b/locales/ja-JP.json
@@ -52,7 +52,7 @@
     "local": "ローカル",
     "notifications": "通知",
     "profile": "プロフィール",
-    "search": "検索 {0}",
+    "search": "検索",
     "select_feature_flags": "実験的機能を切り替え",
     "select_language": "言語を選択",
     "toggle_theme": "テーマを切り替え",

diff --git a/locales/zh-CN.json b/locales/zh-CN.json
@@ -133,7 +133,7 @@
     "local": "本地",
     "notifications": "通知",
     "profile": "个人资料",
-    "search": "搜索 {0}",
+    "search": "搜索",
     "select_feature_flags": "功能开关",
     "select_font_size": "字体大小",
     "select_language": "选择语言",

diff --git a/pages/search.vue b/pages/search.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+useHeadFixed({
+  title: () => t('nav.search'),
+})
+</script>
+
+<template>
+  <MainContent>
+    <template #title>
+      <NuxtLink to="/search" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+        <div i-ri:search-line />
+        <span>{{ $t('nav.search') }}</span>
+      </NuxtLink>
+    </template>
+
+    <SearchWidget v-if="isMastoInitialised" mt3 />
+  </MainContent>
+</template>