From 63cbc15550bba71f2357a30ff5bce9f744d24aaf Mon Sep 17 00:00:00 2001
From: freearhey <7253922+freearhey@users.noreply.github.com>
Date: Fri, 8 Dec 2023 20:35:05 +0300
Subject: [PATCH] Added search button on mobile

---
 src/components/NavBar.svelte       | 30 +++++++++++++++++++++++-------
 src/components/SearchButton.svelte | 24 ++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 7 deletions(-)
 create mode 100644 src/components/SearchButton.svelte

diff --git a/src/components/NavBar.svelte b/src/components/NavBar.svelte
index 0f9efe46e..3088891cc 100644
--- a/src/components/NavBar.svelte
+++ b/src/components/NavBar.svelte
@@ -1,5 +1,6 @@
 <script>
   import { query, hasQuery, search } from '~/store'
+  import SearchButton from './SearchButton.svelte'
   import SearchFieldMini from './SearchFieldMini.svelte'
   import Divider from './Divider.svelte'
   import CreatePlaylistButton from './CreatePlaylistButton.svelte'
@@ -16,6 +17,10 @@
     hasQuery.set(false)
     search('')
   }
+
+  function scrollToTop() {
+    document.body.scrollIntoView()
+  }
 </script>
 
 <nav
@@ -43,13 +48,24 @@
     </div>
 
     <div class="flex flex-end items-center space-x-4 pl-3">
-      <CreatePlaylistButton
-        on:click={() => {
-          if ($page.url.pathname !== '/') {
-            goto('/')
-          }
-        }}
-      />
+      <div class="inline-flex space-x-2">
+        {#if withSearch}
+          <div class="block sm:hidden">
+            <SearchButton
+              on:click={() => {
+                scrollToTop()
+              }}
+            />
+          </div>
+        {/if}
+        <CreatePlaylistButton
+          on:click={() => {
+            if ($page.url.pathname !== '/') {
+              goto('/')
+            }
+          }}
+        />
+      </div>
       <Divider />
       <div class="inline-flex space-x-2">
         <ToggleModeButton />
diff --git a/src/components/SearchButton.svelte b/src/components/SearchButton.svelte
new file mode 100644
index 000000000..a062a4997
--- /dev/null
+++ b/src/components/SearchButton.svelte
@@ -0,0 +1,24 @@
+<script>
+  import SquareButton from '~/components/SquareButton.svelte'
+  import { createEventDispatcher } from 'svelte'
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<SquareButton
+  on:click={() => {
+    dispatch('click')
+  }}
+  aria-label="Go to search"
+  title="Go to search"
+>
+  <span class="inline">
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill-rule="evenodd"
+        d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+        clip-rule="evenodd"
+      ></path>
+    </svg>
+  </span>
+</SquareButton>