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

package/dist/assets/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>