110 lines
4.6 KiB
Vue
110 lines
4.6 KiB
Vue
<template>
|
|
<v-app>
|
|
<v-sheet class="bg-gradient justify-center d-flex flex-column" style="height: 100%">
|
|
<div v-if="!isWide" class="d-flex justify-end mr-10 mt-3">
|
|
<v-btn
|
|
class="bg-grey-darken-3 d-flex justify-center"
|
|
size="large"
|
|
density="compact"
|
|
rounded="xl"
|
|
@click="openMenu"
|
|
icon
|
|
>
|
|
<v-icon>
|
|
<svg class="ham hamRotate ham1" viewBox="0 0 100 100" onclick="this.classList.toggle('active')">
|
|
<path
|
|
class="line top"
|
|
d="m 30,33 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40" />
|
|
<path
|
|
class="line middle"
|
|
d="m 30,50 h 40" />
|
|
<path
|
|
class="line bottom"
|
|
d="m 30,67 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40" />
|
|
</svg>
|
|
</v-icon>
|
|
</v-btn>
|
|
</div>
|
|
<v-sheet
|
|
v-if="isWide || menuOpen"
|
|
class="d-flex justify-space-between rounded-lg main-bg h-auto mr-10 ml-10 align-center"
|
|
:class="menuOpen ? 'mt-2 mb-2 pa-2 flex-column' : 'mt-10 mb-3 pa-5'"
|
|
>
|
|
<div class="d-flex justify-center rounded-lg main-bg h-auto mr-10 ml-10">
|
|
<v-label class="text-h6 h-auto w-auto pa-2">Welcome {{ authenticated ? userStore.user['name'] : 'guest' }}!</v-label><br>
|
|
</div>
|
|
<div class="d-flex" :class="menuOpen ? 'justify-center' : 'justify-end'">
|
|
<p class="ml-3 mr-3" :class="menuOpen ? 'text-body-1' : 'text-h6'"><a href="/" class="nav-link text-decoration-none">Главная</a></p>
|
|
<p v-if="!authenticated" class="ml-3 mr-3" :class="menuOpen ? 'text-body-1' : 'text-h6'"><RouterLink to="/login" class="nav-link text-decoration-none">Войти</RouterLink></p>
|
|
<p v-if="!authenticated" class="ml-3 mr-3" :class="menuOpen ? 'text-body-1' : 'text-h6'"><RouterLink to="/register" class="nav-link text-decoration-none">Регистрация</RouterLink></p>
|
|
<p v-if="authenticated" class="ml-3 mr-3" :class="menuOpen ? 'text-body-1' : 'text-h6'"><a href="#" class="nav-link text-decoration-none" @click="logout">Выйти</a></p>
|
|
</div>
|
|
</v-sheet>
|
|
<v-sheet class="rounded-lg main-bg h-100 mt-3 mr-10 ml-10 mb-10 pa-5">
|
|
<RouterView v-slot="{ Component }">
|
|
<Component
|
|
:is="Component"
|
|
/>
|
|
</RouterView>
|
|
</v-sheet>
|
|
</v-sheet>
|
|
</v-app>
|
|
</template>
|
|
|
|
<script>
|
|
import {useUserStore} from "./store/auth.js";
|
|
import {watch} from "vue";
|
|
|
|
|
|
export default {
|
|
name: "App",
|
|
data: () => ({
|
|
userStore: useUserStore(),
|
|
windowHeight: document.documentElement.clientHeight,
|
|
windowWidth: document.documentElement.clientWidth,
|
|
isWide: window.innerWidth >= 460,
|
|
menuOpen: false,
|
|
authenticated: false
|
|
}),
|
|
methods: {
|
|
logout() {
|
|
this.userStore.logout();
|
|
this.$router.push('/login');
|
|
},
|
|
resizeEventHandler(e) {
|
|
this.windowHeight = document.documentElement.clientHeight;
|
|
this.windowWidth = document.documentElement.clientWidth;
|
|
this.isWide = this.windowWidth >= 460;
|
|
if (this.isWide){
|
|
this.menuOpen = false;
|
|
}
|
|
},
|
|
openMenu(){
|
|
this.menuOpen = !this.menuOpen;
|
|
}
|
|
},
|
|
created() {
|
|
window.addEventListener("resize", this.resizeEventHandler);
|
|
},
|
|
mounted() {
|
|
this.resizeEventHandler();
|
|
window.addEventListener("resize", this.resizeEventHandler, { passive: true });
|
|
this.userStore.checkUser();
|
|
watch(this.userStore, (newStore)=>{
|
|
this.authenticated = newStore.user !== null && newStore.user !== undefined;
|
|
if (!this.authenticated){
|
|
this.$router.push('/login');
|
|
} else {
|
|
this.$router.push('/');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|
|
|
|
|