diff --git a/frontend/src/components/layout/Panel.vue b/frontend/src/components/layout/Panel.vue index a42f31cc..c2d710ff 100644 --- a/frontend/src/components/layout/Panel.vue +++ b/frontend/src/components/layout/Panel.vue @@ -108,4 +108,14 @@ withDefaults( overflow-y: hidden; } } + +.panel-table > .panel-title { + padding: 1.25rem 1.25rem 0.75rem; + margin-bottom: 0; +} + +.panel-table > .panel-header { + padding: 1.25rem 1.25rem 1rem; + margin-bottom: 0; +} diff --git a/frontend/src/components/layout/SidebarDetail.vue b/frontend/src/components/layout/SidebarDetail.vue index 0fafeb22..3d0426dc 100644 --- a/frontend/src/components/layout/SidebarDetail.vue +++ b/frontend/src/components/layout/SidebarDetail.vue @@ -6,8 +6,8 @@ @click="toggleMobileOpen" > {{ shop.nameCombined }} - {{ route.meta.title && route.name !== "account.shops.detail" ? " / " : "" }} - {{ route.meta.title }} + {{ currentRouteTitle && route.name !== "account.shops.detail" ? " / " : "" }} + {{ currentRouteTitle }}
@@ -56,7 +56,9 @@ v-if="$router.resolve({ name: item.route }).meta.icon" class="nav-link-icon" /> - {{ $router.resolve({ name: item.route }).meta.title }} + {{ + $t($router.resolve({ name: item.route }).meta.titleKey ?? "") + }} {{ item.count }} @@ -68,9 +70,11 @@ import type { RouterOutput } from "@/helpers/trpc"; import { computed, ref, onMounted, onUnmounted, watch } from "vue"; import { useRoute } from "vue-router"; +import { useI18n } from "vue-i18n"; import StatusIcon from "@/components/StatusIcon.vue"; const route = useRoute(); +const { t } = useI18n(); const isMobileOpen = ref(false); const sidebarRef = ref(null); @@ -80,6 +84,11 @@ const props = defineProps<{ shop: RouterOutput["organization"]["shop"]["get"] | null; }>(); +const currentRouteTitle = computed(() => { + const titleKey = route.meta.titleKey; + return typeof titleKey === "string" ? t(titleKey) : ""; +}); + const isRouteActive = (routeName: string) => { // Exact match if (route.name === routeName) return true; diff --git a/frontend/src/composables/useShopDetail.ts b/frontend/src/composables/useShopDetail.ts index 396f9e9b..f1dcfd44 100644 --- a/frontend/src/composables/useShopDetail.ts +++ b/frontend/src/composables/useShopDetail.ts @@ -4,6 +4,7 @@ import { compareVersions } from "compare-versions"; import { trpcClient } from "@/helpers/trpc"; import type { RouterOutput } from "@/helpers/trpc"; import { useAlert } from "@/composables/useAlert"; +import { i18n } from "@/i18n"; export function useShopDetail() { const route = useRoute(); @@ -46,7 +47,8 @@ export function useShopDetail() { latestShopwareVersion.value = shopwareVersions.value[0]; if (shop.value?.name) { - const pageTitle = route.meta.title; + const titleKey = route.meta.titleKey; + const pageTitle = typeof titleKey === "string" ? i18n.global.t(titleKey) : null; document.title = typeof pageTitle === "string" ? `${pageTitle} - ${shop.value.name} | Shopmon` diff --git a/frontend/src/layouts/ShopDetailLayout.vue b/frontend/src/layouts/ShopDetailLayout.vue index 5a6a6b7b..22571ed1 100644 --- a/frontend/src/layouts/ShopDetailLayout.vue +++ b/frontend/src/layouts/ShopDetailLayout.vue @@ -6,7 +6,9 @@ v-if="shop" :breadcrumb=" shop.nameCombined + - (route.meta.title && route.name !== 'account.shops.detail' ? ' / ' + route.meta.title : '') + (currentRouteTitle && route.name !== 'account.shops.detail' + ? ' / ' + currentRouteTitle + : '') " :title="shop.name" :titleMobileHide="true" @@ -103,6 +105,8 @@