@qld-gov-au/qgds-bootstrap5 2.0.2 → 2.0.4

package/src/components/bs5/sidenav/sidenav.data.json

@@ -1,88 +1,89 @@
 {
-    "navtitle": "In this section",
-    "navtitlelink": "#optionallink",
-    "navlist": [
+  "collapseTitle": "In this section",
+  "navtitle": "Parent page",
+  "navtitlelink": "#optionallink",
+  "navlist": [
+    {
+      "link": "https://www.qld.gov.au/transport/registration/register/heavy",
+      "label": "Sibling page",
+      "class": "",
+      "target": "",
+      "children": [
         {
-            "link": "https://www.qld.gov.au/transport/registration/register/heavy",
-            "label": "Heavy vehicles",
-            "class": "",
-            "target": "",
-            "children": [
-                {
-                    "link": "#",
-                    "class": "",
-                    "label": "Level two item",
-                    "children": []
-                },
-                {
-                    "link": "#",
-                    "class": "active",
-                    "label": "Level two item",
-                    "children": []
-                },
-                {
-                    "link": "#",
-                    "class": "",
-
-                    "label": "Level two item",
-                    "children": [
-                        {
-                            "link": "#",
-                            "class": "",
-                            "label": "Level three item",
-                            "children": []
-                        },
-                        {
-                            "link": "#",
-                            "class": "active",
-                            "label": "Level three item that wraps to another line",
-                            "children": []
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            "link": "#",
-            "label": "Renew registration",
-            "class": "",
-            "children": []
-        },
-        {
-            "link": "#",
-            "label": "Register a motorised mobility device",
-            "class": "active",
-            "children": []
-        },
-        {
-            "link": "#",
-            "label": "Register a boat",
-            "class": "",
-            "children": []
-        },
-        {
-            "link": "#",
-            "label": "Conditional registration",
-            "class": "",
-            "children": []
+          "link": "#",
+          "class": "",
+          "label": "Child page",
+          "children": []
         },
         {
-            "link": "#",
-            "label": "Vehicles registered overseas temporarily being used in Queensland",
-            "class": "",
-            "children": []
+          "link": "#",
+          "class": "active",
+          "label": "Child page",
+          "children": []
         },
         {
-            "link": "#",
-            "label": "Left hand drive vehicles",
-            "class": "",
-            "children": []
-        },
-        {
-            "link": "#",
-            "label": "Registration Help Tool—how to register a used motor vehicle or motorcycle",
-            "class": "",
-            "children": []
+          "link": "#",
+          "class": "",
+
+          "label": "Child page",
+          "children": [
+            {
+              "link": "#",
+              "class": "",
+              "label": "Grandchild page",
+              "children": []
+            },
+            {
+              "link": "#",
+              "class": "active",
+              "label": "Grandchild page",
+              "children": []
+            }
+          ]
         }
-    ]
+      ]
+    },
+    {
+      "link": "#",
+      "label": "Sibling page",
+      "class": "",
+      "children": []
+    },
+    {
+      "link": "#",
+      "label": "Sibling page",
+      "class": "active",
+      "children": []
+    },
+    {
+      "link": "#",
+      "label": "Sibling page",
+      "class": "",
+      "children": []
+    },
+    {
+      "link": "#",
+      "label": "Sibling page",
+      "class": "",
+      "children": []
+    },
+    {
+      "link": "#",
+      "label": "Sibling page",
+      "class": "",
+      "children": []
+    },
+    {
+      "link": "#",
+      "label": "Sibling page",
+      "class": "",
+      "children": []
+    },
+    {
+      "link": "#",
+      "label": "Sibling page",
+      "class": "",
+      "children": []
+    }
+  ]
 }

package/src/components/bs5/sidenav/sidenav.hbs

@@ -1,66 +1,85 @@
-<div class="qld-side-navigation">
-
+<nav class="qld-side-navigation" aria-label="Side Navigation">
+  <button
+    class="accordion-button collapsed d-lg-none"
+    type="button"
+    data-bs-toggle="collapse"
+    data-bs-target="#sideNavCollapse"
+    aria-expanded="false"
+    aria-controls="sideNavCollapse"
+  >
+    {{isdefined collapseTitle "In this section"}}
+  </button>
+  <div class="nav-wrapper collapse d-lg-block" id="sideNavCollapse">
     <h2 class="nav-title">
-        {{#if navtitlelink }}
+      {{#if navtitlelink}}
         <a class="nav-link" href="{{navtitlelink}}">{{navtitle}}</a>
-        {{else}}
+      {{else}}
         {{navtitle}}
-        {{/if}}
+      {{/if}}
     </h2>
 
     <!-- Level One -->
     <ul class="nav" aria-label="section navigation">
 
-        {{#each navlist}}
+      {{#each navlist}}
         <li class="nav-item {{class}}">
-            
-            {{#contains "active" class }}
+
+          {{#contains "active" class}}
             <span class="nav-link">{{label}}</span>
-            {{else}}
+          {{else}}
             <a class="nav-link" href="{{link}}" target="{{target}}">
-                {{label}} {{class}}
+              {{label}}
+              {{class}}
             </a>
-            {{/contains}}
+          {{/contains}}
 
-            {{#if children}}
+          {{#if children}}
             <!-- Level Two -->
             <ul>
-            {{#each children}}
+              {{#each children}}
                 <li class="nav-item {{class}}">
-                    
-                {{#contains "active" class }}
-                <span class="nav-link">{{label}}</span>
-                {{else}}
-                <a class="nav-link" href="{{link}}" target="{{target}}">
-                    {{label}} {{class}}
-                </a>
-                {{/contains}}
 
-                    {{#if children}}
+                  {{#contains "active" class}}
+                    <span class="nav-link">{{label}}</span>
+                  {{else}}
+                    <a class="nav-link" href="{{link}}" target="{{target}}">
+                      {{label}}
+                      {{class}}
+                    </a>
+                  {{/contains}}
+
+                  {{#if children}}
                     <!-- Level Three -->
                     <ul class="with-stalks">
-                    {{#each children}}
+                      {{#each children}}
                         <li class="nav-item {{class}}">
-                           
-                        {{#contains "active" class }}
-                        <span class="nav-link">{{label}}</span>
-                        {{else}}
-                        <a class="nav-link" href="{{link}}" target="{{target}}">
-                            {{label}} {{class}}
-                        </a>
-                        {{/contains}}
+
+                          {{#contains "active" class}}
+                            <span class="nav-link">{{label}}</span>
+                          {{else}}
+                            <a
+                              class="nav-link"
+                              href="{{link}}"
+                              target="{{target}}"
+                            >
+                              {{label}}
+                              {{class}}
+                            </a>
+                          {{/contains}}
 
                         </li>
-                    {{/each}}
+                      {{/each}}
                     </ul>
-                    {{/if}}
+                  {{/if}}
 
                 </li>
-            {{/each}}
+              {{/each}}
             </ul>
-            {{/if}}
+          {{/if}}
 
         </li>
-        {{/each}}
+      {{/each}}
     </ul>
-</div>
+  </div>
+
+</nav>