60 lines
2.3 KiB
Vue
60 lines
2.3 KiB
Vue
|
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { useState } from 'src/composables/useState';
|
||
|
|
import { useSession } from 'src/composables/useSession';
|
||
|
|
import UserPanel from 'src/components/UserPanel.vue';
|
||
|
|
|
||
|
|
const session = useSession();
|
||
|
|
const state = useState();
|
||
|
|
const user = state.getUser();
|
||
|
|
const token = session.getToken();
|
||
|
|
|
||
|
|
defineEmits(['toggle-drawer']);
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<q-header class="bg-dark" color="white" elevated bordered>
|
||
|
|
<q-toolbar class="q-py-sm q-px-md">
|
||
|
|
<q-btn flat @click="$emit('toggle-drawer')" round dense icon="menu" />
|
||
|
|
<router-link to="/">
|
||
|
|
<q-btn flat round class="q-ml-xs" v-if="$q.screen.gt.xs">
|
||
|
|
<q-avatar square size="md">
|
||
|
|
<q-img src="~/assets/logo_icon.svg" alt="Logo" />
|
||
|
|
</q-avatar>
|
||
|
|
</q-btn>
|
||
|
|
</router-link>
|
||
|
|
<q-toolbar-title shrink class="text-weight-bold">Salix</q-toolbar-title>
|
||
|
|
<q-space></q-space>
|
||
|
|
<div class="q-pl-sm q-gutter-sm row items-center no-wrap">
|
||
|
|
<q-btn v-if="$q.screen.gt.xs" dense flat size="md" icon="add">
|
||
|
|
<q-icon name="arrow_drop_down" size="s" />
|
||
|
|
<q-menu>
|
||
|
|
<q-list style="min-width: 150px">
|
||
|
|
<q-item clickable>
|
||
|
|
<q-item-section>New customer</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item clickable>
|
||
|
|
<q-item-section>New ticket</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
</q-list>
|
||
|
|
</q-menu>
|
||
|
|
</q-btn>
|
||
|
|
<q-btn v-if="$q.screen.gt.xs" dense flat round size="md" icon="notifications" />
|
||
|
|
<q-btn dense flat no-wrap>
|
||
|
|
<q-avatar size="lg">
|
||
|
|
<q-img
|
||
|
|
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
|
||
|
|
spinner-color="white"
|
||
|
|
/>
|
||
|
|
</q-avatar>
|
||
|
|
<q-tooltip>Account</q-tooltip>
|
||
|
|
<q-icon name="arrow_drop_down" size="s" />
|
||
|
|
<UserPanel />
|
||
|
|
</q-btn>
|
||
|
|
</div>
|
||
|
|
</q-toolbar>
|
||
|
|
</q-header>
|
||
|
|
</template>
|