Create shared navigation components using module federation

[tjementum]

Summary & Motivation

This introduces shared navigation components using module federation to enable consistent navigation across self-contained systems. The implementation provides federated side menu, top menu, and common UI components that can be shared between all self-contained systems.

• Create federated side menu and mobile menu components that work across module boundaries.
• Implement federated top menu with user avatar, theme selector, language switcher, and support options.
• Enable cross-system navigation with SPA reload only when navigating between different systems.
• Make toast notifications work across module federation boundaries.
• Create shared support dialog using module federation to replace account deletion functionality.
• Implement federated translation system to share translations between self-contained systems.
• Fix various UI issues including mobile menu display, theme selector alignment, and Safari navigation bugs.
• Improve mobile experience by showing theme, support, and language switcher on login/signup pages.
• Centralize tooltip implementations and improve component accessibility.
• Ensure federated module styles are properly loaded in host systems.
• Ensure translations in federated modules are loaded from the host systems.
• Add platform configuration to restrict BackOffice menu option to internal users.

Downstream projects

1. Move your side menu configuration to the centralized location

   • Add your side menu items to application/account-management/WebApp/federated-modules/sideMenu/NavigationMenuItems.tsx
   • Remove side menu items from your local components

   This file now serves as the central configuration for all side menu items across systems.

2. Update your bootstrap.tsx to use federated translations:

- import { Translation } from "@repo/infrastructure/translations/Translation";
+ import { createFederatedTranslation } from "@repo/infrastructure/translations/createFederatedTranslation";

- const { TranslationProvider } = await Translation.create(
+ const { TranslationProvider } = await createFederatedTranslation(
  (locale) => import(`@/shared/translations/locale/${locale}.ts`)
);

4. Replace your side menu component with the federated version in your main route:

- import { SharedSideMenu } from "@/shared/components/SharedSideMenu";
+ import FederatedSideMenu from "account-management/FederatedSideMenu";

- <SharedSideMenu ariaLabel={t`Toggle collapsed menu`} />
+ <FederatedSideMenu currentSystem="your-self-contained-system" />

5. Update your top menu component to use the federated version:

- import { LocaleSwitcher } from "@repo/infrastructure/translations/LocaleSwitcher";
- import { ThemeModeSelector } from "@repo/ui/theme/ThemeModeSelector";
- const AvatarButton = lazy(() => import("account-management/AvatarButton"));
+ const FederatedTopMenu = lazy(() => import("account-management/FederatedTopMenu"));

// Wrap your existing breadcrumbs or top menu content with FederatedTopMenu:
- <nav className="flex w-full items-center justify-between">
-   {/* Your breadcrumbs and menu items */}
- </nav>
+ <Suspense fallback={<div className="h-12 w-full" />}>
+   <FederatedTopMenu>
+     {/* Your breadcrumbs */}
+   </FederatedTopMenu>
+ </Suspense>

6. Remove local implementations of SharedSideMenu and update imports throughout your system.

7. Change the internalEmailDomain in application/shared-kernel/SharedKernel/Platform/platform-settings.jsonc to your own to only show BackOffice to internal users.

This change is part of a bigger redesign of the navigation, so please look at this and other changes holistically.

Checklist

• I have added tests, or done manual regression tests
• I have updated the documentation, if necessary

[sonarqubecloud]

Quality Gate failed

Failed conditions
1 Security Hotspot

See analysis details on SonarQube Cloud