51 lines
1.6 KiB
Vue
51 lines
1.6 KiB
Vue
<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>
|