wrbapp/frontend/app.vue

<template>
  <div v-if="!userStore.userLoaded" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex justify-center items-center">
    <div>
      <Icon size="4em" name="ion:load-c" class="animate-spin" />
      <h2 class="mt-2 font-bold">Loading...</h2>
    </div>
  </div>
  <div v-else class="">
    <div v-if="userStore.isAuthenticated" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">
      <LayoutTopbar />
      <div class="overflow-y-auto pt-3">
        <NuxtPage />
      </div>
      <LayoutNavbar class="mt-auto" />
    </div>
    <div v-else class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">
      <Login />
    </div>
  </div>
</template>

<script setup>
import { Device } from '@capacitor/device';

const userStore = useUserStore()

onMounted(async () => {
  userStore.init()

  Device.getInfo().then(info => {
    if (info.platform === 'ios') document.getElementsByClassName('top-right')[0].classList.add('toastios')
  });

  if (process.client) {
    if ('serviceWorker' in navigator && window.isSecureContext) {
      Device.getInfo().then(info => {
        if (info.platform === 'web') registerServiceWorker()
        else document.getElementsByClassName('top-right')[0].classList.add('toastios')
      });
    }
  }
})
</script>

<style>
.body {
  margin-bottom: env(safe-area-inset-bottom);
}

.toastios {
  padding-top: env(safe-area-inset-top);
}
</style>