Make the 'Give feedback' menu item justify to bottom when sidebar is at left

diff --git a/_lib/navbar.jst b/_lib/navbar.jst
index 171bf2b..0650c11 100644 (file)
--- a/_lib/navbar.jst
+++ b/_lib/navbar.jst
@@ -130,7 +130,7 @@ return async (env, head, body, scripts) => {
       div.container-fluid {
         div.row {
           div.col-md.sidebar-outer.sidebar-outer-collapsed#navbar-sidebar-outer {
-            div.sidebar-inner#navbar-sidebar-inner {
+            nav.sidebar-inner.d-flex.flex-column#navbar-sidebar-inner {
               div.mb-4 {
                 div(style="width: 128px; height: 128px;") {
                   _out.push(avatar_maker)
@@ -177,73 +177,37 @@ return async (env, head, body, scripts) => {
                 }
               }
 
-              //nav.navbar.navbar-expand-lg.navbar-dark.bg-primary.scrollbar-fix {
-                //a.navbar-brand(href="#") {'Navbar'}
-                //' '
-                //button.navbar-toggler(type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation") {
-                //  span.navbar-toggler-icon {}
-                //}
-                //div.collapse.navbar-collapse#navbarSupportedContent {
-                  ul.nav.flex-column { //ul.navbar-nav.mr-auto {
-                    // the active entry in the navbar bar is based on which top-level
-                    // page we are under, even if we are not directly on that page
-                    // but one of its children, this may be unexpected as the active
-                    // entry does not highlight on hover, but you can still click it;
-                    // we determine here the path to the corresponding top-level page
-                    let component_prefix = component_names.slice(0, 1)
-      
-                    for (let i = 0; i < menu_titles.length; ++i) {
-                      // construct path to the top-level page about to be described
-                      let menu_prefix =
-                        i === 0 ? [] : [menu_names[i - 1]]
-                      let menu_prefix_path =
-                        menu_prefix.map(name => '/' + name).join('') + '/index.html'
-      
-                      if (arrays_equal(menu_prefix, component_prefix))
-                        li.nav-item.active {
-                          a.nav-link.nav-link2.grid-gutter-background(href=menu_prefix_path) {
-                            `${menu_titles[i]}`
-                            span.sr-only {' (current)'}
-                          }
-                        }
-                      else
-                        li.nav-item {
-                          a.nav-link.nav-link2.grid-gutter-background(href=menu_prefix_path) {
-                            `${menu_titles[i]}`
-                          }
-                        }
+              // the active entry in the navbar bar is based on which top-level
+              // page we are under, even if we are not directly on that page
+              // but one of its children, this may be unexpected as the active
+              // entry does not highlight on hover, but you can still click it;
+              // we determine here the path to the corresponding top-level page
+              let component_prefix = component_names.slice(0, 1)
+
+              for (let i = 0; i < menu_titles.length; ++i) {
+                // construct path to the top-level page about to be described
+                let menu_prefix =
+                  i === 0 ? [] : [menu_names[i - 1]]
+                let menu_prefix_path =
+                  menu_prefix.map(name => '/' + name).join('') + '/index.html'
+
+                if (arrays_equal(menu_prefix, component_prefix))
+                  div.nav-item.active {
+                    a.nav-link.nav-link2.grid-gutter-background(href=menu_prefix_path) {
+                      `${menu_titles[i]}`
+                      span.sr-only {' (current)'}
                     }
-                    //li.nav-item.dropdown {
-                    //  a.nav-link.dropdown-toggle#navbarDropdown(href="#" role="button" data-toggle="dropdown" aria-expanded="false") {
-                    //    'Dropdown'
-                    //  }
-                    //  div.dropdown-menu(aria-labelledby="navbarDropdown") {
-                    //    a.dropdown-item(href="#") {
-                    //      'Action'
-                    //    }
-                    //    ' '
-                    //    a.dropdown-item(href="#") {
-                    //      'Another action'
-                    //    }
-                    //    div.dropdown-divider {}
-                    //    a.dropdown-item(href="#") {
-                    //      'Something else here'
-                    //    }
-                    //  }
-                    //}
-                    //li.nav-item {
-                    //  a.nav-link.disabled {
-                    //    'Disabled'
-                    //  }
-                    //}
-                  //}
-                  //ul.navbar-nav.ml-auto {
-                    li.nav-item.mt-4 {
-                      a.nav-link.nav-link2.grid-gutter-background#navbar-give-feedback(href="#") {'Give feedback'}
+                  }
+                else
+                  div.nav-item {
+                    a.nav-link.nav-link2.grid-gutter-background(href=menu_prefix_path) {
+                      `${menu_titles[i]}`
                     }
                   }
-                //}
-              //}
+              }
+              div.nav-item.mt-auto {
+                a.nav-link.nav-link2.grid-gutter-background#navbar-give-feedback(href="#") {'Give feedback'}
+              }
             }
           }
 

diff --git a/css/bootstrap/_custom.scss b/css/bootstrap/_custom.scss
index 87c97a2..74d643f 100644 (file)
--- a/css/bootstrap/_custom.scss
+++ b/css/bootstrap/_custom.scss
@@ -58,7 +58,6 @@ $footer-link-hover-color: darken($footer-link-color, 10%);
   @include media-breakpoint-up(md) {
     position: sticky;
     top: 0;
-    min-height: 100vh;
     max-height: 100vh;
     overflow-y: auto;
   }
@@ -70,6 +69,7 @@ $footer-link-hover-color: darken($footer-link-color, 10%);
   padding-right: $grid-gutter-width * .5;
   @include media-breakpoint-up(md) {
     width: 350px;
+    min-height: 100vh;
   }
 }
 .sidebar-toggle {