57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
Vue
<template>
|
|
<div id="app">
|
|
<template v-if="authStore.isLoggedIn">
|
|
<AppHeader />
|
|
<div class="app-container">
|
|
<AppSidebar :active-menu="currentRoute" @menu-select="handleMenuSelect" />
|
|
<main class="app-main">
|
|
<router-view />
|
|
</main>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<router-view />
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { useAuthStore } from './stores/auth'
|
|
import AppHeader from './components/layout/AppHeader.vue'
|
|
import AppSidebar from './components/layout/AppSidebar.vue'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const authStore = useAuthStore()
|
|
|
|
const currentRoute = computed(() => route.path)
|
|
|
|
function handleMenuSelect(path) {
|
|
router.push(path)
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
#app {
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.app-container {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
.app-sidebar {
|
|
width: 200px;
|
|
flex-shrink: 0;
|
|
}
|
|
.app-main {
|
|
flex: 1;
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|