67 lines
1.3 KiB
Svelte
67 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { Link } from "svelte-navigator";
|
|
export let searchQuery = "";
|
|
$: console.log(searchQuery);
|
|
// this.$router.replace({ name: "search", query: { q: this.searchQuery } });
|
|
</script>
|
|
|
|
<div class="header">
|
|
<h1>
|
|
<Link to="/">
|
|
<img class="logo" src="/assets/upend.svg" alt="UpEnd logo" />
|
|
UpEnd
|
|
</Link>
|
|
</h1>
|
|
<sl-input
|
|
placeholder="Search"
|
|
value={searchQuery}
|
|
on:sl-input={(ev) => (searchQuery = ev.target.value)}
|
|
>
|
|
<sl-icon name="search" slot="prefix" />
|
|
</sl-input>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 0.5rem;
|
|
height: 3.5rem;
|
|
border-bottom: 1px solid var(--foreground);
|
|
|
|
background: var(--background);
|
|
|
|
h1 {
|
|
font-size: 16pt;
|
|
font-weight: normal;
|
|
margin: 0;
|
|
|
|
:global(a) {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
color: var(--foreground);
|
|
text-decoration: none;
|
|
font-weight: normal;
|
|
}
|
|
|
|
img {
|
|
margin-right: 0.5em;
|
|
}
|
|
}
|
|
|
|
.logo {
|
|
display: inline-block;
|
|
height: 1.5em;
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
filter: invert(1);
|
|
}
|
|
}
|
|
|
|
sl-input {
|
|
margin-left: 1em;
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
</style>
|