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>

frontend/src/views/main/SiteBar.vue

@@ -4,12 +4,10 @@
     import { useCreatorProfileStore } from '@/stores/creatorProfileStore.js';
     import { useUserProfileStore } from '@/stores/userProfileStore.js';
     import { useLanguageStore } from '@/stores/languageStore.js';
-    import { useRoute } from 'vue-router';
     import { mdiAccount, mdiFileAccountOutline, mdiLogin, mdiLogout, mdiTranslateVariant } from '@mdi/js';
 
     const { locale, t } = useI18n();
     const languageStore = useLanguageStore();
-    const route = useRoute();
 
     const userProfileStore = useUserProfileStore();
     const creatorProfileStore = useCreatorProfileStore();
@@ -117,23 +115,20 @@
 <style scoped>
     .side-container {
         @apply bg-hSurface text-hOnSurface;
-        @apply lg:fixed lg:max-h-screen;
         @apply flex;
-        @apply lg:flex-col lg:w-64 lg:max-w-64;
-        @apply h-16 lg:h-screen;
-        @apply lg:border-r-2 lg:border-[#2d282d];
+        @apply max-h-screen;
+        @apply h-16;
     }
 
     .side-logo {
         @apply flex flex-grow;
         @apply items-center justify-start p-4;
-        @apply lg:items-start lg:justify-center lg:pt-4;
     }
 
     .side-menu {
         @apply flex gap-4 p-6;
-        @apply items-center lg:items-stretch;
-        @apply flex-row-reverse lg:flex-col;
+        @apply items-center;
+        @apply flex-row-reverse;
     }
 
     .side-menu-portrait {
@@ -145,21 +140,20 @@
     .side-menu-items {
         @apply flex gap-2;
         @apply flex-row;
-        @apply lg:w-full lg:flex-col;
     }
 
     .profile-label {
         @apply ml-5;
         @apply text-lg font-sans capitalize;
         @apply font-semibold;
-        @apply hidden lg:inline;
+        @apply hidden;
         @apply min-w-40 truncate;
     }
 
     .label {
         @apply text-nowrap;
         @apply ml-4;
-        @apply hidden lg:inline;
+        @apply hidden;
     }
 
     .menu-item-action {