safetwitch/src/components/NavbarView.vue

<script lang="ts">
export default {}
</script>

<template>
  <div class="p-4 flex items-center justify-between bg-ctp-base text-white">
    <router-link to="/">
      <h1 class="font-bold text-2xl">Safe<color class="text-purple-500">Twitch</color></h1>
    </router-link>

    <div>
      <form class="relative">
        <label for="searchBar" class="hidden">Search</label>
        <v-icon
          name="io-search-outline"
          class="text-black absolute my-auto inset-y-0 left-2"
        ></v-icon>
        <input
          type="text"
          id="searchBar"
          name="searchBar"
          placeholder="Search"
          class="rounded-md p-1 pl-8 text-black"
        />
      </form>
    </div>

    <ul class="inline-flex space-x-6 font-medium">
      <a href="https://codeberg.org/dragongoose/safetwitch">Code</a>
      <router-link to="/privacy">Privacy</router-link>
    </ul>
  </div>
</template>