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 @@