Refactor ViewportFooter.vue: replace deprecated slot syntax with v-slot and conditionally render footer component in Viewport.vue

src/components/viewport/Viewport.vue

@@ -7,6 +7,7 @@ import DesktopNavigationBuefy from "@/components/viewport/page/headers/DesktopNa
 import { ref, onMounted, computed } from "vue";
 import SessionUser from "@/components/session/token/SessionUser.vue";
 import ViewportFooter from "@/components/viewport/page/footers/ViewportFooter.vue";
+import {viewport} from "@popperjs/core";
 console.log("Viewport component loaded");
 
 const headerHeight = ref(60); // Default header height in pixels
@@ -53,8 +54,7 @@ onMounted(() => {
         </div>
       </div>
     </div>
-    <!-- Footer -->
-    <div ref="footerElement">
+    <div ref="footerElement" v-if="SessionUser.functions.device.isMobile()">
       <ViewportFooter/>
     </div>
   </div>

src/components/viewport/page/footers/ViewportFooter.vue

@@ -13,11 +13,9 @@ import MobileFooter from "@/components/viewport/page/footers/MobileFooter.vue";
     <template #tablet> <!-- Tablet footer slot -->
       <!-- None -->
     </template>
-    <template #desktop> <!-- Desktop footer slot -->
-      <!-- None -->
+    <template v-slot:desktop> <!-- Desktop footer slot -->
     </template>
-    <template #default> <!-- Default footer slot, used when no specific viewport matches -->
-      <DefaultFooter/>
+    <template v-slot:default> <!-- Default footer slot, used when no specific viewport matches -->
     </template>
   </ViewportResponsiveWrapper>
 </template>