feat: Added Map page

webv2/app.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen w-full overflow-y-auto bg-gray-900">
+  <div class="w-full overflow-y-auto bg-gray-900">
     <NuxtLayout />
 
     <UNotifications />
@@ -10,4 +10,15 @@
 .router-link-active {
   background: rgba(0, 0, 0, 10%)
 }
+
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.2s;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  filter: blur(0.2rem);
+}
+
 </style>

webv2/components/body/Sidebar.vue

@@ -11,7 +11,7 @@
       <Icon size="1.5em" name="heroicons:users" class="mr-2" />
       Team
     </NuxtLink>
-    <NuxtLink class="flex w-full items-center rounded bg-black/0 p-2 text-lg hover:cursor-pointer hover:bg-black/20">
+    <NuxtLink to="/map" class="flex w-full items-center rounded bg-black/0 p-2 text-lg hover:cursor-pointer hover:bg-black/20">
       <Icon size="1.5em" name="heroicons:map" class="mr-2" />
       Map
     </NuxtLink>

webv2/layouts/default.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="flex min-h-screen w-full overflow-y-auto">
+  <div class="flex w-full">
     <Transition>
       <BodySidebar v-if="showSidebar && user.minecraft" />
     </Transition>
-    <div class="w-full px-5 transition-all duration-300 ease-in-out" :class="{ 'xl:ms-56': showSidebar && user.minecraft }">
+    <div class="h-screen w-full overflow-y-auto px-5 transition-all duration-300 ease-in-out" :class="{ 'xl:ms-56': showSidebar && user.minecraft }">
-      <div v-if="user.minecraft" class="mx-auto w-full max-w-[92rem]">
+      <div v-if="user.minecraft" class="mx-auto flex h-full w-full max-w-[92rem] flex-col">
         <div class="my-5 text-xl font-bold">
           <Icon size="1.6em" :name="!showSidebar ? 'heroicons:bars-3-center-left' : 'heroicons:chevron-left'" class="text-primary-500 mr-3 hover:cursor-pointer" @click="showSidebar = !showSidebar" />
-          {{ route.meta.title.split(' | ')[0] }}
+          {{ route.meta.title }}
         </div>
-        <NuxtPage class="" />
+        <NuxtPage class="h-full" />
       </div>
       <BodyConnectminecraft v-else />
     </div>

webv2/nuxt.config.ts

@@ -12,6 +12,17 @@ export default defineNuxtConfig({
     'nuxt-icon',
     '@nuxtjs/eslint-module'
   ],
+  app: {
+    head: {
+      link: [
+        { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
+        { rel: 'icon', sizes: '32x32', type: 'image/png', href: '/favicon-32x32.png' },
+        { rel: 'icon', sizes: '16x16', type: 'image/png', href: '/favicon-16x16.png' },
+        { rel: 'manifest', href: '/site.webmanifest' }
+      ]
+    },
+    pageTransition: { name: 'page', mode: 'out-in' }
+  },
   runtimeConfig: {
     discordClientId: '',
     discordClientSecret: '',

webv2/pages/index.vue

@@ -75,9 +75,11 @@
 <script lang="ts" setup>
 definePageMeta({
   middleware: ['auth'],
-  title: 'Dashboard | Polarcraft'
+  title: 'Dashboard'
 })
 
+useHead({ title: 'Dashboard | Polarcraft' })
+
 const user = useState<IUser>('user')
 const disableButtons = ref(false)
 

webv2/pages/login.vue

@@ -13,5 +13,7 @@ definePageMeta({
   layout: 'blank'
 })
 
+useHead({ title: 'Login | Polarcraft' })
+
 const config = useRuntimeConfig()
 </script>

webv2/pages/map.vue

@@ -0,0 +1,11 @@
+<template>
+  <iframe src="https://polarcraft-map.xeovalyte.dev/" height="100%" width="100%" class="mb-5 rounded-xl" />
+</template>
+<script lang="ts">
+definePageMeta({
+  middleware: ['auth'],
+  title: 'Map'
+})
+
+useHead({ title: 'Map | Polarcraft' })
+</script>

webv2/pages/team.vue

@@ -8,8 +8,10 @@
 <script lang="ts" setup>
 definePageMeta({
   middleware: ['auth'],
-  title: 'Team | Polarcraft'
+  title: 'Team'
 })
 
+useHead({ title: 'Team | Polarcraft' })
+
 const user = useState<IUser>('user')
 </script>

webv2/public/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}