Merge branch 'feature/pencil-design' of github.com:Tria-plc/emaui into feature/pencil-design

apps/portal/src/app/layouts/PortalLayout.tsx

@@ -1,7 +1,9 @@
 import {
   ActionIcon,
+  Anchor,
   AppShell,
   Burger,
+  Card,
   Group,
   Indicator,
   Menu,
@@ -93,10 +95,15 @@ export function PortalLayout() {
   const [navOpened, { toggle: toggleNav, close: closeNav }] = useDisclosure();
   const [sidebarCollapsed, { toggle: toggleSidebar }] = useDisclosure(false);
 
-  const meta = PAGE_META[location.pathname] ?? {
-    title: 'EMA Portal',
-    subtitle: 'Ethiopian Maritime Authority',
-  };
+  // Breadcrumb trail: always rooted at "Home", then any matched page segments.
+  const segments = location.pathname.split('/').filter(Boolean);
+  const crumbs = [
+    { label: 'Home', path: '/dashboard' },
+    ...segments
+      .map((_, i) => '/' + segments.slice(0, i + 1).join('/'))
+      .filter((path) => PAGE_META[path] && path !== '/dashboard')
+      .map((path) => ({ label: PAGE_META[path].title, path })),
+  ];
 
   const go = (item: NavItem) => {
     if (item.soon) {
@@ -122,16 +129,60 @@ export function PortalLayout() {
       {/* ---- Header ---------------------------------------------------- */}
       <AppShell.Header>
         <Group h="100%" px="lg" justify="space-between" wrap="nowrap">
-          <Group gap="sm" wrap="nowrap">
-            <Burger opened={navOpened} onClick={toggleNav} hiddenFrom="sm" size="sm" />
-            <div>
-              <Text fw={700} fz="lg" lh={1.15}>
-                {meta.title}
-              </Text>
-              <Text size="xs" c="dimmed" lh={1.2} visibleFrom="xs">
-                {meta.subtitle}
-              </Text>
-            </div>
+          <Group gap="md" wrap="nowrap">
+            <Card
+              p="xs"
+              radius="md"
+              withBorder
+              style={{ backgroundColor: 'var(--mantine-color-gray-0)' }}
+            >
+              {/* Mobile: toggle the nav drawer */}
+              <Burger
+                opened={navOpened}
+                onClick={toggleNav}
+                size="sm"
+                hiddenFrom="sm"
+                aria-label="Toggle navigation"
+              />
+              {/* Desktop: toggle the sidebar collapse */}
+              <Burger
+                opened={!sidebarCollapsed}
+                onClick={toggleSidebar}
+                size="sm"
+                visibleFrom="sm"
+                aria-label="Collapse sidebar"
+              />
+            </Card>
+
+            {/* Breadcrumbs: Home > … */}
+            <Group gap={6} wrap="nowrap" visibleFrom="xs">
+              {crumbs.map((crumb, i) => {
+                const isLast = i === crumbs.length - 1;
+                return (
+                  <Group key={crumb.path} gap={6} wrap="nowrap">
+                    {i > 0 && (
+                      <Text size="sm" c="dimmed">
+                        &gt;
+                      </Text>
+                    )}
+                    {isLast ? (
+                      <Text size="sm" fw={600}>
+                        {crumb.label}
+                      </Text>
+                    ) : (
+                      <Anchor
+                        size="sm"
+                        c="dimmed"
+                        onClick={() => navigate(crumb.path)}
+                        style={{ cursor: 'pointer' }}
+                      >
+                        {crumb.label}
+                      </Anchor>
+                    )}
+                  </Group>
+                );
+              })}
+            </Group>
           </Group>
 
           <Group gap="sm" wrap="nowrap">