pleno-vue/src/components/viewport/Viewport.vue

<script setup lang="ts">

import ViewportHeader from "@/components/viewport/page/headers/ViewportHeader.vue";
import ViewportContent from "@/components/viewport/page/content/ViewportContent.vue";
import { backgroundColor } from "./page/headers/ViewportHeaderSettings.vue";
import DesktopNavigationBuefy from "@/components/viewport/page/headers/DesktopNavigationBuefy.vue";
import { ref, onMounted, computed, watch, nextTick } from "vue";
import SessionUser from "@/components/session/token/SessionUser.vue";
import ViewportFooter from "@/components/viewport/page/footers/ViewportFooter.vue";
import {useRouter} from "vue-router";
import { showFooterInContent } from "@/components/viewport/conditions/ViewPortFooterOptions.vue";
import { isHidden } from "@/components/viewport/page/headers/ViewportHeaderSettings.vue";
import ConnectivityIssue from "@/views/errors/ConnectivityIssue.vue";
const router = useRouter();

console.log("Viewport component loaded");

const headerHeight = ref(60); // Default header height in pixels
const headerElement = ref<HTMLElement | null>(null);
const footerHeight = ref(0); // Default footer height in pixels
const footerElement = ref<HTMLElement | null>(null);

const updateHeaderHeight = () => {
  if (headerElement.value) {
    headerHeight.value = headerElement.value.offsetHeight;
    console.log("Header height updated:", headerHeight.value);
  }
};

const independentScrollMaxHeight = computed(() => {
  return `calc(100vh - ${headerHeight.value + footerHeight.value}px)`;
});

onMounted(() => {
  updateHeaderHeight();
  window.addEventListener('resize', updateHeaderHeight);
});

watch(isHidden, () => {
  nextTick(() => {
    updateHeaderHeight();
  });
});

const isFooterInContent = computed(() => {
  if (!showFooterInContent.value) {
    return false;
  }
  const path = router.currentRoute.value.path;
  // Show footer only on specific paths
  return path.startsWith("/user") && SessionUser.functions.device.isMobile();
});
</script>

<template>
  <div class="viewport no-scrollbar-visible" :style="{ backgroundColor: backgroundColor }" style="overflow: hidden;">
    <div ref="headerElement">
      <ViewportHeader />
    </div>
    <!-- Spacer (To avoid content being hidden behind the fixed header) -->
    <div :style="{ height: headerHeight + 'px' }" class="is-hidden-mobile"></div>
    <div class="fixed-grid has-12-cols">
    <!-- Navigation and content wrapper -->
      <div class="grid">
        <div class="cell is-col-span-3-desktop is-hidden-mobile is-col-span-4-tablet" :class="{'is-col-span-2-widescreen': SessionUser.functions.device.isUltraWideScreen()}" v-show="!isHidden">
          <div class="independent-scroll slick-scroll-layout" :style="{ maxHeight: independentScrollMaxHeight, minHeight: independentScrollMaxHeight }">
            <DesktopNavigationBuefy />
          </div>
        </div>
        <div class="cell is-col-span-12-mobile"
             :class="{
               'is-col-span-9-desktop': !isHidden,
               'is-col-span-12-desktop': isHidden,
               'is-col-span-8-tablet': !isHidden,
               'is-col-span-12-tablet': isHidden,
               'is-col-span-10-widescreen': !isHidden && SessionUser.functions.device.isUltraWideScreen(),
               'is-col-span-12-widescreen': isHidden && SessionUser.functions.device.isUltraWideScreen()
             }">
          <div class="independent-scroll slick-scroll-layout" :style="{ maxHeight: independentScrollMaxHeight }">
            <ViewportContent>
              <ConnectivityIssue>
                <slot />
              </ConnectivityIssue>
              <div class="has-text-centered" v-show="isFooterInContent">
              <a class="is-align-content-center" href="/">
                <!-- All rights reserved footer logo -->
                <img src="@/assets/branding/truckwash-banner-white-compressed.png"
                     alt="Truckwash Logo"
                     class="transform-color-black mt-2 mb-0"
                     style="max-height: 28px;"
                >
                <p class="is-size-7 has-text-grey-light mb-2 mt-0">© Truckwash ApS. All rights reserved.</p>
              </a>
              </div>
            </ViewportContent>
          </div>
        </div>
      </div>
    </div>
    <div ref="footerElement" v-if="SessionUser.functions.device.isMobile()">
      <ViewportFooter/>
    </div>
  </div>
</template>

<style scoped>
.no-scrollbar-visible::-webkit-scrollbar {
  display: none;
  width: 0;
  background: transparent;
}
.no-scrollbar-visible {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.independent-scroll {
  overflow: auto;
  max-height: calc(100vh - 60px); /* Automatically adjusted by script */
}
.slick-scroll-layout {
  padding-right: 10px; /* Adjust based on scrollbar width */
}
.slick-scroll-layout::-webkit-scrollbar {
  width: 8px;
}
.slick-scroll-layout::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.slick-scroll-layout::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
.slick-scroll-layout::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.viewport {
  /** Fixed viewport styles */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Default viewport styles */
  background-color: #e6efff;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.size-to-fit {
  overflow: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  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>