salix-front/src/components/Navbar.vue

<script setup>
import { useI18n } from 'vue-i18n';
import { useState } from 'src/composables/useState';
import { useSession } from 'src/composables/useSession';
import UserPanel from 'src/components/UserPanel.vue';

const { t } = useI18n();
const session = useSession();
const state = useState();
const user = state.getUser();
const token = session.getToken();

function onToggleDrawer() {
    state.drawer.value = !state.drawer.value;
}
</script>

<template>
    <q-header class="bg-dark" color="white" elevated bordered>
        <q-toolbar class="q-py-sm q-px-md">
            <q-btn flat @click="onToggleDrawer()" round dense icon="menu">
                <q-tooltip bottom anchor="bottom right">
                    {{ t('globals.collapseMenu') }}
                </q-tooltip>
            </q-btn>
            <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-tooltip bottom>
                        {{ t('globals.backToDashboard') }}
                    </q-tooltip>
                </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 :to="{ path: '/customer/create' }" 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-badge color="red" text-color="white" floating> 2 </q-badge>
                    <q-tooltip bottom>
                        {{ t('globals.notifications') }}
                    </q-tooltip>
                    <q-menu class="q-pa-md" style="min-width: 250px">
                        <strong>Notifications</strong>
                        <q-separator />
                        <div style="text-align: center; font-size: 2em">
                            <q-spinner-puff color="orange" />
                        </div>
                    </q-menu>
                </q-btn>
                <q-btn 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="white"
                        >
                        </q-img>
                    </q-avatar>
                    <q-icon name="arrow_drop_down" size="s" />
                    <q-tooltip bottom>
                        {{ t('globals.userPanel') }}
                    </q-tooltip>
                    <UserPanel />
                </q-btn>
            </div>
        </q-toolbar>
    </q-header>
</template>