Fix to adjust the breakpoint for left nav (#13735)

* fix left nav below 1280 * commit assets --------- Co-authored-by: Sean Holung <[email protected]>
pulumi · Jan 2, 2025 · bbca44c · bbca44c
1 parent 5e4a2e4
commit bbca44c
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 18 deletions.
diff --git a/assets/css/bundle.css b/assets/css/bundle.css
@@ -3922,7 +3922,7 @@ div.highlight .copy-button{
   border-radius:6px
 }
 
-@media(min-width: 1280px){
+@media(min-width: 1024px){
   .docs-list-main .docs-main-nav-toggle-wrapper .docs-main-nav{
     width:240px;
     flex-basis:240px;
@@ -4065,7 +4065,7 @@ div.highlight .copy-button{
   }
 }
 
-@media(min-width: 1280px){
+@media(min-width: 1024px){
   .docs-list-main .docs-main-content-wrapper .docs-main-content{
     margin-left:24px;
     max-width:700px;
@@ -4136,7 +4136,7 @@ div.highlight .copy-button{
   }
 }
 
-@media(min-width: 1280px){
+@media(min-width: 1024px){
   .docs-list-main .docs-main-content-wrapper .docs-table-of-contents{
     min-width:340px
   }

diff --git a/assets/js/bundle.js b/assets/js/bundle.js
diff --git a/theme/src/scss/docs/_docs-main.scss b/theme/src/scss/docs/_docs-main.scss
@@ -216,7 +216,7 @@ body.section-registry {
                 }
             }
 
-            @media (min-width: 1280px) {
+            @media (min-width: 1024px) {
                 width: 240px;
                 flex-basis: 240px;
                 box-shadow: none;
@@ -354,7 +354,7 @@ body.section-registry {
                 flex-direction: column;
             }
 
-            @media (min-width: 1280px) {
+            @media (min-width: 1024px) {
                 margin-left: 24px;
                 max-width: 700px;
                 min-width: 0;
@@ -422,7 +422,7 @@ body.section-registry {
                 width: 240px;
             }
 
-            @media (min-width: 1280px) {
+            @media (min-width: 1024px) {
                 min-width: 340px;
             }
         }

diff --git a/theme/src/ts/docs-main.ts b/theme/src/ts/docs-main.ts
@@ -76,7 +76,7 @@ $(window).on("load", function() {
 })(document, jQuery);
 
 function setDocsMainNavPosition() {
-    if ($(this).width() <= 1280) {
+    if ($(this).width() <= 1024) {
         if (docsMainNavToggleWrapper.hasClass("docs-nav-show")) {
             docsNavToggleIcon.removeClass("open-docs-main-nav")
             docsNavToggleIcon.addClass("close-docs-main-nav");
@@ -100,7 +100,7 @@ function setDocsMainNavPosition() {
         }
     }
 
-    if ($(this).width() > 1280) {
+    if ($(this).width() > 1024) {
         docsMainNavToggleWrapper.removeClass("docs-nav-show");
         docsMainNavToggleWrapper.removeClass("docs-nav-hide");
     } else if (!docsMainNavToggleWrapper.hasClass("docs-nav-hide") && !docsMainNavToggleWrapper.hasClass("docs-nav-show")) {
@@ -111,16 +111,10 @@ function setDocsMainNavPosition() {
 function setTableOfContentsVisibility() {
     let docsTableOfContents = $(".docs-toc-desktop");
 
-    if (window.innerWidth > 1024 && window.innerWidth <= 1280) {
-        if (docsMainNavToggleWrapper.hasClass("docs-nav-show")) {
-            docsTableOfContents.hide();
-        } else {
-            docsTableOfContents.show();
-        }
-    } else if (window.innerWidth > 1280) {
-        docsTableOfContents.show();
-    } else {
+    if (window.innerWidth < 1280) {
         docsTableOfContents.hide();
+    } else {
+        docsTableOfContents.show();
     }
 }