change the headbar to top side

apps/backoffice/src/app/layouts/BackofficeLayout.tsx

@@ -1,11 +1,10 @@
-import { useCallback, useState } from 'react';
-import { AppShell } from '@mantine/core';
+import { useCallback } from 'react';
+import { AppShell, rem } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { logout } from '@ema-platform/auth';
-import { AppHeader, AppSidebar } from '@ema-platform/ui';
-import type { NavItem } from '@ema-platform/ui';
+import { AppHeader } from '@ema-platform/ui';
 import {
   IconLayoutDashboard,
   IconUsers,
@@ -15,6 +14,14 @@ import {
 import { notify } from '@ema-platform/ui';
 import { SUPPORTED_LANGUAGES } from '../i18n/config';
 import { useAppDispatch, useAppSelector } from '../store/hooks';
+import type { Icon } from '@tabler/icons-react';
+
+interface NavItem {
+  label: string;
+  icon: Icon;
+  to?: string;
+  soon?: boolean;
+}
 
 const NAV_ITEMS: NavItem[] = [
   { to: '/dashboard', label: 'Dashboard', icon: IconLayoutDashboard },
@@ -23,14 +30,14 @@ const NAV_ITEMS: NavItem[] = [
   { to: '/profile', label: 'Profile', icon: IconUser },
 ];
 
+const HEADER_HEIGHT = 116;
+
 export function BackofficeLayout() {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const location = useLocation();
   const dispatch = useAppDispatch();
   const [opened, { toggle: toggleNav }] = useDisclosure();
-  const [collapsed, setCollapsed] = useState(false);
-  const handleToggleCollapse = () => setCollapsed((prev) => !prev);
   const user = useAppSelector((state) => state.auth.user);
 
   const displayName = user?.name?.en || user?.username || '';
@@ -43,7 +50,6 @@ export function BackofficeLayout() {
     navigate('/login');
   }, [dispatch, navigate]);
 
-  // Breadcrumbs
   const segments = location.pathname.split('/').filter(Boolean);
   const crumbs = [
     { label: t('nav.dashboard'), path: '/dashboard' },
@@ -66,51 +72,89 @@ export function BackofficeLayout() {
 
   return (
     <AppShell
-      header={{ height: 74 }}
-      navbar={{
-        width: collapsed ? 72 : 264,
-        breakpoint: 'sm',
-        collapsed: { mobile: !opened },
-      }}
+      header={{ height: HEADER_HEIGHT }}
       padding="lg"
     >
       <AppShell.Header
         style={{
           background: 'var(--mantine-color-body)',
           borderBottom: '1px solid var(--mantine-color-gray-2)',
+          display: 'flex',
+          flexDirection: 'column',
         }}
       >
-        <AppHeader
-          onToggleNav={toggleNav}
-          onToggleSidebar={handleToggleCollapse}
-          navOpened={opened}
-          breadcrumbs={crumbs}
-          onNavigate={navigate}
-          onLogout={handleLogout}
-          userName={displayName || t('app.name')}
-          userInitials={initials}
-          supportedLanguages={SUPPORTED_LANGUAGES}
-        />
+        {/* Top bar */}
+        <div style={{ height: 74, flexShrink: 0, padding: '0 32px' }}>
+          <AppHeader
+            onToggleNav={toggleNav}
+            onToggleSidebar={toggleNav}
+            navOpened={opened}
+            breadcrumbs={crumbs}
+            onNavigate={navigate}
+            onLogout={handleLogout}
+            userName={displayName || t('app.name')}
+            userInitials={initials}
+            supportedLanguages={SUPPORTED_LANGUAGES}
+          />
+        </div>
+
+        {/* Legacy-style tab bar — matching UM AppMenuTabs look */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: rem(2),
+            padding: '0 32px',
+            height: 42,
+            borderTop: '1px solid var(--mantine-color-gray-1)',
+            overflowX: 'auto',
+            flexShrink: 0,
+          }}
+        >
+          {NAV_ITEMS.map((item) => {
+            const active = !!item.to && (location.pathname === item.to || location.pathname.startsWith(`${item.to}/`));
+            const ItemIcon = item.icon;
+            return (
+              <button
+                key={item.to}
+                onClick={() => go(item)}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: rem(6),
+                  padding: '8px 16px',
+                  border: 'none',
+                  borderBottom: '2px solid',
+                  borderBottomColor: active
+                    ? 'var(--mantine-color-blue-6)'
+                    : 'transparent',
+                  background: 'transparent',
+                  color: active
+                    ? 'var(--mantine-color-blue-6)'
+                    : 'var(--mantine-color-gray-6)',
+                  fontWeight: active ? 600 : 500,
+                  fontSize: rem(14),
+                  whiteSpace: 'nowrap',
+                  cursor: 'pointer',
+                  transition: 'all 150ms ease',
+                  height: '100%',
+                  marginBottom: -1,
+                  fontFamily: 'inherit',
+                }}
+                onMouseEnter={(e) => {
+                  if (!active) e.currentTarget.style.color = 'var(--mantine-color-blue-6)';
+                }}
+                onMouseLeave={(e) => {
+                  if (!active) e.currentTarget.style.color = 'var(--mantine-color-gray-6)';
+                }}
+              >
+                <ItemIcon size={18} stroke={1.6} />
+                <span>{item.label}</span>
+              </button>
+            );
+          })}
+        </div>
       </AppShell.Header>
-      <AppShell.Navbar
-        p={0}
-        style={{
-          overflow: 'hidden',
-          transition: 'width 200ms ease',
-          background: 'var(--mantine-color-body)',
-          borderRight: '1px solid var(--mantine-color-gray-2)',
-        }}
-      >
-        <AppSidebar
-          navItems={NAV_ITEMS}
-          collapsed={collapsed}
-          activePath={location.pathname}
-          onToggleCollapse={handleToggleCollapse}
-          onNavigate={go}
-          brandName={t('app.name')}
-          brandSubtitle={t('app.authority')}
-        />
-      </AppShell.Navbar>
       <AppShell.Main>
         <div key={location.pathname} className="ema-page-enter">
           <Outlet />