From 2d8d47e70e2a78488a7e2970edc0af26abbf5c07 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Sun, 16 Jul 2023 18:31:00 +0200
Subject: [PATCH] Add search bar for larger screens

Co-authored-by: iatenine <iatenine@gmail.com>
---
 src/components/NavBar.vue | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 37b3b79b..21023054 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -27,6 +27,9 @@
             />
             <span v-if="searchText" class="delete-search" @click="searchText = ''">⨉</span>
         </div>
+        <button @click="onSearchClick" id="search-btn" class="input btn mx-1 h-10">
+            <div class="i-fa6-solid:magnifying-glass"></div>
+        </button>
         <!-- 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>
@@ -172,12 +175,7 @@ export default {
         },
         onKeyPress(e) {
             if (e.key === "Enter") {
-                e.target.blur();
-                this.$router.push({
-                    name: "SearchResults",
-                    query: { search_query: this.searchText },
-                });
-                return;
+                this.submitSearch();
             }
         },
         onInputFocus() {
@@ -195,6 +193,17 @@ export default {
                 this.registrationDisabled = config?.registrationDisabled === true;
             });
         },
+        onSearchClick(e) {
+            this.submitSearch(e);
+        },
+        submitSearch(e) {
+            e.target.blur();
+            this.$router.push({
+                name: "SearchResults",
+                query: { search_query: this.searchText },
+            });
+            return;
+        },
     },
 };
 </script>
@@ -210,4 +219,10 @@ export default {
 .mobile-nav div {
     @apply mx-1;
 }
+
+@media screen and (max-width: 848px) {
+    #search-btn {
+        display: none;
+    }
+}
 </style>