mirror of
https://github.com/kremalicious/blog.git
synced 2024-06-16 01:23:15 +02:00
43 lines
853 B
Plaintext
43 lines
853 B
Plaintext
---
|
|
import { Search as SearchIcon } from '@images/components'
|
|
import Search from './Search.tsx'
|
|
---
|
|
|
|
<button id="search-button" type="button" title="Search" class="searchButton">
|
|
<SearchIcon />
|
|
</button>
|
|
|
|
<Search client:only="react" />
|
|
|
|
<script>
|
|
import { isSearchOpen } from '@stores/search'
|
|
const button = document.querySelector('#search-button')
|
|
|
|
isSearchOpen.subscribe((value) =>
|
|
document.body.classList.toggle('hasSearchOpen', value)
|
|
)
|
|
|
|
button?.addEventListener('click', () => isSearchOpen.set(!isSearchOpen.get()))
|
|
</script>
|
|
|
|
<style>
|
|
.searchButton:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
.searchButton svg {
|
|
stroke: var(--text-color-light);
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.searchButton:hover svg,
|
|
.searchButton:focus svg {
|
|
stroke: var(--link-color);
|
|
}
|
|
|
|
:global(.hasSearchOpen) {
|
|
overflow: hidden;
|
|
}
|
|
</style>
|