main layout

src/templates/Main.vue

@@ -0,0 +1,56 @@
+<template>
+  <div v-if="!defaultRoute && showBack" class="flex md:hidden flex-row items-baseline">
+    <p v-if="!defaultRoute && showBack" class="text-indigo-500" @click="setLink(null)">zur Übersicht</p>
+  </div>
+  <slot v-if="headerInsert" name="headerInsert"></slot>
+  <div
+    class="max-w-full w-full grow flex flex-col divide-y-2 divide-gray-300 bg-white rounded-lg justify-center overflow-hidden"
+  >
+    <slot name="topBar"></slot>
+    <div class="flex flex-col gap-2 grow py-5 overflow-hidden">
+      <slot name="diffMain"></slot>
+      <div v-if="!diffMain" class="flex flex-col gap-2 grow px-7 overflow-y-scroll">
+        <slot name="main"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useNavigationStore } from "../stores/admin/navigation";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    header: {
+      type: String,
+      default: null,
+    },
+    showBack: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    ...mapState(useNavigationStore, ["activeLink"]),
+    defaultRoute() {
+      return this.activeLink == null;
+    },
+    diffMain() {
+      return this.$slots.diffMain;
+    },
+    headerInsert() {
+      return this.$slots.headerInsert;
+    },
+    mid() {
+      return window.matchMedia("(min-width: 800px)").matches;
+    },
+  },
+  methods: {
+    ...mapActions(useNavigationStore, ["setLink"]),
+  },
+});
+</script>

src/templates/Sidebar.vue

@@ -0,0 +1,75 @@
+<template>
+  <div v-if="topButtonsPassed" class="flex flex-row gap-2 empty:contents">
+    <slot name="topButtons"></slot>
+  </div>
+  <div
+    v-if="showTopList"
+    class="w-full h-fit max-h-1/2 flex flex-col divide-y-2 divide-gray-300 bg-white rounded-lg justify-center overflow-hidden"
+  >
+    <div v-if="topSearchPassed" class="flex flex-row gap-1 justify-end items-center pt-5 pb-3 px-7">
+      <slot name="searchTop"></slot>
+    </div>
+    <div class="flex flex-col gap-2 grow overflow-hidden" :class="topTitlePassed ? 'pb-5 pt-2' : ' py-5'">
+      <p v-if="topTitlePassed" class="px-2">{{ topTitle }}</p>
+      <div class="flex flex-col gap-2 h-full px-7 overflow-y-auto">
+        <slot name="topList"></slot>
+      </div>
+    </div>
+  </div>
+  <div class="w-full grow flex flex-col divide-y-2 divide-gray-300 bg-white rounded-lg justify-center overflow-hidden">
+    <div v-if="searchPassed" class="flex flex-row gap-1 justify-end items-center pt-5 pb-3 px-7">
+      <slot name="search"></slot>
+    </div>
+    <div class="flex flex-col gap-2 grow overflow-hidden" :class="titlePassed ? 'pb-5 pt-2' : ' py-5'">
+      <p v-if="titlePassed" class="px-2">{{ mainTitle }}</p>
+      <div class="flex flex-col gap-2 h-full px-7 overflow-y-auto">
+        <slot name="list"></slot>
+      </div>
+    </div>
+  </div>
+  <div v-if="bottomButtonsPassed" class="flex flex-col gap-2 empty:contents">
+    <slot name="bottomButtons"></slot>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  props: {
+    topTitle: {
+      type: String,
+      default: null,
+    },
+    mainTitle: {
+      type: String,
+      default: null,
+    },
+    showTopList: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    defaultRoute() {
+      return ((this.$route?.name as string) ?? "").includes("-default");
+    },
+    topButtonsPassed() {
+      return !!this.$slots.topButtons;
+    },
+    topTitlePassed() {
+      return !!this.topTitle;
+    },
+    topSearchPassed() {
+      return !!this.$slots.searchTop;
+    },
+    titlePassed() {
+      return !!this.mainTitle;
+    },
+    searchPassed() {
+      return !!this.$slots.search;
+    },
+    bottomButtonsPassed() {
+      return !!this.$slots.bottomButtons;
+    },
+  },
+};
+</script>