Added navigation to hamburger menu (#309)

smythp · web-flow · commit fa8b3df745d2 · 2024-06-25T11:21:43.000-04:00
Recapitulated the sidebar in the hamburger menu for navigation

Display is hidden on large and up screens

Signed-off-by: Patrick Smyth &lt;patrick.smyth@chainguard.dev&gt;
diff --git a/assets/scss/layouts/_header.scss b/assets/scss/layouts/_header.scss
@@ -491,3 +491,10 @@ button#doks-versions {
     padding-left: 0.5rem;
   }
 }
+
+// Hide sidebar appearing inside hamburger menu
+// on mobile devices
+@include media-breakpoint-up(lg) {
+    .sidebar-mobile {
+        display: none;
+    }}
diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html
@@ -162,6 +162,11 @@ <h2 class="h5 offcanvas-title ps-2" id="offcanvasDoksLabel"><a class="text-dark"
           </ul>
         </div>
         {{ end -}}
+
+        <div class="sidebar-mobile">
+          {{ partial "sidebar/auto-collapsible-menu.html" . }}
+        </div>
+
       </div>
     </div>
   </nav>

Original file line number	Diff line number	Diff line change
`@@ -491,3 +491,10 @@ button#doks-versions {`
`491`	`491`	`padding-left: 0.5rem;`
`492`	`492`	`}`
`493`	`493`	`}`
	`494`	`+`
	`495`	`+// Hide sidebar appearing inside hamburger menu`
	`496`	`+// on mobile devices`
	`497`	`+@include media-breakpoint-up(lg) {`
	`498`	`+ .sidebar-mobile {`
	`499`	`+ display: none;`
	`500`	`+ }}`