LF2/Alisa
6
0
Fork 0
Code Issues 10 Pull requests Projects 1 Releases Packages Wiki Activity Actions

Recoded Headerbar from Scratch

Browse source
This commit is contained in:
BurnLP2013 2024-07-09 11:35:48 +02:00
parent 44e61805b0
commit 1b8ff1a1eb
1 changed files with 16 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
web/src/components/HeaderBar.vue
View file

@ -1,46 +1,32 @@
<template> <template>
<v-row justify="end" class="header-component"> <div>
<v-col cols="auto"> <v-toolbar
<v-app-bar :elevation="0" color="main"> color="main"
dark
prominent
>
<img src="../assets/turbologo.svg" alt="logo" class="logo" width="75" /> <img src="../assets/turbologo.svg" alt="logo" class="logo" width="75" />
<!-- <LogoSVG id="placeholderIcon"/> --> <v-toolbar-title>Vuetify</v-toolbar-title>
<v-spacer></v-spacer>
<v-text-field <v-text-field
class="compact-form" class="compact-form mr-2"
label="Search" label="Search"
variant="solo" variant="solo"
density="compact"
prepend-inner-icon="mdi-magnify" prepend-inner-icon="mdi-magnify"
hide-details hide-details
single-line single-line
clearable clearable
rounded="pill" rounded="pill"
></v-text-field> ></v-text-field>
<!-- <v-btn icon> </v-toolbar>
<v-icon>mdi-dots-vertical</v-icon> </div>
</v-btn> -->
<CircleUser id="userIcon"/>
</v-app-bar>
</v-col>
</v-row>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
</script> </script>
<style scoped> <style scoped>
.compact-form {
transform: scale(0.7);
transform-origin: left;
}
#placeholderIcon {
margin-right: 20%;
margin-left: 10px;
}
#userIcon {
margin-right: 15px;
}
</style> </style>