Navigation Panel

By following these guidelines, you can ensure a consistent and user-friendly experience across all Kami's Applications.

Kambi Logo

• Maintain consistent dimensions, positioning, and styling across all implementations.

• The logo must always link to current app's landing page.

• The arrow icon adjacent to the logo opens a dropdown menu, displaying available apps (e.g., DBD):

  • Most-used apps.

  • Partner-facing tools.

  • Apps bookmarked by the user.

Application Name

• Use consistent typography, including size, color, and style across all implementations.

• Support multi-line display for longer application names.

• The application name must link to the app's landing page.

• When the left panel is collapsed, display the application name in the App Info Bar at the top of the App Bar.

Navigation List

• Group navigation items into logical sections for better organization.

• Collapsible sub-items will be displayed as a menu when the left panel is closed.

• Adhere to UX writing best practices for all labels.

• Use Material UI icons for root-level list items, with optional icons for sub-items.

• Maintain consistent styles, including color, highlights, and typography.

• Always show the app logo as Icon for the the Landing page/Dashboard.

Quick Links Bar

• Display icon-only buttons, without labels, in a horizontal stack.

• Buttons:

  • Theme: Toggles between light and dark themes.

  • Settings: Links to the app’s settings page, if available.

  • Documentation: Links to the app’s documentation page, if available (recommended).

  • Help/Support: Links to help/support resources or PSD (recommended for partner-facing tools).

UI Buttons

• Theme:

  • A toggle icon button for switching between light and dark themes.

  • Located in the Icon Buttons Bar.

• Open Menu:

  • Icon button to open and close the left navigation panel.

  • Placement:

    • When the menu is open, align it to the left at the same level as the Kamib logo.

    • When the menu is closed, position it below the Kamib logo.

• Full Screen

  • Icon button to enter or exit full-screen mode.

  • When the menu is closed, position it on the Top Bar at the end of the bar.

User Profile

• Use a consistent background color for avatars without a photo.

• The user profile is sticky and always located at the bottom of the screen.

• Display user information in 2–3 lines:

  • Username

  • Email address

  • Role or status

• A menu icon (three dots) provides additional options, including:

  • Logout

  • Change Role

  • Account/Profile

App Info

• Display 2–4 lines of app-specific information, including:

  • Timezone, currency, and language.

  • App version (when the left panel is collapsed, this is shown on the App Info Bar).

  • Copyright notice.

Closed Navigation Panel

• TODO....