Allow page content to take full width other than that used by the sidebar

diff --git a/_lib/breadcrumbs.jst b/_lib/breadcrumbs.jst
index 60b0c38..6440418 100644 (file)
--- a/_lib/breadcrumbs.jst
+++ b/_lib/breadcrumbs.jst
@@ -1,6 +1,8 @@
 let assert = require('assert')
 
 return async (env, _out) => {
+  let fa_bars = await env.site.get_min_svg('/_svg/fa_bars.svg')
+
   // the breadcrumbs have already been determined by navbar.jst, as
   // the HTML title is similar to the breadcrumbs (but without links)
   let component_names = env.component_names
@@ -8,7 +10,12 @@ return async (env, _out) => {
 
   // present component_titles as breadcrumbs, except last one as text
   h2.page-header.grid-gutter-background.'py-2'.mb-0 {
-    button.btn.btn-outline-secondary.mr-3#navbar-toggle {'Toggle'}
+    button.btn.btn-outline-secondary.sidebar-toggle.mr-3#navbar-sidebar-toggle {
+      div.icon24-outer(style="top: -1px;") {
+        div.icon24-inner {_out.push(fa_bars)}
+      }
+      span.sr-only {'Navbar toggle'}
+    }
     for (let i = 0; i < component_names.length; ++i) {
       a.h4(
         href=

diff --git a/_lib/navbar.jst b/_lib/navbar.jst
index 92d3373..809ba00 100644 (file)
--- a/_lib/navbar.jst
+++ b/_lib/navbar.jst
@@ -129,7 +129,7 @@ return async (env, head, body, scripts) => {
 
       div.container-fluid {
         div.row {
-          div.'col-md-4'.sidebar-outer#navbar-sidebar-outer {
+          div.col-md.sidebar-outer.sidebar-outer-collapsed#navbar-sidebar-outer {
             div.sidebar-inner#navbar-sidebar-inner {
               div.mb-4 {
                 div(style="width: 128px; height: 128px;") {
@@ -247,7 +247,7 @@ return async (env, head, body, scripts) => {
             }
           }
 
-          div.'col-md-8'.'col-xl-7' {
+          div.col-md {
             await body(_out)
 
             footer.page-footer.grid-gutter-background.py-5 {
@@ -482,7 +482,8 @@ return async (env, head, body, scripts) => {
             let id_navbar_signed_in_status = document.getElementById('navbar-signed-in-status')
             //let id_navbarDropdown = document.getElementById('navbarDropdown')
             //let id_navbarSupportedContent = document.getElementById('navbarSupportedContent')
-            let id_navbar_toggle = document.getElementById('navbar-toggle') // defined in breadcrumbs.jst
+            // the following is defined in breadcrumbs.jst for now:
+            let id_navbar_sidebar_toggle = document.getElementById('navbar-sidebar-toggle')
 
             // sign in form
             id_navbar_sign_in.addEventListener(
@@ -739,22 +740,31 @@ return async (env, head, body, scripts) => {
             )
 
             // sidebar
-            let sidebar_computed_style = window.getComputedStyle(
+            let sidebar_outer_computed_style = window.getComputedStyle(
               id_navbar_sidebar_outer
             )
-            let sidebar_collapse_update = () => {
-              if (sidebar_computed_style.position === 'sticky') { // md and up
-                id_navbar_sidebar_outer.style.flexBasis =
+            let sidebar_toggle_computed_style = window.getComputedStyle(
+              id_navbar_sidebar_toggle
+            )
+            let sidebar_is_collapsed =
+              () =>
+                sidebar_toggle_computed_style.display !== 'none' &&
                   id_navbar_sidebar_outer.classList.contains(
                     'sidebar-outer-collapsed'
-                  ) ? '0px' : `${id_navbar_sidebar_inner.clientWidth}px`
+                  )
+            let sidebar_collapse_update = () => {
+              if (sidebar_outer_computed_style.position === 'sticky') { // md and up
+                id_navbar_sidebar_outer.style.flexBasis =
+                  sidebar_is_collapsed() ?
+                    '0px' :
+                    `${id_navbar_sidebar_inner.clientWidth}px`
                 id_navbar_sidebar_outer.style.removeProperty('height')
               }
               else {
                 id_navbar_sidebar_outer.style.height =
-                  id_navbar_sidebar_outer.classList.contains(
-                    'sidebar-outer-collapsed'
-                  ) ? '0px' : `${id_navbar_sidebar_inner.clientHeight}px`
+                  sidebar_is_collapsed() ?
+                    '0px' :
+                    `${id_navbar_sidebar_inner.clientHeight}px`
                 id_navbar_sidebar_outer.style.removeProperty('flex-basis')
               }
             }
@@ -766,11 +776,11 @@ return async (env, head, body, scripts) => {
               () => {
                 // transitions are only allowed after clicking collapse button,
                 // otherwise they can be triggered by media queries on resize
-                id_navbar_sidebar_outer.style.removeProperty('transitionProperty')
+                id_navbar_sidebar_outer.style.removeProperty('transition-property')
               }
             )
 
-            id_navbar_toggle.addEventListener(
+            id_navbar_sidebar_toggle.addEventListener(
               'click',
               () => {
                 if (
@@ -786,7 +796,7 @@ return async (env, head, body, scripts) => {
                     'sidebar-outer-collapsed'
                   )
                 id_navbar_sidebar_outer.style.transitionProperty =
-                  sidebar_computed_style.position === 'sticky' ?
+                  sidebar_outer_computed_style.position === 'sticky' ?
                     'flex-basis' : // md and up
                     'height'
                 sidebar_collapse_update()

diff --git a/_svg/fa_bars.svg b/_svg/fa_bars.svg
new file mode 100644 (file)
index 0000000..e0b17bb
--- /dev/null
+++ b/_svg/fa_bars.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"/></svg>
\ No newline at end of file

diff --git a/css/bootstrap/_custom.scss b/css/bootstrap/_custom.scss
index d6e7cac..d721b5e 100644 (file)
--- a/css/bootstrap/_custom.scss
+++ b/css/bootstrap/_custom.scss
@@ -36,6 +36,8 @@ $footer-link-hover-color: darken($footer-link-color, 10%);
 }
 
 .sidebar-outer {
+  flex-grow: 0;
+  flex-shrink: 0;
   padding-left: 0;
   padding-right: 0;
   overflow: hidden;
@@ -56,6 +58,11 @@ $footer-link-hover-color: darken($footer-link-color, 10%);
     width: 350px;
   }
 }
+.sidebar-toggle {
+  @include media-breakpoint-up(xl) {
+    display: none;
+  }
+}
 
 // needed for svg icons inside buttons, card headers, etc
 // creates an inline element with correct width but no height