impact0mics-common-layout

Shared React layout shell for Impact0mics applications — provides a pre-built Header, Sidebar, and MainPlaceholder powered by MUI v6+.

Installation

npm install impact0mics-common-layout

Peer Dependencies

Make sure these packages are installed in your consuming app:

npm install react react-dom react-router-dom @mui/material @mui/icons-material @emotion/react @emotion/styled i18next react-i18next

Usage

import {
  Header,
  Sidebar,
  MainPlaceholder,
  getDefaultMenuItems,
} from "impact0mics-common-layout";
import "impact0mics-common-layout/dist/impact0mics-common-layout.css";

Exported Components

| Export | Description | |--------|-------------| | Header | Top navigation bar with user identity, tenant branding | | Sidebar | Collapsible sidebar with configurable menu items | | MainPlaceholder | Centered placeholder for empty/loading main content | | BrandLogoIcon | Tenant-aware brand logo icon |

Exported Hooks

| Hook | Description | |------|-------------| | useLocaleSync | Syncs i18next locale from storage/URL | | useMenuPermissions | Filters menu items by user role/permissions | | useUserIdentity | Resolves user identity from JWT + storage |

Exported Utilities

| Utility | Description | |---------|-------------| | getDefaultMenuItems | Returns canonical sidebar menu definition | | decodeJwtPayload | Decodes a JWT payload without verification | | getInitialLocale | Resolves locale from URL, storage, or browser | | injectTenantFallbackCss | Injects fallback CSS variables for tenant theming | | STORAGE_KEYS | Canonical storage key constants |

CSS

Import the bundled stylesheet once at your app root:

import "impact0mics-common-layout/dist/impact0mics-common-layout.css";

License

MIT © MedGenome