prepare for #22

src/components/AppHeader.vue

@@ -1,6 +1,11 @@
 <template>
-    <v-app-bar color="blue" scroll-behavior="elevate" scroll-threshold="20">
+    <v-app-bar color="blue" scroll-behavior="elevate" scroll-threshold="20" :height="100" image="/static/bck-2.webp">
         <!-- <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon> -->
+        <template v-slot:prepend>
+            <v-avatar class="ml-3" size="66" rounded="0">
+                <v-img src="/logo.webp" alt="ProNature Logo"></v-img>
+            </v-avatar>
+        </template>
         <v-app-bar-title>{{ l.playground }}</v-app-bar-title>
         <v-btn to="/manage" icon="mdi-wrench-cog-outline" v-if="roles.editor" v-tooltip="l.workshop"></v-btn>
         <v-dialog max-width="480">

src/components/ConsoleHeader.vue

@@ -1,6 +1,11 @@
 <template>
-    <v-app-bar color="primary" scroll-behavior="elevate" scroll-threshold="20">
+    <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>
+            <v-avatar class="ml-3" size="66" rounded="0">
+                <v-img src="/logo.webp" alt="ProNature Logo"></v-img>
+            </v-avatar>
+        </template>
         <v-app-bar-title>{{ l.workshop }}</v-app-bar-title>
         <v-btn to="/" icon="mdi-seesaw" v-tooltip="l.playground"></v-btn>
         <v-menu>
@@ -16,18 +21,17 @@
     </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-database" to="/manage/game-objects/list"
-            <v-list-item prepend-icon="mdi-receipt-text-edit-outline" to="/manage/scenarios/list" :title="l.gameScenarios"></v-list-item>
+                :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>
@@ -46,7 +50,7 @@
 import { useTheme } from 'vuetify'
 const theme = useTheme()
 
-function toggleTheme () {
+function toggleTheme() {
-  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
+    theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
 }
 </script>

src/layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
   <AppHeader />
-  <v-main>
+  <v-main class="playground">
     <router-view />
   </v-main>
   <AppFooter />

src/styles/style.scss

@@ -1,3 +1,8 @@
+.v-main.playground {
+    //background: linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.9)), url(/static/bck-full.webp) no-repeat center center fixed;
+    background-size: cover;
+}
+
 .container {
     margin:auto;
     max-width: 1200px;