Moodle's top navbar breaks on mobile designs when custommenuitems are configured

The Boost top navbar cannot be styled through theme settings, the theme classic option for a dark navbar is broken.

Update the navbar items to use the same css classes and create a single navbar.scss sheet with customisable scss variables for styling

Document the new navbar in the Moodle UI component library

—

Design specs:

Navbar - left side

Behaviour

If the user is not logged in:

• From LG breakpoint upward (greater than 900px)
  • If 'logocompact' is empty:
    • Site 'shortname' is displayed on the left side of the navbar
    • The site 'shortname' will wrap using ellipsis '...' after 20 characters
  • If 'logocompact' is not empty
    • The image uploaded to 'logocompact' is displayed on the left side of the navbar
    • The site 'shortname' is NOT displayed anywhere in the navbar

• From MD breakpoint downward (less than 900px)
  • Neither 'logocompact' nor 'shortname' is displayed on the navbar

If the user is logged in:

• From LG breakpoint upward (greater than 900px)
  • If 'logocompact' is empty:
    • Site 'shortname' is displayed on the left side of the navbar
    • The site 'shortname' will wrap using ellipsis '...' after 20 characters
  • If 'logocompact' is not empty
    • The image uploaded to 'logocompact' is displayed on the left side of the navbar
    • The site 'shortname' is NOT displayed anywhere in the navbar
  • The menu items are displayed streamlined, next to the site 'shortname' or 'logocompact'
    • Home (if enabled) → disabled by default
    • Dashboard → where the user automatically lands when logging in
    • My courses
    • Site administration
    • Custom menus
  • The menu items that do not fit in the available space are displayed in the dropdown under "More"

• From MD breakpoint downward (less than 900px)
  • No 'shortname' or 'logocompact' is displayed in the navbar
  • The hamburger menu is displayed
    • When clicking the hamburger menu, the following menu items are shown listed inside a drawer that overlaps the page content:
      • Home (if enabled) → disabled by default
      • Dashboard → where the user automatically lands when logging in
      • My courses
      • Site administration
      • Custom menus
    • If 'logocompact' is empty:
      • The site 'shortname' is displayed at the top of the drawer, in the same row as the "X" button that closes it
    • If 'logocompact' is not empty
      • The image uploaded to 'logocompact' is displayed at the top of the drawer, in the same row as the "X" button that closes it
      • The site 'shortname' is NOT displayed anywhere in the menu or the navbar

Navbar - right side

Behaviour

If the user is not logged in:

• From LG breakpoint upward (greater than 900px)
  • Items displayed:
    • Language selector
      • Aligned to the right, next to the "Log in" link
      • When clicked, it loads the language list options in a floating container
    • —— Vertical divider ——
    • 'Log in' link
      • Aligned to the right (top right corner)
      • Note: if possible, let's drop the sentence "You are not logged in." and keep only the actual "Log in" link

• From SM breakpoint downward (less than 768px)
  • Items displayed:
    • Language selector
      • Aligned to the left (top left corner)
      • When clicked, it loads the language list options in a floating container
    • 'Log in' link
      • Aligned to the right (top right corner)

• From 480px downward
  • Language selector
    • When clicked, it loads the language list options in a full-width container
      • The title of the loaded list is "Language selector"
        • This title should wrap using ellipsis '...' if too big
      • "X" icon closes it

If the user is logged in:

• From LG breakpoint upward (greater than 900px)
  • Items displayed:
    • Search (if enabled)
    • MoodleCloud usage indicators (MoodleCloud only) → need to double-check with MC team
    • Moodle Workplace launcher (Workplace only)
    • Notifications (no changes)
    • Messages (no changes)
    • User menu
      • User picture
        • Display user initials if no user picture is uploaded
      • By clicking in the user picture, a floating container with the following items is shown:
        • Profile
        • Grades
        • Calendar
        • Private files
        • —— Horizontal divider ——
        • Preferences
        • Language
          • When clicked, it loads the language list options in the same floating container
            • The title of the loaded list is "Language selector"
              • This title should wrap using ellipsis '...' if too big
            • Left-arrow icon to go back to the previous items list
        • Switch role to... (if available)
        • —— Horizontal divider ——
        • Log out
    • —— Vertical divider ——
    • Edit mode toggle
      • Text and toggle icon
      • The whole area should be clickable

• From SM breakpoint downward (less than 768px)
  • Edit mode toggle
    • Only icon

• From 480px downward
  • Search (if enabled)
  • MoodleCloud usage indicators (MoodleCloud only) → need to double-check with MC team
  • Moodle Workplace launcher (Workplace only)
  • Notifications (no changes)
  • Messages (no changes)
  • User menu
    • User picture
      • By clicking in the user picture, a 100% width container is shown:
        • Profile
        • Grades
        • Calendar
        • Private files
        • —— Empty gap ——
        • Preferences
        • Language
          • When clicked, it loads the language list options in the same floating container
            • The title of the loaded list is "Language selector"
              • This title should wrap using ellipsis '...' if too big
            • Left-arrow icon to go back to the previous items list
        • Switch role to... (if available)
        • —— Empty gap ——
        • Log out