initial

src/components/AppFooter.vue

@@ -0,0 +1,8 @@
+<template>
+  <v-footer height="40" app>
+    
+  </v-footer>
+</template>
+
+<script setup>
+</script>

src/components/AppHeader.vue

@@ -0,0 +1,35 @@
+<template>
+    <v-app-bar color="primary" prominent>
+        <!-- <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon> -->
+        <v-app-bar-title>ProNature Administrative Console</v-app-bar-title>
+        <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="/game-objects/">Нов игрови обект</v-list-item>
+                <v-list-item>Нов сценарий</v-list-item>
+                <v-list-item>Нова игра</v-list-item>
+            </v-list>
+        </v-menu>
+    </v-app-bar>
+
+    <v-navigation-drawer :location="$vuetify.display.mobile ? 'bottom' : undefined" 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="/game-objects" title="Game Objects"></v-list-item>
+            <v-list-item prepend-icon="mdi-receipt-text-edit-outline" title="Game Scenarios"></v-list-item>
+            <v-list-item prepend-icon="mdi-cogs" title="Game Rules"></v-list-item>
+            <v-list-item prepend-icon="mdi-controller" title="Games"></v-list-item>
+        </v-list>
+    </v-navigation-drawer>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const drawer = ref(false);
+
+</script>

src/components/Home.vue

@@ -0,0 +1,14 @@
+<template>
+  <v-container class="fill-height">
+    <v-responsive
+      class="align-centerfill-height mx-auto"
+    >
+
+      
+    </v-responsive>
+  </v-container>
+</template>
+
+<script setup>
+  //
+</script>

src/components/README.md

@@ -0,0 +1,35 @@
+# Components
+
+Vue template files in this folder are automatically imported.
+
+## 🚀 Usage
+
+Importing is handled by [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components). This plugin automatically imports `.vue` files created in the `src/components` directory, and registers them as global components. This means that you can use any component in your application without having to manually import it.
+
+The following example assumes a component located at `src/components/MyComponent.vue`:
+
+```vue
+<template>
+  <div>
+    <MyComponent />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
+```
+
+When your template is rendered, the component's import will automatically be inlined, which renders to this:
+
+```vue
+<template>
+  <div>
+    <MyComponent />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import MyComponent from '@/components/MyComponent.vue'
+</script>
+```