integrate the user module

2026-02-05 13:50:43 +02:00
parent 9d22fe8413
commit 4d95a40c37
15 changed files with 220 additions and 162 deletions
@@ -0,0 +1,52 @@
+<template>
+    <v-app-bar color="primary" scroll-behavior="elevate" scroll-threshold="20">
+        <!-- <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon> -->
+        <v-app-bar-title>ProNature Games Workshop</v-app-bar-title>
+        <v-btn to="/" icon="mdi-seesaw" v-tooltip="'To 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-list>
+            <v-list-item prepend-avatar="/logo.webp" subtitle="Admin Console" title="ProNature"></v-list-item>
+        </v-list>
+        <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>