fix: fix widths of content

Author: Luke Billington

assets/css/f5-hugo.css

@@ -1092,7 +1092,7 @@ main a:hover {
 
 .sidebar-toggle-collapsed #sidebar-content {
   transform: translate(-100%);
-  visibility: collapse;
+  display: none;
 }
 
 .sidebar-visible-collapsed {
@@ -1111,6 +1111,18 @@ main a:hover {
   max-width: 50px;
 }
 
+.content-no-toc {
+  max-width: 100%;
+}
+
+.content-has-toc {
+  max-width: 50%;
+}
+
+.sidebar-content-collapsed-width {
+  max-width: calc(100% - 50px) !important;
+}
+
 .nginx-toc {
   display: block;
   background: #f8f9f9;

assets/js/sidebar.js

@@ -6,6 +6,8 @@ function handleInitialCollapse() {
   if (collapsed === "true") {
     $("#sidebar-wrapper").addClass("sidebar-toggle-collapsed");
     $(".sidenav").addClass("sidebar-col-collapsed-width");
+    $(".content").addClass("sidebar-content-collapsed-width");
+    $(".nginx-docs-api-container").addClass("sidebar-content-collapsed-width");
   }
 }
 
@@ -17,10 +19,16 @@ function handleSetCollapse() {
   if (collapsed === "false") {
     $("#sidebar-wrapper").addClass("sidebar-toggle-collapsed");
     $(".sidenav").addClass("sidebar-col-collapsed-width");
+    $(".content").addClass("sidebar-content-collapsed-width");
+    $(".nginx-docs-api-container").addClass("sidebar-content-collapsed-width");
     localStorage.setItem(LOCAL_STORAGE_COLLAPSE_KEY, true);
   } else {
     $("#sidebar-wrapper").removeClass("sidebar-toggle-collapsed");
     $(".sidenav").delay(500).removeClass("sidebar-col-collapsed-width");
+    $(".content").removeClass("sidebar-content-collapsed-width");
+    $(".nginx-docs-api-container").removeClass(
+      "sidebar-content-collapsed-width"
+    );
     localStorage.setItem(LOCAL_STORAGE_COLLAPSE_KEY, false);
   }
 }

layouts/_default/docs.html

@@ -1,16 +1,17 @@
 {{ define "main" }}
-<div class="row flex-xl-nowrap">
-  <nav class="sidenav overflow-auto col-md-3 d-none d-xl-block d-print-none align-top">
+<div class="row" style="max-width: calc(100% + 30px) !important; flex-wrap: nowrap;">
+  <nav class="sidenav overflow-auto col-md-3 d-none d-xl-block d-print-none align-top" style="width: 25%;">
     {{ partial "sidebar.html" . }}
   </nav>
 
   {{if (.Params.catalog) }}
-  <main class="content col-xl-6 d-block align-top" role="main">
+  <main class="content content-has-toc" role="main">
   {{ else if and (gt .WordCount 200 ) (.Params.toc) }}
-  <main class="content col-xl-6 d-block align-top" role="main">
+  <main class="content col d-block align-top content-has-toc" role="main">
   {{ else }}
-  <main class="content col-xl-9 d-block align-top" role="main">
+  <main class="content col d-block align-top content-no-toc" role="main">
   {{ end }}
+
 
     <h1>{{ .Title }}</h1>
 
@@ -27,7 +28,7 @@ <h1>{{ .Title }}</h1>
   </main>
   {{ if and (gt .WordCount 200 ) (.Params.toc) }}
     {{ if (add  (len (findRE "<h3" .Content)) (len (findRE "<h2" .Content))) }}
-      <div class="col-md-3 d-none d-xl-block d-print-none nginx-toc align-top">
+      <div class="col-md-3 d-none d-xl-block d-print-none nginx-toc align-top" style="width: 25%;">
       {{ partial "toc.html" . }}
       </div>
     {{ end }}