hedera-web/src/layouts/MainLayout.vue

<script setup>
import { ref, onMounted, computed } from 'vue';

import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';

import { useUserStore } from 'stores/user';
import { useAppStore } from 'stores/app';

const router = useRouter();
const userStore = useUserStore();
const appStore = useAppStore();
const hiddenMenuItems = new Set(['Reports']);

const refreshContentKey = ref(0);
const { user, supplantedUser } = storeToRefs(userStore);
const { menuEssentialLinks, title, subtitle, useRightDrawer, rightDrawerOpen } =
    storeToRefs(appStore);
const actions = ref(null);
const leftDrawerOpen = ref(false);
const filteredMenuItems = computed(() =>
    menuEssentialLinks.value.filter(
        item => !hiddenMenuItems.has(item.description)
    )
);
const toggleLeftDrawer = () => {
    leftDrawerOpen.value = !leftDrawerOpen.value;
};

onMounted(async () => {
    await appStore.loadConfig();
    await appStore.getMenuLinks();
    appStore.isHeaderMounted = true;
});

const logout = async () => {
    await userStore.logout();
    router.push('/login');
};

const logoutSupplantedUser = async () => {
    await userStore.logoutSupplantedUser();
    await appStore.getMenuLinks();
    refreshContentKey.value++;
};
</script>

<template>
    <QLayout view="lHh Lpr lFf">
        <QHeader>
            <QToolbar>
                <QBtn
                    flat
                    dense
                    round
                    icon="menu"
                    aria-label="Menu"
                    @click="toggleLeftDrawer"
                />
                <QToolbarTitle>
                    {{ title }}
                    <div v-if="subtitle" class="subtitle text-caption">
                        {{ subtitle }}
                    </div>
                </QToolbarTitle>
                <div id="actions" ref="actions" class="flex items-center"></div>
                <QBtn
                    v-if="useRightDrawer"
                    @click="rightDrawerOpen = !rightDrawerOpen"
                    aria-label="Menu"
                    flat
                    dense
                    round
                >
                    <QIcon name="menu" />
                </QBtn>
            </QToolbar>
        </QHeader>
        <QDrawer v-model="leftDrawerOpen" :width="250" show-if-above>
            <QToolbar class="logo">
                <img src="statics/logo-dark.svg" />
            </QToolbar>
            <div class="user-info">
                <div>
                    <span id="user-name">{{ user?.nickname }}</span>
                    <QBtn flat icon="logout" alt="_Exit" @click="logout()" />
                </div>
                <div v-if="supplantedUser" id="supplant" class="supplant">
                    <span id="supplanted">
                        {{ supplantedUser?.nickname }}
                    </span>
                    <QBtn
                        flat
                        icon="logout"
                        alt="_Exit"
                        @click="logoutSupplantedUser()"
                    />
                </div>
            </div>
            <QList v-for="item in filteredMenuItems" :key="item.id">
                <QItem v-if="!item.childs" :to="`/${item.path}`">
                    <QItemSection>
                        <QItemLabel>{{
                            $t(`menuTitles.${item.description}`)
                        }}</QItemLabel>
                    </QItemSection>
                </QItem>
                <QExpansionItem
                    v-if="item.childs"
                    :label="$t(`menuTitles.${item.description}`)"
                    expand-separator
                >
                    <QList>
                        <QItem
                            v-for="subitem in item.childs"
                            :key="subitem.id"
                            :to="`/${subitem.path}`"
                            class="q-pl-lg"
                        >
                            <QItemSection>
                                <QItemLabel>
                                    {{
                                        $t(`menuTitles.${subitem.description}`)
                                    }}
                                </QItemLabel>
                            </QItemSection>
                        </QItem>
                    </QList>
                </QExpansionItem>
            </QList>
        </QDrawer>
        <QPageContainer :key="refreshContentKey">
            <router-view />
        </QPageContainer>
    </QLayout>
</template>

<style lang="scss" scoped>
.q-toolbar {
    min-height: 64px;
}
.logo {
    background-color: $primary;
    justify-content: center;

    & > img {
        width: 160px;
    }
}
.user-info {
    margin: 25px;

    & > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
        border: 1px solid #eaeaea;

        & > span {
            padding: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: bold;
        }
        .q-btn {
            display: block;
            margin: 0;
            padding: 9px;
            border-radius: 0;

            &:hover {
                background-color: #1a1a1a;
                color: white;
            }
        }
        &.supplant {
            border-top: none;
        }
    }
}
</style>

<style lang="scss">
@import 'src/css/responsive';

.q-drawer {
    .q-item {
        padding-left: 38px;
    }
    .q-list .q-list .q-item {
        padding-left: 50px;
    }
}
.q-page-container > * {
    padding: 16px;
}

@include mobile {
    #actions {
        .q-btn {
            border-radius: 50%;
            padding: 10px;

            &__content {
                & > .q-icon {
                    margin-right: 0;
                }
                & > .block {
                    display: none !important;
                }
            }
        }
    }
}
</style>

<i18n lang="yaml">
en-US:
    visitor: Visitor
es-ES:
    visitor: Visitante
</i18n>