Merge pull request #4242 from thiha-min-thant/navbar-sidebar-issues

📖 Resolve navigation bar CSS issue and sidebar toggle functionality.

Author: k8s-ci-robot

docs/book/install-and-build.sh

@@ -63,9 +63,9 @@ esac
 
 # grab mdbook
 # we hardcode linux/amd64 since rust uses a different naming scheme and it's a pain to tran
-echo "downloading mdBook-v0.4.34-${arch}-${target}.${ext}"
+echo "downloading mdBook-v0.4.40-${arch}-${target}.${ext}"
 set -x
-curl -sL -o /tmp/mdbook.${ext} https://github.com/rust-lang/mdBook/releases/download/v0.4.34/mdBook-v0.4.34-${arch}-${target}.${ext}
+curl -sL -o /tmp/mdbook.${ext} https://github.com/rust-lang/mdBook/releases/download/v0.4.40/mdBook-v0.4.40-${arch}-${target}.${ext}
 ${cmd} /tmp/mdbook.${ext}
 chmod +x /tmp/mdbook
 

docs/book/theme/css/custom.css

@@ -1,3 +1,7 @@
 .menu-title img {
     vertical-align: bottom;
 }
+
+#sidebar-toggle-anchor:checked .page-wrapper {
+    margin-inline-start: calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width));
+}

docs/book/theme/index.hbs

@@ -83,14 +83,17 @@
             html.classList.add('js');
         </script>
 
+        <input type="checkbox" id="sidebar-toggle-anchor" class="hidden">
         <!-- Hide / unhide sidebar before it is displayed -->
         <script type="text/javascript">
             var html = document.querySelector('html');
             var sidebar = 'hidden';
+            var sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
             if (document.body.clientWidth >= 1080) {
                 try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
                 sidebar = sidebar || 'visible';
             }
+            sidebar_toggle.checked = sidebar === 'visible';
             html.classList.remove('sidebar-visible');
             html.classList.add("sidebar-" + sidebar);
         </script>
@@ -108,9 +111,9 @@
                 <div id="menu-bar-hover-placeholder"></div>
                 <div id="menu-bar" class="menu-bar sticky bordered">
                     <div class="left-buttons">
-                        <button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
+                        <label id="sidebar-toggle" class="icon-button" for="sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
                             <i class="fa fa-bars"></i>
-                        </button>
+                        </label>
                         <button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
                             <i class="fa fa-paint-brush"></i>
                         </button>