Single navbar

assets/scss/common/_global.scss

@@ -130,6 +130,10 @@ body {
       z-index: 1000;
       height: calc(100vh - 4rem);
     }
+
+    .docs-sidebar-top {
+      top: 0;
+    }
   }
 }
 
@@ -173,6 +177,10 @@ body {
     height: calc(100vh - 4rem);
     overflow-y: auto;
   }
+
+  .docs-toc-top {
+    top: 0;
+  }
 }
 
 .docs-content {

assets/scss/components/_buttons.scss

@@ -4,9 +4,7 @@
 }
 
 #mode {
-  padding-right: 0.25rem;
-  padding-left: 0.25rem;
-  margin-right: -0.25rem;
+  padding: 0.5rem;
 }
 
 .btn-link:focus {
@@ -18,10 +16,10 @@
   margin-left: 1.25rem;
 }
 
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(lg) {
   #mode {
-    margin-left: 1.125rem;
-    margin-right: -0.375rem;
+    margin-left: 0.5rem;
+    margin-right: 0.25rem;
   }
 
   .navbar .btn-link {
@@ -187,6 +185,20 @@ pre {
   color: $link-color;
 }
 
+.dropdown-menu {
+  /*
+  width: 100%;
+  */
+
+  width: auto;
+}
+
+@include media-breakpoint-up(lg) {
+  .dropdown-menu {
+    width: auto;
+  }
+}
+
 .doks-navbar .dropdown-menu,
 .doks-subnavbar .dropdown-menu {
   font-size: 0.875rem;
@@ -219,16 +231,6 @@ pre {
   margin-right: -0.3125rem;
 }
 
-.dropdown-menu.dropdown-menu-main {
-  width: 100%;
-}
-
-@include media-breakpoint-up(md) {
-  .dropdown-menu.dropdown-menu-main {
-    width: auto;
-  }
-}
-
 .dropdown-menu-main .dropdown-item {
   color: inherit;
   font-size: $font-size-base;

assets/scss/components/_search.scss

@@ -4,10 +4,19 @@
 
 #suggestions {
   position: absolute;
-  left: 0;
+  right: 0;
   margin-top: 0.5rem;
   width: calc(100vw - 3rem);
+  max-width: calc(400px - 3rem);
   z-index: $zindex-dropdown;
+
+  @include media-breakpoint-up(md) {
+    right: -2rem;
+  }
+
+  @include media-breakpoint-up(lg) {
+    right: 0;
+  }
 }
 
 #suggestions a,
@@ -57,9 +66,10 @@
   color: $gray-700;
 }
 
-@include media-breakpoint-up(sm) {
+@include media-breakpoint-up(lg) {
   #suggestions {
     width: 31.125rem;
+    max-width: 31.125rem;
   }
 
   #suggestions a {

assets/scss/layouts/_header.scss

@@ -39,6 +39,8 @@
 @include media-breakpoint-up(lg) {
   .navbar {
     z-index: 1025;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
   }
 }
 
@@ -87,13 +89,19 @@
 }
 
 button#doks-languages {
-  margin-right: -0.5625rem;
-  margin-left: 0.75rem;
+  margin: 0.25rem 0 0;
+
+  @include media-breakpoint-up(lg) {
+    margin: 0.25rem 0.5rem 0 0.25rem;
+  }
 }
 
 button#doks-versions {
