60 lines
2.7 KiB
Vue
60 lines
2.7 KiB
Vue
<template>
|
|
<v-app-bar color="primary" scroll-behavior="elevate" scroll-threshold="20" :height="100" image="/static/bck-1.webp">
|
|
<!-- <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon> -->
|
|
<template v-slot:prepend>
|
|
<router-link to="/manage">
|
|
<v-avatar class="ml-3" size="66" rounded="0">
|
|
<v-img src="/logo.webp" alt="ProNature Logo"></v-img>
|
|
</v-avatar>
|
|
</router-link>
|
|
</template>
|
|
<v-app-bar-title>
|
|
<router-link to="/manage">{{ l.workshop }}</router-link>
|
|
</v-app-bar-title>
|
|
<v-btn to="/" icon="mdi-seesaw" v-tooltip="l.playground"></v-btn>
|
|
<v-menu>
|
|
<template v-slot:activator="{ props }">
|
|
<v-btn icon="mdi-plus" variant="text" v-bind="props"></v-btn>
|
|
</template>
|
|
<v-list>
|
|
<v-list-item to="/manage/game-objects/add">{{ l.createGameObject }}</v-list-item>
|
|
<v-list-item to="/manage/scenarios/add">{{ l.createScenario }}</v-list-item>
|
|
<v-list-item to="/manage/games/add">{{ l.createGame }}</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</v-app-bar>
|
|
|
|
<v-navigation-drawer class="bg-secondary" expand-on-hover rail>
|
|
<v-divider></v-divider>
|
|
<v-list nav>
|
|
<v-list-item prepend-icon="mdi-database" to="/manage/game-objects/list"
|
|
:title="l.gameObjects"></v-list-item>
|
|
<v-list-item prepend-icon="mdi-receipt-text-edit-outline" to="/manage/scenarios/list"
|
|
:title="l.gameScenarios"></v-list-item>
|
|
<!-- <v-list-item prepend-icon="mdi-cogs" :title="l.gameRules"></v-list-item> -->
|
|
<v-divider></v-divider>
|
|
<v-list-item prepend-icon="mdi-controller" :title="l.games" to="/manage/games/list"></v-list-item>
|
|
<v-list-item prepend-icon="mdi-cog-play" :title="l.preview" to="/manage/preview/list"></v-list-item>
|
|
|
|
</v-list>
|
|
<v-divider></v-divider>
|
|
<v-list nav>
|
|
<v-list-item @click="toggleTheme" prepend-icon="mdi-theme-light-dark" :title="l.darkMode"></v-list-item>
|
|
<v-list-item prepend-icon="mdi-translate">
|
|
<v-btn-toggle density="compact" v-model="lang" rounded="xl" color="white" variant="outlined">
|
|
<v-btn size="small" value="bg">BG</v-btn>
|
|
<v-btn size="small" value="en">EN</v-btn>
|
|
</v-btn-toggle>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-navigation-drawer>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useTheme } from 'vuetify'
|
|
const theme = useTheme()
|
|
|
|
function toggleTheme() {
|
|
theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
|
|
}
|
|
</script> |