Added search button on mobile

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,6 +48,16 @@
     </div>
 
     <div class="flex flex-end items-center space-x-4 pl-3">
+      <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 !== '/') {
@@ -50,6 +65,7 @@
             }
           }}
         />
+      </div>
       <Divider />
       <div class="inline-flex space-x-2">
         <ToggleModeButton />

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>