htwkalender-pwa/frontend/src/App.vue

<script lang="ts" setup>
import MenuBar from "./components/MenuBar.vue";
import { RouteRecordName, RouterView } from "vue-router";
import CalendarPreview from "./components/CalendarPreview.vue";
import moduleStore from "./store/moduleStore.ts";
import { provide, ref } from "vue";

const disabledPages = [
  "room-finder",
  "faq",
  "imprint",
  "privacy-policy",
  "edit",
  "edit-calendar",
];

const store = moduleStore();
const mobilePage = ref(true);
provide("mobilePage", mobilePage);

const isDisabled = (routeName: RouteRecordName | null | undefined) => {
  return !disabledPages.includes(routeName as string) && store.modules.size > 0;
};

const updateMobile = () => {
  mobilePage.value = window.innerWidth <= 992;
};

updateMobile();

window.addEventListener("resize", updateMobile);
</script>

<template>
  <MenuBar />
  <RouterView v-slot="{ Component }">
    <transition name="scale" mode="out-in">
      <component :is="Component" class="origin-near-top"/>
    </transition>
  </RouterView>
  <!-- show CalendarPreview but only on specific router views -->
  <CalendarPreview v-if="isDisabled($route.name)" />
  <Toast />
</template>

<style scoped>
.scale-enter-active,
.scale-leave-active {
  transition: all 0.2s ease;
}

.scale-enter-from,
.scale-leave-to {
  opacity: 0;
  transform: scale(0.95);
}

.origin-near-top {
  transform-origin: center 33vh;
}
</style>