Add profile link to MobileHeader.vue and dynamic footer visibility in Viewport.vue

- Included user profile button in `MobileHeader.vue` with authentication check and styling for development mode.
- Updated `Viewport.vue` to conditionally show footer content based on route using new computed property.
- Adjusted layout styles, added new color filter classes, and refined footer handling logic for specific paths.

src/components/viewport/Viewport.vue

@@ -7,7 +7,9 @@ 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";
+import {useRouter} from "vue-router";
+const router = useRouter();
+
 console.log("Viewport component loaded");
 
 const headerHeight = ref(60); // Default header height in pixels
@@ -30,10 +32,16 @@ onMounted(() => {
   updateHeaderHeight();
   window.addEventListener('resize', updateHeaderHeight);
 });
+
+const showFooterInContent = computed(() => {
+  const path = router.currentRoute.value.path;
+  // Show footer only on specific paths
+  return path.startsWith("/user");
+});
 </script>
 
 <template>
-  <div class="viewport no-scrollbar-visible" :style="{ backgroundColor: backgroundColor }">
+  <div class="viewport no-scrollbar-visible" :style="{ backgroundColor: backgroundColor }" style="overflow: hidden;">
     <div ref="headerElement">
       <ViewportHeader />
     </div>
@@ -49,6 +57,15 @@ onMounted(() => {
           <div class="independent-scroll slick-scroll-layout" :style="{ maxHeight: independentScrollMaxHeight }">
             <ViewportContent>
               <slot />
+              <div class="has-text-centered" v-show="showFooterInContent">
+              <a class="is-align-content-center" href="/">
+                <img src="@/assets/branding/truckwash-banner-white-compressed.png"
+                     alt="Truckwash Logo"
+                     class="transform-color-black my-2"
+                     style="max-height: 28px;"
+                >
+              </a>
+              </div>
             </ViewportContent>
           </div>
         </div>
@@ -72,7 +89,7 @@ onMounted(() => {
 }
 .independent-scroll {
   overflow: auto;
-  max-height: calc(100vh - 60px); /* Automatically adjusted by script */
+  max-height: calc(100vh - 120px); /* Automatically adjusted by script */
 }
 .slick-scroll-layout {
   padding-right: 10px; /* Adjust based on scrollbar width */
@@ -116,4 +133,7 @@ onMounted(() => {
   min-width: 0;
   max-width: calc(100vw - 250px); /* Adjust based on navigation width */
 }
+.transform-color-black {
+  filter: invert(100%) grayscale(100%) brightness(0) contrast(100%);
+}
 </style>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {BButton, BField, BIcon} from "buefy";
-import {computed} from "vue";
+import {computed, ref} from "vue";
 import { useRouter } from "vue-router";
 const router = useRouter();
 

src/components/viewport/page/headers/MobileHeader.vue

@@ -2,13 +2,24 @@
 import { toggleExpanded, isOpen, isTransparent, getSubtitle } from '@/components/viewport/page/headers/ViewportHeaderSettings.vue';
 import MobileNavigation from "@/components/viewport/page/headers/MobileNavigation.vue";
 import NavigationMenuDepartment from "@/components/viewport/page/headers/menu/NavigationMenuDepartment.vue";
+import { IS_DEV } from '@/main';
+import SessionUser from "@/components/session/token/SessionUser.vue";
 </script>
 
 <template>
   <!-- Company Logo | Spacer | Burger Menu -->
   <!-- The burger menu is used to toggle the mobile navigation menu -->
   <nav class="navbar is-link is-mobile is-fixed-top mobile-header-section" role="navigation" aria-label="main navigation" :class="{'is-blurred': isTransparent}">
-    <div class="navbar-brand">
+    <div class="navbar-item">
+      <!-- Profile -->
+      <router-link class="button is-white py-0" to="/user/profile" v-if="SessionUser.authenticated.value">
+              <span class="icon is-large">
+                <i class="fas fa-user-circle fa-2x"
+                   :class="{'transform-color-black': !IS_DEV, 'transform-color-red': IS_DEV}"></i>
+              </span>
+      </router-link>
+    </div>
+    <div class="navbar-brand" v-show="false">
       <a class="navbar-item is-align-content-center" href="/">
         <img src="@/assets/branding/truckwash-banner-white-compressed.png"
              alt="Truckwash Logo"
@@ -120,4 +131,11 @@ import NavigationMenuDepartment from "@/components/viewport/page/headers/menu/Na
   /* Set border opacity to 0.5 */
   box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
 }
+.transform-color-black {
+  filter: invert(100%) grayscale(100%) brightness(0) contrast(100%);
+}
+.transform-color-red {
+  /* Invert colors and apply a red tint */
+  filter: invert(27%) sepia(96%) saturate(7493%) hue-rotate(357deg) brightness(103%) contrast(101%);
+}
 </style>