refactor(ui): simplify layout by introducing an unified site-bar

frontend/src/App.vue

@@ -1,57 +1,53 @@
 <template>
-  <v-app>
-    <div class="shell-container">
+    <v-app>
+        <div class="shell-container">
+            <div class="shell-side">
+                <site-bar></site-bar>
+            </div>
 
-      <div class="shell-side">
-        <side-bar></side-bar>
-      </div>
-
-      <div class="shell-view">
-        <router-view></router-view>
-      </div>
-
-    </div>
-
-  </v-app>
+            <div class="shell-view">
+                <router-view></router-view>
+            </div>
+        </div>
+    </v-app>
 </template>
 
 <script async setup>
-import { mdiFileAccountOutline } from '@mdi/js';
-import SideBar from "@/views/main/SideBar.vue";
-import { useLanguageStore } from "@/stores/languageStore.js";
-import { watch } from "vue";
-import { useI18n } from "vue-i18n";
+    import SiteBar from '@/views/main/SiteBar.vue';
+    import { useLanguageStore } from '@/stores/languageStore.js';
+    import { watch } from 'vue';
+    import { useI18n } from 'vue-i18n';
 
-// Watch for language changes and update i18n locale
-const languageStore = useLanguageStore();
-const { locale } = useI18n();
-
-// Watch for changes to the language store
-watch(() => languageStore.locale, (newLocale) => {
-  if (newLocale) {
-    locale.value = newLocale;
-  }
-}, { immediate: true });
+    // Watch for language changes and update i18n locale
+    const languageStore = useLanguageStore();
+    const { locale } = useI18n();
 
+    // Watch for changes to the language store
+    watch(
+        () => languageStore.locale,
+        newLocale => {
+            if (newLocale) {
+                locale.value = newLocale;
+            }
+        },
+        { immediate: true }
+    );
 </script>
 
 <style scoped>
-.shell-container {
-  @apply flex flex-col lg:flex-row;
-  @apply font-sans;
-  @apply bg-hBackground text-hOnBackground;
-  @apply min-h-screen h-full;
-}
+    .shell-container {
+        @apply flex flex-col;
+        @apply w-full;
+        @apply font-sans;
+        @apply bg-hBackground text-hOnBackground;
+    }
 
-.shell-side {
-  @apply lg:fixed lg:max-h-screen;
-  @apply flex-shrink-0;
-}
+    .shell-side {
+        @apply flex-shrink-0;
+    }
 
-.shell-view {
-  @apply flex-grow;
-  @apply flex justify-center items-center;
-  @apply w-full;
-  @apply lg:ml-64;
-}
+    .shell-view {
+        @apply flex-grow;
+        @apply flex justify-center items-center;
+    }
 </style>