Alisa/web/src/components/HeaderBar.vue

<template>
  <div>
    <v-toolbar
      color="main"
      dark
      prominent
    >
     <img src="../assets/turbologo.svg" alt="logo" class="logo" width="75" />

     <v-spacer></v-spacer>
     <!-- Create, Delete, Edit -->
     <div>
      <v-btn icon class="mr-3">
        <Plus />
      </v-btn>
      <v-btn icon class="mr-3">
        <Trash2 />
      </v-btn>
      <v-btn icon class="mr-3">
        <Pencil />
      </v-btn>
     </div>
     <v-text-field
          class="compact-form mr-2"
          label="Search"
          variant="solo"
          density="compact"
          prepend-inner-icon="mdi-magnify"
          hide-details
          single-line
          clearable
          rounded="pill"
        ></v-text-field>
      <v-btn icon variant="outlined" @click="handlelogout">
        <LogOut />
      </v-btn>
    </v-toolbar>
  </div>

</template>

<script setup lang="ts">
import { LogOut } from 'lucide-vue-next';
import { store } from '@/store';
import { Plus } from 'lucide-vue-next';
import { Trash2 } from 'lucide-vue-next';
import { Pencil } from 'lucide-vue-next';

function handlelogout() {
  console.log('logout');
  store.setToken(null);
}

</script>

<style scoped>
.logo {
  margin-right: 20%;
  margin-left: 10px;
}

</style>