Added search button on mobile

This commit is contained in:
freearhey 2023-12-08 20:35:05 +03:00
parent ffc5290cb0
commit 63cbc15550
2 changed files with 47 additions and 7 deletions

View file

@ -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 />

View file

@ -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>