Class MJLeftNavComponent

<mj-left-nav> — Canonical left rail for MJ Explorer dashboards that have an internal section-nav (Admin shells, KH Config, KH Analytics, AI Analytics, Communication, Credentials, APIKeys, etc.).

Replaces the bespoke .{name}-nav / .{name}-nav-item patterns each of those dashboards used to declare in their own CSS files.

Supports:

• Plain items (icon + label)
• Items with a muted secondary description line (Admin shells pattern)
• Items with a count badge (APIKeys pattern)
• Sections with uppercase headers (Communication / Credentials pattern)
• Optional [header] and [footer] content slots (KH Config logo header, etc.)
• Responsive mobile drawer (≤700px): the rail hides off-canvas and a compact section switcher takes its place; tapping it slides the full rail in over a scrim. The rail keeps its full content (trees, slots, descriptions, badges) inside the drawer — no flattening. Set [MobileTitle] for the drawer label.

Example

sections: MJLeftNavSection[] = [
  {
    items: [
      { id: 'users',  icon: 'fa-solid fa-users',         label: 'Users',  description: 'Manage user accounts' },
      { id: 'roles',  icon: 'fa-solid fa-user-shield',   label: 'Roles',  description: 'Define roles and assignments' },
    ]
  }
];
activeId = 'users';
Copy

<mj-left-nav
  [Sections]="sections"
  [ActiveId]="activeId"
  (ItemClicked)="onItemClicked($event)">
</mj-left-nav>
Copy

Responsive — at ≤700px the rail becomes an off-canvas drawer (see the feature list above). The consumer should still switch the parent's flex-direction from row → column at the same breakpoint (e.g. <mj-page-body> Direction="row" with a @media override) so the in-flow section switcher stacks above the content pane rather than competing with it for horizontal space.