upend/ui/src/layout/Header.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;
    }

    sl-input {
      margin-left: 1em;
      flex-grow: 1;
    }
  }
</style>