-  margin-right: -0.5625rem;
-  margin-left: 0;
+  margin: 0.25rem 0 0;
+
+  @include media-breakpoint-up(lg) {
+    margin: 0.25rem 0.5rem 0 0.25rem;
+  }
 }
 
 .offcanvas .nav-link {
@@ -185,6 +193,14 @@ button#doks-versions {
   padding-right: 4rem;
   border: 1px solid transparent;
   background: $gray-100;
+
+  @include media-breakpoint-up(md) {
+    width: calc(100% + 2rem);
+  }
+
+  @include media-breakpoint-up(lg) {
+    width: 100%;
+  }
 }
 
 .form-control.is-search:focus {
@@ -206,6 +222,14 @@ button#doks-versions {
   content: "Ctrl + /";
   border: 1px solid $gray-300;
   border-radius: 0.25rem;
+
+  @include media-breakpoint-up(md) {
+    right: -1.4625rem;
+  }
+
+  @include media-breakpoint-up(lg) {
+    right: 0.3125rem;
+  }
 }
 
 /*
@@ -410,15 +434,18 @@ button#doks-versions {
   outline: 0;
 }
 
-.doks-sidebar-toggle .doks-collapse {
+.doks-sidebar-toggle .doks-collapse,
+.doks-toc-toggle .doks-collapse {
   display: none;
 }
 
-.doks-sidebar-toggle:not(.collapsed) .doks-expand {
+.doks-sidebar-toggle:not(.collapsed) .doks-expand,
+.doks-toc-toggle:not(.collapsed) .doks-expand {
   display: none;
 }
 
-.doks-sidebar-toggle:not(.collapsed) .doks-collapse {
+.doks-sidebar-toggle:not(.collapsed) .doks-collapse,
+.doks-toc-toggle:not(.collapsed) .doks-collapse {
   display: inline-block;
 }
 
@@ -443,3 +470,16 @@ button#doks-versions {
 .dropdown-item:active {
   color: inherit;
 }
+
+.social-link {
+  padding-left: 0.5rem;
+
+  @include media-breakpoint-up(md) {
+    padding-left: 0;
+  }
+
+  @include media-breakpoint-up(lg) {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+}

config/_default/params.toml

@@ -75,6 +75,9 @@ docsRepoSubPath = ""
 editPage = false
 lastMod = false
 
+[sections]
+  sectionNav = ["docs", "guides"]
+
 [options]
   lazySizes = true
   clipBoard = true
@@ -88,6 +91,7 @@ lastMod = false
   multilingualMode = false
   docsVersioning = false
   fullWidth = false
+  navbarSticky = true
 
 [menu]
   [menu.section]

config/postcss.config.js

@@ -22,6 +22,7 @@ module.exports = {
         'alert-link',
         'container-xxl',
         'container-fluid',
+        'offcanvas-backdrop',
         ...whitelister([
           './assets/scss/components/_alerts.scss',
           './assets/scss/components/_buttons.scss',

layouts/docs/single.html

@@ -1,12 +1,12 @@
 {{ define "main" }}
 	<div class="row flex-xl-nowrap">
-		<div class="col-lg-5 col-xl-4 docs-sidebar d-none d-lg-block">
+		<div class="col-lg-5 col-xl-4 docs-sidebar{{ if ne .Site.Params.options.navbarSticky true }} docs-sidebar-top{{ end }} d-none d-lg-block">
 			<nav {{ if eq .Site.Params.menu.section.collapsibleSidebar false }}id="sidebar-default" {{ end }}class="docs-links" aria-label="Main navigation">
 				{{ partial "sidebar/docs-menu.html" . }}
 			</nav>
 		</div>
 		{{ if ne .Params.toc false -}}
-		<nav class="docs-toc d-none d-xl-block col-xl-3" aria-label="Secondary navigation">
+		<nav class="docs-toc{{ if ne .Site.Params.options.navbarSticky true }} docs-toc-top{{ end }} d-none d-xl-block col-xl-3" aria-label="Secondary navigation">
 			{{ partial "sidebar/docs-toc.html" . }}
 		</nav>
 		{{ end -}}

layouts/partials/footer/script-footer.html

@@ -77,7 +77,7 @@
   {{ with .Params.mermaid -}}
     <script src="{{ $mermaid.RelPermalink }}" defer></script>
   {{ end -}}
-  {{ if and (.Site.Params.options.flexSearch) (eq .Section "docs") -}}
+  {{ if .Site.Params.options.flexSearch -}}
     <script src="{{ $index.RelPermalink }}" defer></script>
   {{ end -}}
 {{ else -}}
@@ -102,7 +102,7 @@
   {{ with .Params.mermaid -}}
     <script src="{{ $mermaid.RelPermalink }}" integrity="{{ $mermaid.Data.Integrity }}" crossorigin="anonymous" defer></script>
   {{ end -}}
-  {{ if and (.Site.Params.options.flexSearch) (eq .Section "docs") -}}
+  {{ if .Site.Params.options.flexSearch -}}
     <script src="{{ $index.Permalink }}" integrity="{{ $index.Data.Integrity }}" crossorigin="anonymous" defer></script>
   {{ end -}}
 {{ end -}}