Add 'frontend/' from commit 'c070c0315d66a44154ab7d9f9ea6c211a15f4dba'

git-subtree-dir: frontend
git-subtree-mainline: 205a3bd14b
git-subtree-split: c070c0315d

frontend/src/App.vue

@@ -0,0 +1,50 @@
+<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>