<template>
  <v-app>
    <div class="flex flex-row">
      <!-- Side Bar for larger screens -->
      <div v-if="!smAndDown" class="border-r-2 z-30">
        <side-bar></side-bar>
      </div>

      <!-- Mobile -->
      <div v-if="smAndDown" class="mobile-container">
        <div v-if="!brandingStore.loading"
             class="min-h-screen justify-center items-center"
             :style="{ backgroundColor: brandingStore.colors.background }">
          <router-view></router-view>
        </div>
      </div>

      <!-- PC -->
      <div v-if="!smAndDown" :class="['w-full', sideBarStore.sidebarWidth]">
        <div v-if="!brandingStore.loading"
             class="min-h-screen justify-center items-center"
             :style="{ backgroundColor: brandingStore.colors.background }">
          <router-view class="p-2"></router-view>
        </div>
      </div>
    </div>
  </v-app>
</template>

<script async setup>
import SideBar from "@/views/main/SideBar.vue";
import { useBrandingStore } from "@/stores/brandingStore.js";
import { useSideBarStore } from "@/stores/sideBarStore.js";
import { useDisplay } from "vuetify";

const { smAndDown } = useDisplay();
const brandingStore = useBrandingStore();
const sideBarStore = useSideBarStore();
</script>

<style scoped>
/* Ensure content does not overflow on mobile */
.mobile-container {
  width: 100%; /* Full width for mobile */
  max-width: 100vw; /* Prevent overflow */
  overflow-x: hidden; /* Hide horizontal overflow */
  padding: 0; /* Remove extra padding */
  box-sizing: border-box; /* Include padding in width/height calculation */
}
</style>
