ff-admin/src/templates/Main.vue

<template>
  <div v-if="!defaultRoute && showBack" class="flex md:hidden flex-row items-baseline">
    <RouterLink v-if="!defaultRoute && showBack" :to="{ name: `${rootRoute}-default` }" class="mid:hidden text-primary">
      zur Übersicht
    </RouterLink>
  </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.$route?.name as string) ?? "").includes("-default");
    },
    rootRoute() {
      return ((this.$route?.name as string) ?? "").split("-")[0];
    },
    diffMain() {
      return this.$slots.diffMain;
    },
    headerInsert() {
      return this.$slots.headerInsert;
    },
    mid() {
      return window.matchMedia("(min-width: 800px)").matches;
    },
  },
});
</script>