salix-front/src/components/NavBar.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>
    <QHeader class="bg-dark" color="white" elevated>
        <QToolbar class="q-py-sm q-px-md">
            <QBtn
                @click="stateStore.toggleLeftDrawer()"
                icon="menu"
                class="q-mr-sm"
                round
                dense
                flat
            >
                <QTooltip bottom anchor="bottom right">
                    {{ t('globals.collapseMenu') }}
                </QTooltip>
            </QBtn>
            <RouterLink to="/">
                <QBtn class="q-ml-xs" color="primary" flat round>
                    <QAvatar square size="md">
                        <QImg
                            src="~/assets/logo_icon.svg"
                            :alt="appName"
                            spinner-color="primary"
                        />
                    </QAvatar>
                    <QTooltip bottom>
                        {{ t('globals.backToDashboard') }}
                    </QTooltip>
                </QBtn>
            </RouterLink>
            <QToolbarTitle shrink class="text-weight-bold" v-if="$q.screen.gt.sm">
                {{ appName }}
                <QBadge label="Beta" align="top" />
            </QToolbarTitle>
            <QSpace />
            <div id="searchbar"></div>
            <QSpace />
            <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
                <div id="actions-prepend"></div>
                <QBtn id="pinnedModules" icon="apps" flat dense rounded>
                    <QTooltip bottom>
                        {{ t('globals.pinnedModules') }}
                    </QTooltip>
                    <PinnedModules />
                </QBtn>
                <QBtn rounded dense flat no-wrap id="user">
                    <QAvatar size="lg">
                        <QImg
                            :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
                            spinner-color="primary"
                        >
                        </QImg>
                    </QAvatar>
                    <QTooltip bottom>
                        {{ t('globals.userPanel') }}
                    </QTooltip>
                    <UserPanel />
                </QBtn>
                <div id="actions-append"></div>
            </div>
        </QToolbar>
    </QHeader>
</template>