Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-70211

Develop templates for primary navigation

    XMLWordPrintable

    Details

    • Type: Task
    • Status: Open
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 4.0
    • Fix Version/s: None
    • Component/s: Navigation

      Description

      Develop templates for secondary navigation.

      Using the Moodle 4.0 Navigation prototype  – (Replace with final Figma link) and the example navigation node, create the base templates and any applicable renderers for the new primary navigation.

       

      User stories

      Story Acceptance Criteria / Confirmation
      As a teacher, I want to easily find the menu item, so that I can move between courses and activities I should be able to easily see my list of courses in a predictable place and be able to jump from one course to another at speed
      As any user, I want to see an overview of all of my courses, so that I can navigate around the site I can navigate to a dashboard of sorts that contains the courses I am currently enrolled in or have access to
      As any user, I want to easily navigate to an enrolled course, so that I can view my content I can easily find my desired course to review its content 
      As any user, I want to quickly navigate to the site home page, so that I can find other relevant content I am able to navigate to the sites home easily & quickly 
      As a site admin, I want to modify my Moodle instances’ settings, so that I can deliver a better experience for my users Links to the site administration settings still appear in easily locatable locations for site administrators

      Acceptance criteria

      • New files and sub directories created in logical locations, example located below
      • Frontend matches the designs
      • UI elements are accessible
        • Follows WCAG AA
        • LTR & RTL compatibility
      • Navigation items should appear as tabs within the site header
      • Active element needs to have an indicator below the active tab
      • Hover styling that indicates the potential tab item that’ll be navigated to
      • Dynamic “More” menu which will accommodate navigation elements when the viewport width reduces width
      • Navigation elements should render within a navigation drawer on the left side of the viewport on a mobile sized device

      Example file location

      /lib/templates
                    /navigation
                               /primary
                                         /navigation_node.mustache

      Example navigation_node that the primary navigation view may return

       

      [
          navigation_node: object {
              "text": string
              "key": string
              "display": boolean
              "isactive": boolean
              "children": [
                  navigation_view_node()
                      { "text": string "key": string "display": boolean "active": boolean "children": [navigation_view_node: object,...] }
              ]
          },
          navigation_view_node: object {}
          , etc…
      ]
      

       

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              Unassigned Unassigned
              Reporter:
              mathewmay Mathew May
              Participants:
              Component watchers:
              Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Sujith Haridasan
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Dates

                Created:
                Updated: