Rebuild General Layout to Nuxt UI PRO Dashboard

spaces/pages/planningBoard.vue

@@ -122,6 +122,28 @@ const calendarOptionsTimeline = reactive({
 </script>
 
 <template>
+  <UDashboardPage>
+    <UDashboardPanel grow>
+      <UDashboardNavbar :title="currentItem ? currentItem.name : ''">
+        <template #right>
+
+        </template>
+      </UDashboardNavbar>
+      <div v-if="viewport.isLessThan('tablet')">
+        <FullCalendar
+            :options="calendarOptionsList"
+        />
+      </div>
+      <div v-else>
+        <FullCalendar
+            :options="calendarOptionsTimeline"
+        />
+      </div>
+    </UDashboardPanel>
+  </UDashboardPage>
+
+
+
   <div>
     <UModal
       v-model="openNewEventModal"
@@ -229,16 +251,7 @@ const calendarOptionsTimeline = reactive({
 
 
     </UModal>
-    <div v-if="viewport.isLessThan('tablet')">
-      <FullCalendar
-        :options="calendarOptionsList"
-      />
-    </div>
-    <div v-else>
-      <FullCalendar
-          :options="calendarOptionsTimeline"
-      />
-    </div>
+
 
 
   </div>