84 lines
2.7 KiB
Vue
84 lines
2.7 KiB
Vue
<template>
|
|
<v-app :class="['recipe-bg', { 'landing-page': $route.path === '/' }]">
|
|
|
|
<v-app-bar color="transparent" flat elevation="0" class="px-4" height="70">
|
|
<v-btn to="/" variant="text" class="nav-home-btn">Seasoned</v-btn>
|
|
<v-spacer></v-spacer>
|
|
|
|
<div class="nav-links d-flex align-center">
|
|
<v-menu v-if="isLoggedIn" transition="slide-y-transition" offset="8">
|
|
<template v-slot:activator="{ props }">
|
|
<v-btn v-bind="props" variant="text" class="nav-auth-btn px-4">
|
|
<v-icon icon="mdi-pot-steam" size="small" class="mr-2"></v-icon>
|
|
<span>Menu</span>
|
|
</v-btn>
|
|
</template>
|
|
|
|
<v-list class="menu-card mt-2" min-width="220">
|
|
<v-list-item to="/uploader" prepend-icon="mdi-camera-outline">
|
|
<v-list-item-title class="menu-text">Recipe Uploader</v-list-item-title>
|
|
</v-list-item>
|
|
|
|
<v-list-item to="/chat" prepend-icon="mdi-chef-hat">
|
|
<v-list-item-title class="menu-text">Chef Consultation</v-list-item-title>
|
|
</v-list-item>
|
|
|
|
<v-list-item to="/gallery" prepend-icon="mdi-book-open-variant">
|
|
<v-list-item-title class="menu-text">My Collection</v-list-item-title>
|
|
</v-list-item>
|
|
|
|
<v-divider class="ma-0" color="#dccca7"></v-divider>
|
|
|
|
<v-list-item @click="logout" prepend-icon="mdi-logout">
|
|
<v-list-item-title class="menu-text" style="color: #8c4a32;">Sign Out</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
|
|
<v-btn v-else to="/login" variant="text" class="nav-auth-btn">Sign In</v-btn>
|
|
</div>
|
|
</v-app-bar>
|
|
|
|
<v-main>
|
|
<NuxtPage />
|
|
<SessionTimeout />
|
|
</v-main>
|
|
<v-footer
|
|
class="d-flex flex-column py-4"
|
|
color="transparent"
|
|
flat
|
|
elevation="0"
|
|
style="border: none; box-shadow: none;"
|
|
>
|
|
<v-divider class="w-100 mb-4" color="#dccca7"></v-divider>
|
|
<div class="text-center w-100 menu-text" style="font-size: 0.9rem; opacity: 0.8;">
|
|
Built by and maintained by Chloe Stanton
|
|
</div>
|
|
</v-footer>
|
|
</v-app>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted } from 'vue'
|
|
import '@/assets/css/app-theme.css'
|
|
import SessionTimeout from './components/SessionTimeout.vue'
|
|
const isLoggedIn = useState('isLoggedIn', () => false)
|
|
|
|
onMounted(() => {
|
|
if (import.meta.client) {
|
|
const token = localStorage.getItem('auth_token')
|
|
if (token) {
|
|
isLoggedIn.value = true
|
|
}
|
|
}
|
|
})
|
|
|
|
const logout = () => {
|
|
isLoggedIn.value = false
|
|
if (import.meta.client) {
|
|
localStorage.removeItem('auth_token')
|
|
localStorage.removeItem('token')
|
|
}
|
|
navigateTo('/login')
|
|
}
|
|
</script> |