89 lines
2.5 KiB
Vue
89 lines
2.5 KiB
Vue
<template>
|
|
<el-container direction="vertical">
|
|
<el-header v-if="!route.meta.hideNav" height="auto" class="cms-header">
|
|
<div class="cms-header__bar flex items-center gap-12">
|
|
<div class="logo">Nullcart CMS</div>
|
|
|
|
<el-menu
|
|
mode="horizontal"
|
|
:ellipsis="true"
|
|
menu-trigger="click"
|
|
close-on-click-outside
|
|
:default-active="menuActive"
|
|
class="cms-nav-menu"
|
|
router
|
|
>
|
|
<el-menu-item index="/products">Products</el-menu-item>
|
|
<el-menu-item index="/categories">Categories</el-menu-item>
|
|
<el-menu-item index="/discount-codes">Discount codes</el-menu-item>
|
|
<el-menu-item index="/orders">Orders</el-menu-item>
|
|
<el-menu-item index="/wallet">Wallet</el-menu-item>
|
|
<el-menu-item index="/settings">Settings</el-menu-item>
|
|
</el-menu>
|
|
|
|
<div class="cms-header__actions flex items-center gap-8">
|
|
<theme-toggle />
|
|
<el-button link type="primary" @click="onSignOut">Sign out</el-button>
|
|
</div>
|
|
</div>
|
|
</el-header>
|
|
|
|
<el-main class="main-wrapper">
|
|
<router-view />
|
|
</el-main>
|
|
</el-container>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onBeforeMount } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { ROUTE_NAMES } from '@/consts/routeNames';
|
|
import { useAuthStore } from '@/stores/auth';
|
|
import { useColorSchemeStore } from '@/stores/colorScheme';
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const authStore = useAuthStore();
|
|
const colorSchemeStore = useColorSchemeStore();
|
|
|
|
const menuActive = computed(() => route.meta.activeMenu ?? route.path);
|
|
|
|
onBeforeMount(() => {
|
|
colorSchemeStore.initColorScheme();
|
|
});
|
|
|
|
const onSignOut = () => {
|
|
authStore.clearSession();
|
|
|
|
router.push({ name: ROUTE_NAMES.Login });
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.cms-header__bar {
|
|
min-width: 0;
|
|
}
|
|
|
|
.logo {
|
|
flex-shrink: 0;
|
|
font-size: var(--el-font-size-large);
|
|
font-weight: var(--el-font-weight-primary);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.cms-nav-menu {
|
|
flex: 1;
|
|
min-width: 0;
|
|
border-bottom: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.cms-header__actions {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.main-wrapper {
|
|
min-height: calc(100vh - var(--el-header-height));
|
|
}
|
|
</style>
|