jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jonathan Bourdon
2025-08-26 16:35:48 -04:00
parent 262f21d157
commit 9da862b629
2 changed files with 46 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
frontend/src/App.vue
View File

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

18
frontend/src/views/main/SideBar.vue → frontend/src/views/main/SiteBar.vue
View File

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