enhance: unified ui

src/templates/Main.vue

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