main layout

src/views/admin/View.vue

@@ -0,0 +1,54 @@
+<template>
+  <SidebarLayout>
+    <template #sidebar>
+      <SidebarTemplate
+        :mainTitle="activeNavigationObject.mainTitle"
+        :topTitle="activeNavigationObject.topTitle"
+        :showTopList="activeNavigationObject.top != null"
+      >
+        <template #topList>
+          <RoutingLink v-for="item in activeNavigationObject.top" :key="item.key" :link="item" />
+        </template>
+        <template #list>
+          <RoutingLink v-for="item in activeNavigationObject.main" :key="item.key" :link="item" />
+        </template>
+      </SidebarTemplate>
+    </template>
+    <template #main>
+      <component v-if="activeLink?.component" :is="activeLink.component" />
+      <div v-else class="w-full h-full bg-white rounded-lg"></div>
+    </template>
+  </SidebarLayout>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useNavigationStore } from "@/stores/admin/navigation";
+import SidebarLayout from "@/layouts/Sidebar.vue";
+import SidebarTemplate from "@/templates/Sidebar.vue";
+import RoutingLink from "@/components/admin/RoutingLink.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    contestId: {
+      type: String,
+      default: "",
+    },
+  },
+  computed: {
+    ...mapState(useNavigationStore, ["activeNavigationObject", "activeTopLevelObject", "activeLink"]),
+  },
+  created() {
+    this.setLink(this.activeTopLevelObject.levelDefault);
+  },
+  beforeUnmount() {
+    this.resetNavigation();
+  },
+  methods: {
+    ...mapActions(useNavigationStore, ["setLink", "resetNavigation", "setTopLevel"]),
+  },
+});
+</script>

src/views/admin/members/Overview.vue

@@ -0,0 +1,24 @@
+<template>
+  <MainTemplate>
+    <template v-slot:topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Übersicht</h1>
+      </div>
+    </template>
+    <template v-slot:diffMain>
+      <div class="flex flex-col gap-2 justify-center items-center h-full"></div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {},
+});
+</script>