salix-front/src/components/NavBar.vue

<script setup>
import { onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useState } from 'src/composables/useState';
import { useStateStore } from 'stores/useStateStore';
import { useStateQueryStore } from 'src/stores/useStateQueryStore';
import { useQuasar } from 'quasar';
import PinnedModules from './PinnedModules.vue';
import UserPanel from 'components/UserPanel.vue';
import VnBreadcrumbs from './common/VnBreadcrumbs.vue';
import VnAvatar from './ui/VnAvatar.vue';

const { t } = useI18n();
const stateStore = useStateStore();
const quasar = useQuasar();
const stateQuery = useStateQueryStore();
const state = useState();
const user = state.getUser();
const appName = 'Lilium';

onMounted(() => stateStore.setMounted());

const pinnedModulesRef = ref();
</script>

<template>
    <QHeader color="white" elevated>
        <QToolbar class="q-py-sm q-px-md">
            <QBtn
                @click="stateStore.toggleLeftDrawer()"
                icon="dock_to_right"
                round
                dense
                flat
            >
                <QTooltip bottom anchor="bottom right">
                    {{ t('globals.collapseMenu') }}
                </QTooltip>
            </QBtn>
            <RouterLink to="/">
                <QBtn color="primary" flat round v-if="!quasar.platform.is.mobile">
                    <QAvatar square size="md">
                        <QImg
                            src="~/assets/salix_icon.svg"
                            :alt="appName"
                            spinner-color="primary"
                        />
                    </QAvatar>
                    <QTooltip bottom>
                        {{ t('globals.backToDashboard') }}
                    </QTooltip>
                </QBtn>
            </RouterLink>
            <VnBreadcrumbs v-if="$q.screen.gt.sm" />
            <QSpinner
                color="primary"
                class="q-ml-md"
                :class="{
                    'no-visible': !stateQuery.isLoading().value,
                }"
                size="xs"
            />
            <QSpace />
            <div id="searchbar" class="searchbar"></div>
            <QSpace />
            <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
                <div id="actions-prepend"></div>
                <QBtn
                    flat
                    v-if="!quasar.platform.is.mobile"
                    @click="pinnedModulesRef.redirect($route.params.id)"
                    icon="more_up"
                >
                    <QTooltip>
                        {{ t('Go to Salix') }}
                    </QTooltip>
                </QBtn>
                <QBtn
                    :class="{ 'q-pa-none': quasar.platform.is.mobile }"
                    id="pinnedModules"
                    icon="apps"
                    flat
                    dense
                    rounded
                >
                    <QTooltip bottom>
                        {{ t('globals.pinnedModules') }}
                    </QTooltip>
                    <PinnedModules ref="pinnedModulesRef" />
                </QBtn>
                <QBtn class="q-pa-none" rounded dense flat no-wrap id="user">
                    <VnAvatar
                        :worker-id="user.id"
                        :title="user.name"
                        size="lg"
                        color="transparent"
                    />
                    <QTooltip bottom>
                        {{ t('globals.userPanel') }}
                    </QTooltip>
                    <UserPanel />
                </QBtn>
                <div id="actions-append"></div>
            </div>
        </QToolbar>
        <VnBreadcrumbs v-if="$q.screen.lt.md" class="q-ml-md" />
    </QHeader>
</template>

<style lang="scss" scoped>
.searchbar {
    width: max-content;
}
.q-header {
    background-color: var(--vn-section-color);
}
</style>
<i18n>
en:
    Go to Salix: Go to Salix
es:
    Go to Salix: Ir a Salix
</i18n>