src/router/adminGuard.ts

@@ -12,14 +12,7 @@ export async function abilityAndNavUpdate(to: any, from: any, next: any) {
   let section = to.meta.section;
   let module = to.meta.module;
 
-  if (to.name == "admin-default") {
-    navigation.activeNavigation = "club";
-    navigation.activeLink = null;
-    navigation.updateTopLevel();
-    navigation.updateNavigation();
-    NProgress.done();
-    next();
-  } else if ((admin && ability.isAdmin()) || ability.can(type, section, module)) {
+  if ((admin && ability.isAdmin()) || ability.can(type, section, module)) {
     NProgress.done();
     navigation.activeNavigation = to.name.split("-")[1];
     navigation.activeLink = to.name.split("-")[2];

src/router/index.ts

@@ -15,7 +15,7 @@ const router = createRouter({
   routes: [
     {
       path: "/",
-      redirect: { name: "admin-default" },
+      redirect: { name: "admin" },
     },
     {
       path: "/login",
@@ -76,13 +76,12 @@ const router = createRouter({
       path: "/admin",
       name: "admin",
       component: () => import("@/views/admin/View.vue"),
-      beforeEnter: [isAuthenticated, abilityAndNavUpdate],
+      beforeEnter: [isAuthenticated],
       children: [
         {
           path: "",
           name: "admin-default",
           component: () => import("@/views/admin/ViewSelect.vue"),
-          beforeEnter: [abilityAndNavUpdate],
         },
         {
           path: "club",

src/stores/ability.ts

@@ -33,21 +33,13 @@ export const useAbilityStore = defineStore("ability", {
         if (type == "admin") return permissions?.admin ?? permissions?.adminByOwner ?? false;
         if (permissions?.admin || permissions?.adminByOwner) return true;
         if (
-          (permissions[section]?.all == "*" || permissions[section]?.all?.includes(type)) &&
+          permissions[section]?.all == "*" ||
+          permissions[section]?.all?.includes(type) ||
           permissions[section] != undefined
         )
           return true;
         return false;
       },
-    canAccessSection:
-      (state) =>
-      (section: PermissionSection): boolean => {
-        const permissions = state.permissions;
-        if (state.isOwner) return true;
-        if (permissions?.admin || permissions?.adminByOwner) return true;
-        if (permissions[section] != undefined) return true;
-        return false;
-      },
     isAdmin: (state) => (): boolean => {
       const permissions = state.permissions;
       if (state.isOwner) return true;
@@ -80,20 +72,13 @@ export const useAbilityStore = defineStore("ability", {
         if (type == "admin") return permissions?.admin ?? permissions?.adminByOwner ?? false;
         if (permissions?.admin || permissions?.adminByOwner) return true;
         if (
-          (permissions[section]?.all == "*" || permissions[section]?.all?.includes(type)) &&
+          permissions[section]?.all == "*" ||
+          permissions[section]?.all?.includes(type) ||
           permissions[section] != undefined
         )
           return true;
         return false;
       },
-    _canAccessSection:
-      () =>
-      (permissions: PermissionObject, section: PermissionSection): boolean => {
-        // ignores ownership
-        if (permissions?.admin || permissions?.adminByOwner) return true;
-        if (permissions[section] != undefined) return true;
-        return false;
-      },
   },
   actions: {
     setAbility(permissions: PermissionObject, isOwner: boolean) {

src/stores/admin/navigation.ts

@@ -48,7 +48,7 @@ export const useNavigationStore = defineStore("navigation", {
     updateTopLevel() {
       const abilityStore = useAbilityStore();
       this.topLevel = [
-        ...(abilityStore.canAccessSection("club")
+        ...(abilityStore.canSection("read", "club")
           ? [
               {
                 key: "club",
@@ -57,7 +57,7 @@ export const useNavigationStore = defineStore("navigation", {
               } as topLevelNavigationModel,
             ]
           : []),
-        ...(abilityStore.canAccessSection("configuration")
+        ...(abilityStore.canSection("read", "configuration")
           ? [
               {
                 key: "configuration",
@@ -66,7 +66,7 @@ export const useNavigationStore = defineStore("navigation", {
               } as topLevelNavigationModel,
             ]
           : []),
-        ...(abilityStore.canAccessSection("management")
+        ...(abilityStore.canSection("read", "management")
           ? [
               {
                 key: "management",
@@ -147,8 +147,7 @@ export const useNavigationStore = defineStore("navigation", {
         this.activeNavigationObject.main.findIndex((e) => e.key == this.activeLink) == -1 ||
         this.activeLink == "default"
       ) {
-        let link = this.activeNavigationObject.main.filter((m) => !m.key.startsWith("divider"))[0].key;
-        this.activeLink = link;
+        let link = this.activeNavigationObject.main[0].key;
         router.push({ name: `admin-${this.activeNavigation}-${link}` });
       }
     },

src/templates/Main.vue

@@ -16,13 +16,10 @@
   <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"
   >
-    <div v-if="topBar || title" class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-      <h1 v-if="title" class="font-bold text-xl h-8 min-h-fit">{{ title }}</h1>
-      <slot name="topBar"></slot>
-    </div>
+    <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-auto">
+      <div v-if="!diffMain" class="flex flex-col gap-2 grow px-7 overflow-y-scroll">
         <slot name="main"></slot>
       </div>
     </div>
@@ -54,10 +51,6 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
-    title: {
-      type: String,
-      default: "",
-    },
   },
   computed: {
     ...mapState(useNavigationStore, ["activeLink", "activeNavigation"]),
@@ -67,9 +60,6 @@ export default defineComponent({
     rootRoute() {
       return ((this.$route?.name as string) ?? "").split("-")[0];
     },
-    topBar() {
-      return this.$slots.topBar;
-    },
     diffMain() {
       return this.$slots.diffMain;
     },

src/views/account/Administration.vue

@@ -1,5 +1,10 @@
 <template>
-  <MainTemplate title="Administration übertragen" :useStagedOverviewLink="false">
+  <MainTemplate :useStagedOverviewLink="false">
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Administration übertragen</h1>
+      </div>
+    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/account/LoginData.vue

@@ -1,5 +1,10 @@
 <template>
-  <MainTemplate title="Meine Anmeldedaten" :useStagedOverviewLink="false">
+  <MainTemplate :useStagedOverviewLink="false">
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Meine Anmeldedaten</h1>
+      </div>
+    </template>
     <template #diffMain>
       <Spinner v-if="loading" class="mx-auto" />
       <div v-else class="flex flex-col w-full h-full gap-2 px-7 overflow-hidden">

src/views/account/Me.vue

@@ -1,5 +1,10 @@
 <template>
-  <MainTemplate title="Mein Account" :useStagedOverviewLink="false">
+  <MainTemplate :useStagedOverviewLink="false">
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Mein Account</h1>
+      </div>
+    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/account/Permission.vue

@@ -1,13 +1,18 @@
 <template>
-  <MainTemplate title="Meine Berechtigungen" :useStagedOverviewLink="false">
+  <MainTemplate :useStagedOverviewLink="false">
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Meine Berechtigungen</h1>
+      </div>
+    </template>
     <template #main>
-      <Permission :permissions="permissions" disableEdit />
+      <Permission :permissions="permissions" :disableEdit="true" />
     </template>
   </MainTemplate>
 </template>
 
 <script setup lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, markRaw, defineAsyncComponent } from "vue";
 import { mapActions, mapState } from "pinia";
 import MainTemplate from "@/templates/Main.vue";
 import Permission from "@/components/admin/Permission.vue";

src/views/admin/club/calendar/Calendar.vue

@@ -1,9 +1,15 @@
 <template>
-  <MainTemplate title="Kalender">
+  <MainTemplate>
     <template #topBar>
-      <div class="flex flex-row gap-2">
-        <PlusIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="select({ start: '', end: '', allDay: false })" />
-        <LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" />
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Kalender</h1>
+        <div class="flex flex-row gap-2">
+          <PlusIcon
+            class="text-gray-500 h-5 w-5 cursor-pointer"
+            @click="select({ start: '', end: '', allDay: false })"
+          />
+          <LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" />
+        </div>
       </div>
     </template>
     <template #diffMain>

src/views/admin/club/listprint/ListPrint.vue

@@ -1,77 +1,84 @@
 <template>
-  <MainTemplate title="Liste Drucken">
-    <template #main>
-      <form
-        class="flex flex-col h-fit w-full border border-primary rounded-md p-2 gap-2"
-        @submit.prevent="sendPrintJob"
-      >
-        <div class="flex flex-row gap-2 items-center">
-          <p class="min-w-16">Titel:</p>
-          <input id="title" type="text" required />
-        </div>
-        <div class="flex flex-row gap-2 items-center">
-          <p class="min-w-16">Query:</p>
-          <select id="query" value="member">
-            <option value="member">(system) alle Mitglieder</option>
-            <option value="memberByRunningMembership">(system) alle Mitglieder mit laufender Mitgliedschaft</option>
-            <option v-for="query in queries" :key="query.id" :value="query.id">
-              {{ query.title }}
-            </option>
-          </select>
-        </div>
-        <div class="flex flex-col md:flex-row gap-2 md:items-center">
-          <div class="flex flex-row w-full gap-2 items-center">
-            <p class="min-w-16">Kopfzeile:</p>
-            <select id="header" value="def">
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Liste Drucken</h1>
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col w-full h-full gap-2 px-7 overflow-y-auto">
+        <form
+          class="flex flex-col h-fit w-full border border-primary rounded-md p-2 gap-2"
+          @submit.prevent="sendPrintJob"
+        >
+          <div class="flex flex-row gap-2 items-center">
+            <p class="min-w-16">Titel:</p>
+            <input id="title" type="text" required />
+          </div>
+          <div class="flex flex-row gap-2 items-center">
+            <p class="min-w-16">Query:</p>
+            <select id="query" value="member">
+              <option value="member">(system) alle Mitglieder</option>
+              <option value="memberByRunningMembership">(system) alle Mitglieder mit laufender Mitgliedschaft</option>
+              <option v-for="query in queries" :key="query.id" :value="query.id">
+                {{ query.title }}
+              </option>
+            </select>
+          </div>
+          <div class="flex flex-col md:flex-row gap-2 md:items-center">
+            <div class="flex flex-row w-full gap-2 items-center">
+              <p class="min-w-16">Kopfzeile:</p>
+              <select id="header" value="def">
+                <option value="def">Standard-Vorlage verwenden</option>
+                <option v-for="template in templates" :key="template.id" :value="template.id">
+                  {{ template.template }}
+                </option>
+              </select>
+            </div>
+            <div class="flex flex-row gap-2 items-center">
+              <p class="whitespace-nowrap">Höhe [mm]:</p>
+              <input id="headerHeight" type="number" :min="15" class="w-24!" placeholder="15" />
+            </div>
+          </div>
+          <div class="flex flex-row gap-2 items-center">
+            <p class="min-w-16">Hauptteil:</p>
+            <select id="body" value="def">
               <option value="def">Standard-Vorlage verwenden</option>
+              <option value="listprint.member">(system) Mitgliederliste</option>
               <option v-for="template in templates" :key="template.id" :value="template.id">
                 {{ template.template }}
               </option>
             </select>
           </div>
-          <div class="flex flex-row gap-2 items-center">
-            <p class="whitespace-nowrap">Höhe [mm]:</p>
-            <input id="headerHeight" type="number" :min="15" class="w-24!" placeholder="15" />
+          <div class="flex flex-col md:flex-row gap-2 md:items-center">
+            <div class="flex flex-row w-full gap-2 items-center">
+              <p class="min-w-16">Fußzeile:</p>
+              <select id="footer" value="def">
+                <option value="def">Standard-Vorlage verwenden</option>
+                <option v-for="template in templates" :key="template.id" :value="template.id">
+                  {{ template.template }}
+                </option>
+              </select>
+            </div>
+            <div class="flex flex-row gap-2 items-center">
+              <p class="whitespace-nowrap">Höhe [mm]:</p>
+              <input id="footerHeight" type="number" :min="15" class="w-24!" placeholder="15" />
+            </div>
           </div>
-        </div>
-        <div class="flex flex-row gap-2 items-center">
-          <p class="min-w-16">Hauptteil:</p>
-          <select id="body" value="def">
-            <option value="def">Standard-Vorlage verwenden</option>
-            <option value="listprint.member">(system) Mitgliederliste</option>
-            <option v-for="template in templates" :key="template.id" :value="template.id">
-              {{ template.template }}
-            </option>
-          </select>
-        </div>
-        <div class="flex flex-col md:flex-row gap-2 md:items-center">
-          <div class="flex flex-row w-full gap-2 items-center">
-            <p class="min-w-16">Fußzeile:</p>
-            <select id="footer" value="def">
-              <option value="def">Standard-Vorlage verwenden</option>
-              <option v-for="template in templates" :key="template.id" :value="template.id">
-                {{ template.template }}
-              </option>
-            </select>
+          <div class="flex flex-row gap-2">
+            <button type="submit" primary class="w-fit!">Liste drucken</button>
+            <button type="reset" primary-outline class="w-fit!">zurücksetzen</button>
           </div>
-          <div class="flex flex-row gap-2 items-center">
-            <p class="whitespace-nowrap">Höhe [mm]:</p>
-            <input id="footerHeight" type="number" :min="15" class="w-24!" placeholder="15" />
+        </form>
+        <div class="w-full grow min-h-[50%] flex flex-col gap-2">
+          <Spinner v-if="status == 'loading'" />
+          <div class="grow">
+            <iframe v-show="status == 'success'" ref="viewer" class="w-full h-full" />
           </div>
-        </div>
-        <div class="flex flex-row gap-2">
-          <button type="submit" primary class="w-fit!">Liste drucken</button>
-          <button type="reset" primary-outline class="w-fit!">zurücksetzen</button>
-        </div>
-      </form>
-      <div class="w-full grow min-h-[50%] flex flex-col gap-2">
-        <Spinner v-if="status == 'loading'" />
-        <div class="grow">
-          <iframe v-show="status == 'success'" ref="viewer" class="w-full h-full" />
-        </div>
 
-        <div v-show="status == 'success'" class="flex flex-row gap-2 justify-end">
-          <a ref="download" button primary class="w-fit!">download</a>
+          <div v-show="status == 'success'" class="flex flex-row gap-2 justify-end">
+            <a ref="download" button primary class="w-fit!">download</a>
+          </div>
         </div>
       </div>
     </template>

src/views/admin/club/members/Member.vue

@@ -1,5 +1,10 @@
 <template>
-  <MainTemplate title="Mitglieder">
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Mitglieder</h1>
+      </div>
+    </template>
     <template #diffMain>
       <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
         <Pagination

src/views/admin/club/members/MemberRouting.vue

@@ -4,11 +4,12 @@
       <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
     </template>
     <template #topBar>
-      <h1 class="font-bold text-xl h-8 min-h-fit">
-        {{ activeMemberObj?.lastname }}, {{ activeMemberObj?.firstname }}
-        {{ activeMemberObj?.nameaffix ? `- ${activeMemberObj?.nameaffix}` : "" }}
-      </h1>
-      <div class="flex flex-row gap-2">
+      <div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8 min-h-fit grow">
+          {{ activeMemberObj?.lastname }}, {{ activeMemberObj?.firstname }}
+          {{ activeMemberObj?.nameaffix ? `- ${activeMemberObj?.nameaffix}` : "" }}
+        </h1>
+
         <div title="Mitgliederliste drucken" @click="openPrintModal">
           <DocumentTextIcon class="w-5 h-5 cursor-pointer" />
         </div>

src/views/admin/club/members/Overview.vue

@@ -0,0 +1,24 @@
+<template>
+  <MainTemplate>
+    <template #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 #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>

src/views/admin/club/newsletter/Newsletter.vue

@@ -1,5 +1,10 @@
 <template>
-  <MainTemplate title="Newsletter">
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Newsletter</h1>
+      </div>
+    </template>
     <template #diffMain>
       <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
         <Pagination

src/views/admin/club/newsletter/NewsletterRouting.vue

@@ -1,17 +1,20 @@
 <template>
-  <MainTemplate :title="origin?.title">
+  <MainTemplate>
     <template #headerInsert>
       <RouterLink to="../" class="text-primary w-fit">zurück zur Liste</RouterLink>
     </template>
     <template #topBar>
-      <NewsletterSyncing
-        :executeSyncAll="executeSyncAll"
-        @syncState="
-          (state) => {
-            syncState = state;
-          }
-        "
-      />
+      <div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8 min-h-fit grow">{{ origin?.title }}</h1>
+        <NewsletterSyncing
+          :executeSyncAll="executeSyncAll"
+          @syncState="
+            (state) => {
+              syncState = state;
+            }
+          "
+        />
+      </div>
     </template>
     <template #diffMain>
       <div class="flex flex-col gap-2 grow px-7 overflow-hidden">

src/views/admin/club/protocol/Protocol.vue

@@ -1,5 +1,10 @@
 <template>
-  <MainTemplate title="Protokolle">
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Protokolle</h1>
+      </div>
+    </template>
     <template #diffMain>
       <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
         <Pagination

src/views/admin/club/protocol/ProtocolRouting.vue

@@ -1,17 +1,20 @@
 <template>
-  <MainTemplate :title="`${origin?.title}, ${origin?.date}`">
+  <MainTemplate>
     <template #headerInsert>
       <RouterLink to="../" class="text-primary w-fit">zurück zur Liste</RouterLink>
     </template>
     <template #topBar>
-      <ProtocolSyncing
-        :executeSyncAll="executeSyncAll"
-        @syncState="
-          (state) => {
-            syncState = state;
-          }
-        "
-      />
+      <div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8 min-h-fit grow">{{ origin?.title }}, {{ origin?.date }}</h1>
+        <ProtocolSyncing
+          :executeSyncAll="executeSyncAll"
+          @syncState="
+            (state) => {
+              syncState = state;
+            }
+          "
+        />
+      </div>
     </template>
     <template #diffMain>
       <div class="flex flex-col gap-2 grow px-7 overflow-hidden">
@@ -89,10 +92,10 @@ export default defineComponent({
   },
   mounted() {
     this.fetchProtocolByActiveId();
-    this.fetchProtocolAgenda();
-    this.fetchProtocolDecision();
-    this.fetchProtocolPresence();
-    this.fetchProtocolVoting();
+    this.fetchProtocolAgenda()
+    this.fetchProtocolDecision()
+    this.fetchProtocolPresence()
+    this.fetchProtocolVoting()
   },
   // this.syncState is undefined, so it will never work
   // beforeRouteLeave(to, from, next) {
@@ -115,8 +118,8 @@ export default defineComponent({
     ...mapActions(useProtocolStore, ["fetchProtocolByActiveId"]),
     ...mapActions(useProtocolAgendaStore, ["fetchProtocolAgenda"]),
     ...mapActions(useProtocolDecisionStore, ["fetchProtocolDecision"]),
-    ...mapActions(useProtocolPresenceStore, ["fetchProtocolPresence"]),
-    ...mapActions(useProtocolVotingStore, ["fetchProtocolVoting"]),
+    ...mapActions(useProtocolPresenceStore,["fetchProtocolPresence"]),
+    ...mapActions(useProtocolVotingStore,["fetchProtocolVoting"]),
     ...mapActions(useModalStore, ["openModal"]),
     openInfoModal() {
       this.openModal(

src/views/admin/club/query/Builder.vue

@@ -1,50 +1,57 @@
 <template>
-  <MainTemplate title="Query Builder">
-    <template #main>
-      <BuilderHost
-        v-model="query"
-        allow-predefined-select
-        @query:run="sendQuery"
-        @query:save="triggerSave"
-        @results:clear="clearResults"
-        @results:export="exportData"
-      />
-      <p>Ergebnisse:</p>
-      <div
-        v-if="loadingData == 'failed'"
-        class="flex flex-col p-2 border border-red-600 bg-red-200 rounded-md select-none"
-      >
-        <p v-if="typeof queryError == 'string'">
-          {{ queryError }}
-        </p>
-        <div v-else>
-          <p>
-            CODE: <br />
-            {{ queryError.code }}
-          </p>
-          <br />
-          <p>
-            MSG: <br />
-            {{ queryError.msg }}
-          </p>
-          <br />
-          <p>
-            RESULTING SQL: <br />
-            {{ queryError.sql }}
-          </p>
-        </div>
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Query Builder</h1>
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col w-full h-full gap-2 px-7 overflow-y-auto">
+        <BuilderHost
+          v-model="query"
+          allow-predefined-select
+          @query:run="sendQuery"
+          @query:save="triggerSave"
+          @results:clear="clearResults"
+          @results:export="exportData"
+        />
+        <p>Ergebnisse:</p>
+        <div
+          v-if="loadingData == 'failed'"
+          class="flex flex-col p-2 border border-red-600 bg-red-200 rounded-md select-none"
+        >
+          <p v-if="typeof queryError == 'string'">
+            {{ queryError }}
+          </p>
+          <div v-else>
+            <p>
+              CODE: <br />
+              {{ queryError.code }}
+            </p>
+            <br />
+            <p>
+              MSG: <br />
+              {{ queryError.msg }}
+            </p>
+            <br />
+            <p>
+              RESULTING SQL: <br />
+              {{ queryError.sql }}
+            </p>
+          </div>
+        </div>
+        <Pagination
+          v-else
+          :items="data"
+          :totalCount="totalLength"
+          :indicateLoading="loadingData == 'loading'"
+          @load-data="(offset, count) => sendQuery(offset, count)"
+        >
+          <template #pageRow="{ row }: { row: { id: FieldType; [key: string]: FieldType } }">
+            <p>{{ row }}</p>
+          </template>
+        </Pagination>
       </div>
-      <Pagination
-        v-else
-        :items="data"
-        :totalCount="totalLength"
-        :indicateLoading="loadingData == 'loading'"
-        @load-data="(offset, count) => sendQuery(offset, count)"
-      >
-        <template #pageRow="{ row }: { row: { id: FieldType; [key: string]: FieldType } }">
-          <p>{{ row }}</p>
-        </template>
-      </Pagination>
     </template>
   </MainTemplate>
 </template>

src/views/admin/configuration/award/Award.vue

@@ -1,5 +1,10 @@
 <template>
-  <MainTemplate title="Auszeichnungen">
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Auszeichnungen</h1>
+      </div>
+    </template>
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/configuration/award/AwardEdit.vue

@@ -1,8 +1,13 @@
 <template>
-  <MainTemplate :title="`Auszeichnung ${origin?.award} - Daten bearbeiten`">
+  <MainTemplate>
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Auszeichnung {{ origin?.award }} - Daten bearbeiten</h1>
+      </div>
+    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/configuration/calendarType/CalendarType.vue

@@ -1,5 +1,10 @@
 <template>
-  <MainTemplate title="Termintyp">
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Termintyp</h1>
+      </div>
+    </template>
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/configuration/calendarType/CalendarTypeEdit.vue

@@ -1,8 +1,13 @@
 <template>
-  <MainTemplate :title="`Termintyp ${origin?.type} - Daten bearbeiten`">
+  <MainTemplate>
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Termintyp {{ origin?.type }} - Daten bearbeiten</h1>
+      </div>
+    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/configuration/communicationType/CommunicationType.vue

@@ -1,5 +1,10 @@
 <template>
-  <MainTemplate title="Kommunikationsarten">
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Kommunikationsarten</h1>
+      </div>
+    </template>
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/configuration/communicationType/CommunicationTypeEdit.vue

@@ -1,8 +1,13 @@
 <template>
-  <MainTemplate :title="`Kommunikationsart ${origin?.type} - Daten bearbeiten`">
+  <MainTemplate>
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Kommunikationsart {{ origin?.type }} - Daten bearbeiten</h1>
+      </div>
+    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/configuration/executivePosition/ExecutivePosition.vue

@@ -1,5 +1,10 @@
 <template>
-  <MainTemplate title="Vereinsämter">
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Vereinsämter</h1>
+      </div>
+    </template>
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/configuration/executivePosition/ExecutivePositionEdit.vue

@@ -1,8 +1,13 @@
 <template>
-  <MainTemplate :title="`Vereinsamt ${origin?.position} - Daten bearbeiten`">
+  <MainTemplate>
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Vereinsamt {{ origin?.position }} - Daten bearbeiten</h1>
+      </div>
+    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/configuration/membershipStatus/MembershipStatus.vue

@@ -1,5 +1,10 @@
 <template>
-  <MainTemplate title="Mitgliedsstatus">
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Mitgliedsstatus</h1>
+      </div>
+    </template>
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/configuration/membershipStatus/MembershipStatusEdit.vue

@@ -1,8 +1,13 @@
 <template>
-  <MainTemplate :title="`Mitgliedsstatus ${origin?.status} - Daten bearbeiten`">
+  <MainTemplate>
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Mitgliedsstatus {{ origin?.status }} - Daten bearbeiten</h1>
+      </div>
+    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/configuration/newsletterConfig/NewsletterConfig.vue

@@ -1,5 +1,10 @@
 <template>
-  <MainTemplate title="Newsletter Konfiguration">
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Newsletter Konfiguration</h1>
+      </div>
+    </template>
     <template #main>
       <p>
         Ein Newsletter kann als pdf exportiert oder per Mail versandt werden. <br />

src/views/admin/configuration/qualification/Qualification.vue

@@ -1,5 +1,10 @@
 <template>
-  <MainTemplate title="Qualifikationen">
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Qualifikationen</h1>
+      </div>
+    </template>
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/configuration/qualification/QualificationEdit.vue

@@ -1,8 +1,13 @@
 <template>
-  <MainTemplate :title="`Qualifikation ${origin?.qualification} - Daten bearbeiten`">
+  <MainTemplate>
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Qualifikation {{ origin?.qualification }} - Daten bearbeiten</h1>
+      </div>
+    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/configuration/queryStore/QueryStore.vue

@@ -1,5 +1,10 @@
 <template>
-  <MainTemplate title="gespeicherte Abfragen">
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">gespeicherte Abfragen</h1>
+      </div>
+    </template>
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/configuration/salutation/Salutation.vue

@@ -1,5 +1,10 @@
 <template>
-  <MainTemplate title="Anrede">
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Anrede</h1>
+      </div>
+    </template>
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/configuration/salutation/SalutationEdit.vue

@@ -1,8 +1,13 @@
 <template>
-  <MainTemplate :title="`Anrede ${origin?.salutation} - Daten bearbeiten`">
+  <MainTemplate>
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Anrede {{ origin?.salutation }} - Daten bearbeiten</h1>
+      </div>
+    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/configuration/template/Template.vue

@@ -1,9 +1,12 @@
 <template>
-  <MainTemplate title="Templates">
+  <MainTemplate>
     <template #topBar>
-      <RouterLink :to="{ name: 'admin-configuration-template-info' }">
-        <InformationCircleIcon class="text-gray-500 h-5 w-5" />
-      </RouterLink>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Templates</h1>
+        <RouterLink :to="{ name: 'admin-configuration-template-info' }">
+          <InformationCircleIcon class="text-gray-500 h-5 w-5" />
+        </RouterLink>
+      </div>
     </template>
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">

src/views/admin/configuration/template/TemplateEdit.vue

@@ -1,8 +1,13 @@
 <template>
-  <MainTemplate :title="`Template ${origin?.template} - Daten bearbeiten`">
+  <MainTemplate>
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Template {{ origin?.template }} - Daten bearbeiten</h1>
+      </div>
+    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/configuration/template/UsageInfo.vue

@@ -1,5 +1,10 @@
 <template>
-  <MainTemplate title="Templates - Verwendungsinformation">
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Templates - Verwendungsinformation</h1>
+      </div>
+    </template>
     <template #main>
       <p>
         Mit diesem Editor können Vorlagen erstellt werden, welche später dafür genutzt werden können, um pdfs zu drucken

src/views/admin/configuration/templateUsage/TemplateUsage.vue

@@ -1,5 +1,10 @@
 <template>
-  <MainTemplate title="Template-Verwendung">
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Template-Verwendung</h1>
+      </div>
+    </template>
     <template #main>
       <TemplateUsageListItem v-for="usage in templateUsages" :key="usage.scope" :templateUsage="usage" />
     </template>

src/views/admin/management/backup/BackupRouting.vue

@@ -1,5 +1,10 @@
 <template>
-  <MainTemplate title="Backups">
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Backups</h1>
+      </div>
+    </template>
     <template #diffMain>
       <div class="flex flex-col gap-2 grow px-7 overflow-hidden">
         <div class="flex flex-col grow gap-2 overflow-hidden">

src/views/admin/management/backup/GeneratedBackup.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-col gap-4 h-full">
-    <div class="flex flex-col gap-2 grow overflow-y-scroll">
+  <div class="flex flex-col gap-4 h-full pl-7">
+    <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
       <BackupListItem v-for="backup in backups" :key="backup" :backup="backup" />
     </div>
     <div class="flex flex-row gap-4">

src/views/admin/management/backup/UploadedBackup.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-col gap-4 h-full">
-    <div class="flex flex-col gap-2 grow overflow-y-scroll">
+  <div class="flex flex-col gap-4 h-full pl-7">
+    <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
       <BackupListItem v-for="backup in backups" :key="backup" :backup="backup" />
     </div>
     <div class="flex flex-row gap-4">

src/views/admin/management/role/Role.vue

@@ -1,5 +1,10 @@
 <template>
-  <MainTemplate title="Rollen">
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Rollen</h1>
+      </div>
+    </template>
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/management/role/RoleEdit.vue

@@ -1,8 +1,13 @@
 <template>
-  <MainTemplate :title="`Rolle ${origin?.role} - Daten bearbeiten`">
+  <MainTemplate>
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Rolle {{ origin?.role }} - Daten bearbeiten</h1>
+      </div>
+    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/management/role/RoleEditPermission.vue

@@ -1,8 +1,13 @@
 <template>
-  <MainTemplate :title="`Rolle ${role?.role} - Berechtigungen bearbeiten`">
+  <MainTemplate>
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Rolle {{ role?.role }} - Berechtigungen bearbeiten</h1>
+      </div>
+    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/management/setting/Setting.vue

@@ -1,5 +1,10 @@
 <template>
-  <MainTemplate title="Einstellungen">
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Einstellungen</h1>
+      </div>
+    </template>
     <template #main>
       <p>Hinweis: Optionale Felder können leer gelassen werden und nutzen dann einen Fallback-Werte.</p>
       <ClubImageSetting />

src/views/admin/management/user/Invite.vue

@@ -1,10 +1,17 @@
 <template>
-  <MainTemplate title="offene Einladungen">
+  <MainTemplate>
     <template #headerInsert>
       <RouterLink :to="{ name: 'admin-management-user' }" class="text-primary">zurück zur Nutzerliste</RouterLink>
     </template>
-    <template #main>
-      <InviteListItem v-for="invite in invites" :key="invite.username" :invite="invite" />
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">offene Einladungen</h1>
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col gap-2 grow overflow-y-scroll px-7">
+        <InviteListItem v-for="invite in invites" :key="invite.username" :invite="invite" />
+      </div>
     </template>
   </MainTemplate>
 </template>

src/views/admin/management/user/User.vue

@@ -1,5 +1,10 @@
 <template>
-  <MainTemplate title="Benutzer">
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Benutzer</h1>
+      </div>
+    </template>
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/management/user/UserEdit.vue

@@ -1,8 +1,13 @@
 <template>
-  <MainTemplate :title="`Nutzer ${origin?.username} - Daten bearbeiten`">
+  <MainTemplate>
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Nutzer {{ origin?.username }} - Daten bearbeiten</h1>
+      </div>
+    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/management/user/UserEditPermission.vue

@@ -1,8 +1,13 @@
 <template>
-  <MainTemplate :title="`Nutzer ${user?.username} - Berechtigungen bearbeiten`">
+  <MainTemplate>
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
     </template>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Nutzer {{ user?.username }} - Berechtigungen bearbeiten</h1>
+      </div>
+    </template>
     <template #main>
       <p>Hinweis: Berechtigungen von Nutzer und Rolle sind ergänzend.</p>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />

src/views/admin/management/user/UserEditRoles.vue

@@ -1,8 +1,13 @@
 <template>
-  <MainTemplate :title="`Nutzer ${origin?.username} - Rollen bearbeiten`">
+  <MainTemplate>
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Nutzer {{ origin?.username }} - Rollen bearbeiten</h1>
+      </div>
+    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/management/version/VersionDisplay.vue

@@ -1,5 +1,10 @@
 <template>
-  <MainTemplate title="Versions-Kontrolle" :useStagedOverviewLink="false">
+  <MainTemplate :useStagedOverviewLink="false">
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Versions-Kontrolle</h1>
+      </div>
+    </template>
     <template #diffMain>
       <div class="h-full flex flex-col px-7 overflow-hidden">
         <div class="h-1/2 flex flex-col gap-2 p-2 border border-gray-300 rounded-t-md">

src/views/admin/management/webapi/Webapi.vue

@@ -1,5 +1,10 @@
 <template>
-  <MainTemplate title="Webapi-Token">
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Webapi-Token</h1>
+      </div>
+    </template>
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/management/webapi/WebapiEdit.vue

@@ -1,8 +1,13 @@
 <template>
-  <MainTemplate :title="`Webapi-Token ${origin?.title} - Daten bearbeiten`">
+  <MainTemplate>
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Webapi-Token {{ origin?.title }} - Daten bearbeiten</h1>
+      </div>
+    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/management/webapi/WebapiEditPermission.vue

@@ -1,8 +1,13 @@
 <template>
-  <MainTemplate :title="`Webapi-Token ${webapi?.title} - Berechtigungen bearbeiten`">
+  <MainTemplate>
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Webapi-Token {{ webapi?.title }} - Berechtigungen bearbeiten</h1>
+      </div>
+    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/docs/DocPage.vue

@@ -2,7 +2,7 @@
   <MainTemplate :useStagedOverviewLink="false">
     <!-- <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8 min-h-fit">{{page}}</h1>
+        <h1 class="font-bold text-xl h-8">{{page}}</h1>
       </div>
     </template> -->
     <template #diffMain>

src/views/public/calendar/Calendar.vue

@@ -1,7 +1,9 @@
 <template>
-  <MainTemplate title="Kalender" :showBack="false">
+  <MainTemplate :showBack="false">
     <template #topBar>
-      <div class="flex flex-row gap-2">
+      <div class="flex flex-row items-center gap-4 pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Kalender</h1>
+        <div class="grow"></div>
         <LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" />
         <RouterLink :to="{ name: 'public-calendar-explain' }">
           <InformationCircleIcon class="text-gray-500 h-5 w-5 cursor-pointer" />

src/views/public/calendar/CalendarExplain.vue

@@ -1,5 +1,5 @@
 <template>
-  <MainTemplate title="Kalender-Erklärung - WebCal Kalendar einbinden" :showBack="false">
+  <MainTemplate :showBack="false">
     <template #headerInsert>
       <RouterLink
         :to="{
@@ -10,6 +10,11 @@
         zum Kalender
       </RouterLink>
     </template>
+    <template #topBar>
+      <div class="flex flex-row items-center gap-2 pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-fit">Kalender-Erklärung - WebCal Kalendar einbinden</h1>
+      </div>
+    </template>
     <template #main>
       <div class="instruction">
         <h2>iOS: Webcal-Link einbinden</h2>