Merge branch 'main' into feat/tabs

Author: lamATnginx

assets/css/v2/style.css

@@ -220,7 +220,7 @@ nav {
   z-index: 9999;
 }
 
-@media (max-width: 1512px) {
+@media (max-width: 1528px) {
   .sidebar-layout {
     display: none;
   }
@@ -278,6 +278,7 @@ nav {
     display: grid;
     grid-template-rows: repeat(2, auto);
     column-gap: var(--component-gap);
+    max-width: 100%;
   }
 
   .breadcrumb-layout {
@@ -349,6 +350,23 @@ nav {
   }
 }
 
+.api {
+  margin: 2rem 0 2rem 2rem;
+  width: 100%;
+  .row {
+    display: grid !important;
+  }
+
+  .nginx-docs-api-container {
+    grid-column: 1 / -1 !important;
+    max-width: 100% !important;
+  }
+
+  .content-layout {
+    grid-template-columns: 1fr var(--side-gutter-width);
+  }
+}
+
 .main {
   display: flex;
 }
@@ -360,6 +378,8 @@ nav {
   position: sticky;
   top: 0;
   height: 100vh;
+  margin-top: -1rem;
+  padding-top: 1rem;
 }
 
 .sidebar .product-selector-button {
@@ -385,7 +405,8 @@ nav {
   position: absolute;
   top: 0;
   min-width: 80%;
-  margin-left: 46rem;
+  margin-top: 1rem;
+  margin-left: 44rem;
   padding: 1rem 1.5rem;
   background-color: white;
   border: black 1px solid;

layouts/_default/baseof.html

@@ -57,7 +57,7 @@
       });
 
       // swap out v1 and v2 elements
-      const v1ElementIds = ["sidebar", "footer", "toc"];
+      const v1ElementIds = ["sidebar", "footer", "toc", "api"]
 
       v1ElementIds.forEach((elementId) => {
         const element = document.getElementById(elementId);