83 lines
3.0 KiB
Vue
83 lines
3.0 KiB
Vue
<script setup>
|
|
import { onMounted } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useSession } from 'src/composables/useSession';
|
|
import UserPanel from 'components/UserPanel.vue';
|
|
import { useState } from 'src/composables/useState';
|
|
import { useStateStore } from 'stores/useStateStore';
|
|
import PinnedModules from './PinnedModules.vue';
|
|
|
|
const { t } = useI18n();
|
|
const session = useSession();
|
|
const stateStore = useStateStore();
|
|
const state = useState();
|
|
const user = state.getUser();
|
|
const token = session.getToken();
|
|
const appName = 'Lilium';
|
|
|
|
onMounted(() => stateStore.setMounted());
|
|
</script>
|
|
|
|
<template>
|
|
<q-header class="bg-dark" color="white" elevated>
|
|
<q-toolbar class="q-py-sm q-px-md">
|
|
<q-btn
|
|
@click="stateStore.toggleLeftDrawer()"
|
|
icon="menu"
|
|
class="q-mr-sm"
|
|
round
|
|
dense
|
|
flat
|
|
>
|
|
<q-tooltip bottom anchor="bottom right">
|
|
{{ t('globals.collapseMenu') }}
|
|
</q-tooltip>
|
|
</q-btn>
|
|
<router-link to="/">
|
|
<q-btn class="q-ml-xs" color="primary" v-if="$q.screen.gt.xs" flat round>
|
|
<q-avatar square size="md">
|
|
<q-img
|
|
src="~/assets/logo_icon.svg"
|
|
:alt="appName"
|
|
spinner-color="primary"
|
|
/>
|
|
</q-avatar>
|
|
<q-tooltip bottom>
|
|
{{ t('globals.backToDashboard') }}
|
|
</q-tooltip>
|
|
</q-btn>
|
|
</router-link>
|
|
<q-toolbar-title shrink class="text-weight-bold" v-if="$q.screen.gt.xs">
|
|
{{ appName }}
|
|
<q-badge label="Beta" align="top" />
|
|
</q-toolbar-title>
|
|
<q-space></q-space>
|
|
<div id="searchbar"></div>
|
|
<q-space></q-space>
|
|
<div class="q-pl-sm q-gutter-sm row items-center no-wrap">
|
|
<div id="actions-prepend"></div>
|
|
<q-btn id="pinnedModules" icon="apps" flat dense rounded>
|
|
<q-tooltip bottom>
|
|
{{ t('globals.pinnedModules') }}
|
|
</q-tooltip>
|
|
<PinnedModules />
|
|
</q-btn>
|
|
<q-btn rounded dense flat no-wrap id="user">
|
|
<q-avatar size="lg">
|
|
<q-img
|
|
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
|
|
spinner-color="primary"
|
|
>
|
|
</q-img>
|
|
</q-avatar>
|
|
<q-tooltip bottom>
|
|
{{ t('globals.userPanel') }}
|
|
</q-tooltip>
|
|
<UserPanel />
|
|
</q-btn>
|
|
<div id="actions-append"></div>
|
|
</div>
|
|
</q-toolbar>
|
|
</q-header>
|
|
</template>
|