Alisa/web/src/components/HeaderBar.vue

<template >
  <v-row justify="end" class="header-component">
    <v-col cols="auto">
      <v-app-bar :elevation="0" color="main">
        <img src="../assets/turbologo.svg" alt="logo" class="logo" width="75" />
        <!-- <LogoSVG id="placeholderIcon"/> -->
        <v-text-field
          class="compact-form"
          label="Search"
          variant="solo"
          prepend-inner-icon="mdi-magnify"
          hide-details
          single-line
          clearable
          rounded="pill"
        ></v-text-field>
        <!-- <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
        </v-btn> -->
        <CircleUser id="userIcon"/>
      </v-app-bar>
    </v-col>
  </v-row>
</template>

<script setup lang="ts">


</script>

<style scoped>

.compact-form {
    transform: scale(0.7);
    transform-origin: left;
}

#placeholderIcon {
  margin-right: 20%;
  margin-left: 10px;
}

#userIcon {
  margin-right: 15px;
}
</style>