feat: add dynamic breadcrumb (#706)

* feat: add dynamic breadcrumb

* feat: pr feedback

apps/nextjs/src/app/[locale]/manage/tools/docker/page.tsx

@@ -3,6 +3,7 @@ import { Stack, Title } from "@mantine/core";
 import { api } from "@homarr/api/server";
 import { getScopedI18n } from "@homarr/translation/server";
 
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { DockerTable } from "./DockerTable";
 
 export default async function DockerPage() {
@@ -10,9 +11,12 @@ export default async function DockerPage() {
   const tDocker = await getScopedI18n("docker");
 
   return (
-    <Stack>
-      <Title order={1}>{tDocker("title")}</Title>
-      <DockerTable containers={containers} timestamp={timestamp} />
-    </Stack>
+    <>
+      <DynamicBreadcrumb />
+      <Stack>
+        <Title order={1}>{tDocker("title")}</Title>
+        <DockerTable containers={containers} timestamp={timestamp} />
+      </Stack>
+    </>
   );
 }

apps/nextjs/src/app/[locale]/manage/tools/logs/page.tsx

@@ -6,6 +6,7 @@ import "@xterm/xterm/css/xterm.css";
 
 import dynamic from "next/dynamic";
 
+import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { fullHeightWithoutHeaderAndFooter } from "~/constants";
 import { createMetaTitle } from "~/metadata";
 
@@ -23,8 +24,11 @@ const ClientSideTerminalComponent = dynamic(() => import("./terminal"), {
 
 export default function LogsManagementPage() {
   return (
-    <Box style={{ borderRadius: 6 }} h={fullHeightWithoutHeaderAndFooter} p="md" bg="black">
-      <ClientSideTerminalComponent />
-    </Box>
+    <>
+      <DynamicBreadcrumb />
+      <Box style={{ borderRadius: 6 }} h={fullHeightWithoutHeaderAndFooter} p="md" bg="black">
+        <ClientSideTerminalComponent />
+      </Box>
+    </>
   );
 }