@trimble-oss/modus-docs-hugo-theme 1.0.0-alpha11 → 1.0.0-alpha13

package/assets/css/_article.scss

@@ -60,6 +60,10 @@ article h3:target::before {
   visibility: hidden;
 }
 
+#main {
+  max-width: 1090px;
+}
+
 #main::before {
   content: " ";
   display: block;
@@ -81,10 +85,6 @@ a.header-link::after {
   min-width: 20px;
 }
 
-#main {
-  max-width: 1090px;
-}
-
 .docs-callout {
   border-left-width: 0.25rem !important;
   border-radius: 0.25rem;
@@ -121,3 +121,9 @@ article .nav-tabs .nav-link::after {
 article table {
   width: 100%;
 }
+
+#sidebar.show + div {
+  max-width: calc(100vw - 321px - var(--scrollbar-width)) !important;
+  min-width: calc(100vw - 330px);
+  width: calc(100vw - 314px - var(--scrollbar-width));
+}

package/assets/css/_col-sidebar.scss

@@ -1,3 +1,27 @@
 .col-sidebar {
   width: 64px !important;
 }
+
+.col-sidebar .list-group {
+  height: calc(100dvh - 66px);
+}
+
+[data-bs-theme="light"] {
+  .col-sidebar a.btn:hover,
+  .col-sidebar button:hover {
+    background-color: #e0e1e9 !important;
+  }
+}
+
+[data-bs-theme="dark"] {
+  .col-sidebar a.btn:hover,
+  .col-sidebar button:hover {
+    background-color: #424649 !important;
+  }
+}
+
+.col-sidebar button.list-group-item {
+  height: 48px;
+  margin-left: 6px;
+  width: 48px;
+}

package/assets/css/_navbar.scss

@@ -1,5 +1,5 @@
 html[data-bs-theme="dark"] {
-  .dropdown-menu img {
+  nav.navbar-blue .dropdown-menu img {
     filter: invert(1);
   }
 }
@@ -7,3 +7,21 @@ html[data-bs-theme="dark"] {
 .navbar-site-title {
   margin-top: 12px;
 }
+
+nav.navbar-blue {
+  label.btn,
+  button.btn {
+    border-color: transparent !important;
+
+    &:hover {
+      background-color: #217cbb !important;
+      border: 1px solid #019aeb !important;
+      border-color: #019aeb;
+    }
+  }
+}
+
+nav.navbar-blue .dropdown-menu {
+  min-width: 250px;
+  z-index: 1030;
+}

package/assets/css/modus-docs.scss

@@ -40,7 +40,7 @@ h6 {
 }
 
 // underline links
-main a {
+main a:not([class], li.breadcrumb-item a) {
   text-decoration: underline;
 }
 
@@ -62,5 +62,5 @@ code {
 }
 
 main {
-  min-height: calc(100vh - 418px);
+  min-height: calc(100vh - 340px);
 }

package/layouts/partials/col-sidebar-menu.html

@@ -11,9 +11,22 @@
     div.classList.add('show');
   }
 </script>
+{{ if site.Params.expandAllAccordions }}
+<style>
+  .accordion-button {
+    pointer-events: none !important;
+  }
+  .accordion-button::after {
+    opacity: 0;
+  }
+  .accordion-button:hover {
+    background-color: transparent !important;
+  }
+</style>
+{{ end }}
 
 <!-- https://github.com/twbs/bootstrap/blob/v5.3.2/site/layouts/partials/docs-sidebar.html -->
-<div class="">
+<div>
   {{- $url := split .Permalink "/" -}}
   {{- $page_slug := index $url (sub (len $url) 2) -}}
 
@@ -33,9 +46,12 @@
     {{- if $group.pages }}
     <div class="accordion-item">
       <h6 class="accordion-header">
-        <button class="accordion-button collapsed fs-5 ps-3 py-1 opacity-75" type="button" data-bs-toggle="collapse"
-          data-bs-target="#flush-collapse-{{- $group.title | urlize -}}" aria-expanded="false"
-          aria-controls="flush-collapse-{{- $group.title | urlize -}}">
+        <button class="accordion-button {{ if $is_active_group }}{{ else }}collapsed{{ end }} fs-5 ps-3 py-1 opacity-75" type="button"
+        {{ if not site.Params.expandAllAccordions }}
+        data-bs-toggle="collapse"
+          data-bs-target="#flush-collapse-{{- $group.title | urlize -}}"
+                    aria-expanded="{{- if $is_active_group -}}true{{- else -}}false{{- end -}}"
+          aria-controls="flush-collapse-{{- $group.title | urlize -}}"{{end }}>
           {{- if $group.icon }}
           {{- end }}
           {{ $group.title }}
@@ -43,7 +59,7 @@
       </h6>
 
       <div id="flush-collapse-{{- $group.title | urlize -}}"
-        class="accordion-collapse collapse {{ if $is_active_group }} show{{ end }} {{ if site.Params.expandAllAccordions }}show{{- end -}}">
+        class="accordion-collapse collapse {{ if $is_active_group }}show{{ end }} {{ if site.Params.expandAllAccordions }}show{{- end -}}">
         <div class="accordion-body py-1 bg-secondary bg-opacity-10">
           <ul class="list-unstyled">
             {{- range $doc := $group.pages -}}

package/layouts/partials/col-sidebar.html

@@ -1,22 +1,21 @@
 <div
-  class="list-group d-block border-0 text-center sticky-top sticky-offset d-flex flex-column align-items-start justify-content-between"
-  style="height: calc(100dvh - 66px)">
+  class="list-group d-block border-0 text-center sticky-top sticky-offset d-flex flex-column align-items-start justify-content-between">
 
-  <div class="text-center mx-auto w-100">
-    <button class="btn btn-lg btn-outline-secondary bg-transparent list-group-item border-0 mt-1" type="button"
-      data-bs-target="#sidebar" data-bs-toggle="collapse" aria-label="Expand Menu"
-      style="width:48px; margin-left: 6px;">
+  <div class="mx-auto w-100">
+    <!--<button class="btn btn-lg btn-outline-secondary bg-transparent list-group-item border-0 mt-1 p-1 pt-0" type="button"
+      data-bs-target="#sidebar" data-bs-toggle="collapse" aria-label="Expand Menu">
       <div class="text-body text-center">
         {{ partial "icons/modus-solid/user-guide.svg" (dict "class" "" "width" "24" "height" "24") }}
       </div>
-    </button>
+    </button>-->
   </div>
 
   <div>
     {{- with .Site.Params.GitHubRepo -}}
-    <a href="{{- . -}}" class="btn btn-lg btn-outline-secondary text-body bg-transparent btn-icon-only border-0 mx-1"
-      target="_blank" rel="noopener" data-bs-toggle="tooltip" title="GitHub">
-      {{ partial "icons/brands/github.svg" (dict "class" "mt-2" "width" "22" "height" "22") }}
+    <a href="{{- . -}}"
+      class="btn btn-lg btn-outline-secondary text-body bg-transparent btn-icon-only border-0 mx-1 p-1" target="_blank"
+      rel="noopener" data-bs-toggle="tooltip" title="GitHub">
+      {{ partial "icons/brands/github.svg" (dict "class" "mt-2" "width" "24" "height" "24") }}
     </a>
     {{ end }}
 

package/layouts/partials/header.html

@@ -1,3 +1,14 @@
+<script>
+  function _calculateScrollbarWidth() {
+    document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");
+  }
+  // recalculate on resize
+  window.addEventListener('resize', _calculateScrollbarWidth, false);
+  // recalculate on dom load
+  document.addEventListener('DOMContentLoaded', _calculateScrollbarWidth, false);
+  // recalculate on load (assets loaded as well)
+  window.addEventListener('load', _calculateScrollbarWidth);
+</script>
 <header class="pt-5 bg-secondary-subtle bg-opacity-10 border-bottom" {{- if (or (.Params.blog) (.Params.image)) -}}
   style="background-image: url({{- .Params.Image | relURL -}});{{- with .Params.headerBgColor -}}background-color:{{- . -}} !important;{{- end -}};"
   {{ end }}>

package/layouts/partials/navbar-dropdown.html

@@ -1,4 +1,4 @@
-<ul class="dropdown-menu dropdown-menu-end mt-2 pb-0" style="min-width:250px;z-index: 1030;">
+<ul class="dropdown-menu dropdown-menu-end mt-2 pb-0">
   {{ with .Site.Data.navbar_apps }}
   {{ range . }}
   <li class="border-bottom">
@@ -20,4 +20,4 @@
   </li>
   {{ end }}
   {{ end }}
-</ul>
+</ul>

package/layouts/partials/navbar-search.html

@@ -1,7 +1,7 @@
 <search class="search-container d-inline-block position-relative" role="search">
   <input class="form-control form-control-search position-absolute" aria-label="Search" id="search-by" type="search"
     name="q" placeholder="Search..." autocomplete="off" title="" required>
-  <label class="btn btn-lg btn-icon-only border-0 btn-search position-absolute px-1" for="search-by">
+  <label class="btn btn-lg btn-icon-only border-transparent btn-search position-absolute px-1" for="search-by">
     <i class="modus-icons notranslate text-white" aria-hidden="true">search</i>
   </label>
 </search>

package/layouts/partials/navbar.html

@@ -1,7 +1,7 @@
 <nav class="navbar shadow-sm navbar-blue sticky-top" aria-label="Main Navigation">
   <div class="container-fluid">
     <div>
-      <button class="btn btn-lg btn-primary btn-icon-only bg-transparent d-inline-block border-0" type="button"
+      <button class="btn btn-lg btn-primary btn-icon-only bg-transparent d-inline-block" type="button"
         aria-label="Menu" data-bs-target="#sidebar" data-bs-toggle="collapse">
         {{ partial "icons/modus-solid/menu.svg" (dict "class" "menu-btn text-white" "width" "24" "height" "24") }}
       </button>
@@ -22,7 +22,7 @@
       {{ partial "navbar-search" . }}
 
       <div class="dropdown">
-        <button type="button" class="btn btn-lg btn-primary bg-transparent btn-icon-only border-0"
+        <button type="button" class="btn btn-lg btn-primary bg-transparent btn-icon-only"
           data-bs-toggle="dropdown" aria-expanded="false" aria-label="Menu">
           <i class="modus-icons notranslate mt-2 text-white" aria-hidden="true">apps</i>
         </button>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trimble-oss/modus-docs-hugo-theme",
-  "version": "1.0.0-alpha11",
+  "version": "1.0.0-alpha13",
   "description": "A Documentation theme for Hugo built by Trimble",
   "homepage": "https://github.com/trimble-oss/modus-docs-hugo-theme",
   "bugs": {
@@ -26,20 +26,20 @@
     "test": "npm run lint-css && npm run lint-html && npm run lint-js"
   },
   "dependencies": {
-    "@trimble-oss/modus-bootstrap": "2.0.0-alpha9",
+    "@trimble-oss/modus-bootstrap": "2.0.0-alpha12",
     "@trimble-oss/modus-icons": "1.7.0"
   },
   "devDependencies": {
     "autoprefixer": "10.4.16",
-    "eslint": "8.52.0",
+    "eslint": "8.53.0",
     "eslint-config-prettier": "9.0.0",
     "htmlhint": "1.1.4",
-    "hugo-bin": "0.115.0",
+    "hugo-bin": "0.116.4",
     "postcss": "8.4.31",
     "postcss-cli": "10.1.0",
     "prettier": "3.0.3",
     "stylelint": "15.11.0",
-    "stylelint-config-standard-scss": "11.0.0",
+    "stylelint-config-standard-scss": "11.1.0",
     "stylelint-order": "6.0.3"
   },
   "hugo-bin": {