Documentation: swith container's width

Created by: WinterSilence

Add switch(checkbox) to sub-navbar to toggle container-xxl/container-fluid classes of top containers.

site/assets/js/application.js

@@ -15,6 +15,24 @@
 (function () {
   'use strict'
 
+  // Switch container's width
+  var switchMainContainer = document.getElementById('switch-main-container')
+  if (switchMainContainer) {
+    switchMainContainer.addEventListener('change', function () {
+      var containers = document.querySelectorAll('body > .bd-subnavbar > div, body > .navbar > nav, body > .bd-layout')
+      containers.forEach(function (container) {
+        container.classList.toggle('container-fluid')
+        container.classList.toggle('container-xxl')
+      })
+      localStorage.setItem('bd-switch-main-container', switchMainContainer.checked ? 'true' : 'false')
+    })
+
+    if (localStorage.getItem('bd-switch-main-container') === 'true') {
+      switchMainContainer.checked = true
+      switchMainContainer.dispatchEvent(new Event('change'))
+    }
+  }
+
   // Tooltip and popover demos
   document.querySelectorAll('.tooltip-demo')
     .forEach(function (tooltip) {

site/layouts/partials/docs-subnav.html

@@ -4,6 +4,11 @@
       <input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="{{ .Site.Params.docs_version }}">
     </form>
 
+    <div class="form-check form-switch d-none d-lg-block ms-3">
+      <input class="form-check-input" type="checkbox" role="switch" id="switch-main-container">
+      <label class="form-check-label text-muted" for="switch-main-container">Full width</label>
+    </div>
+
     {{ partial "docs-versions" . }}
 
     <button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">