fix sidemenu blink

sphinx_scylladb_theme/side-nav.html

@@ -2,7 +2,7 @@
     <button class="collapsible-button">
         <i class="icon-docs-menu-collapse"></i>
     </button>
-    <div class="side-nav-content" style="visibility: hidden;">
+    <div class="side-nav-content custom-scroll-bar">
         <div class="side-nav__title">
             <a href="{% if 'contents' in master_doc %}{{html_baseurl}}{% else %}{{ pathto(master_doc) }}{% endif %}">{{
                 project }}</a>

src/css/base/_reset.scss

@@ -2,7 +2,6 @@
 
 html {
   box-sizing: border-box;
-  scroll-padding-top: 100px;
 }
 
 body {
@@ -11,6 +10,9 @@ body {
   line-height: 1;
   background-color: var(--bg-color);
   color: var(--text-color);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
 *,

src/css/components/_content.scss

@@ -1,6 +1,7 @@
 .layout {
   display: flex;
   background-color: var(--bg-color);
+  flex-grow: 1;
 }
 
 .content {

src/css/components/_header.scss

@@ -13,7 +13,8 @@
   z-index: 99;
 
   @media screen and (min-width: $large) {
-    padding: $spacer-sm $spacer;
+    min-height: $header-height-large;
+    padding: $spacer-xs $spacer;
   }
 }
 

src/css/components/_secondary-side-nav.scss

@@ -2,7 +2,6 @@
 
 .secondary-side-nav {
   display: none;
-  height: 100%;
   line-height: 24px;
   padding: 20px;
   width: 100%;

src/css/components/_side-nav.scss

@@ -1,10 +1,15 @@
 @use "sass:map";
 @use "sass:math";
 
+.sidebar-left {
+  background: var(--navigation-bg);
+  display: flex;
+  flex-direction: column;
+}
+
 .side-nav {
   display: none;
   background: var(--navigation-bg);
-  height: 100vh;
   max-height: calc(100vh - #{$header-height});
   line-height: 24px;
   overflow-y: auto;
@@ -17,10 +22,13 @@
 
   @media screen and (min-width: $large) {
     position: sticky;
+    flex-grow: 1;
   }
 
   &__title {
     box-shadow: 0 0 $spacer-md 0 var(--brand-product);
+    position: sticky;
+    top: 0;
 
     a {
       background-color: var(--brand-product);
@@ -79,8 +87,8 @@
       }
 
       ul {
-        margin-left: $spacer-sm / 2;
-        padding-left: $spacer-sm / 2;
+        margin-left: math.div($spacer-sm, 2);
+        padding-left: math.div($spacer-sm, 2);
         border-left-color: var(--border-color);
       }
     }
@@ -254,12 +262,12 @@
   background-color: var(--card-bg);
   color: var(--text-color);
   border-radius: 50%;
-  bottom: 10px;
   display: none;
   font-size: 0px;
-  left: 300px;
+  bottom: $spacer-sm;
+  right: $spacer-sm;
   padding: 13.5px;
-  position: fixed;
+  position: absolute;
   cursor: pointer;
 
   i {
@@ -270,6 +278,7 @@
 
 .side-nav--collapsed .collapsible-button {
   left: -10px;
+  right: auto;
   border-radius: 0 30px 30px 0;
 
   i {
@@ -283,9 +292,9 @@
 
 @media screen and (min-width: $large) {
   .side-nav {
-    display: block;
+    display: flex;
+    flex-direction: column;
     background-color: var(--navigation-bg);
-    height: 100%;
     max-height: calc(100vh - #{$header-height-large});
     top: $header-height-large;
     left: initial;
@@ -317,12 +326,19 @@
 @media screen and (min-width: $xlarge) {
   .side-nav {
     width: $side-nav-width;
+
+    .side-nav-content {
+      height: 0;
+      flex-grow: 1;
+      overflow-y: auto;
+    }
 
     &--collapsed {
       background-color: transparent;
       padding-left: 0;
       padding-right: 0;
       width: $side-nav-width-collapsed;
+      overflow: visible;
 
       .side-nav-content {
         display: none;

src/js/collapse.js

@@ -12,22 +12,6 @@ export class CollapseHandler {
         };
     }
 
-    calculateCollapsibleNavigationButtonPosition() {
-        const collapsibleButton = $(".collapsible-button");
-        const footer = $(".footer");
-        const offset = 10;
-        const footerOffset = footer.offset();
-        const footerTop = footerOffset.top;
-        const footerBottom = footerTop + footer.outerHeight();
-        const screenBottom = $(window).scrollTop() + $(window).innerHeight();
-        const screenTop = $(window).scrollTop();
-        if (screenBottom > footerTop && screenTop < footerBottom) {
-            collapsibleButton.css("bottom", screenBottom - footerTop + offset);
-        } else {
-            collapsibleButton.css("bottom", offset);
-        }
-    }
-
     collapseNavigation() {
         new Foundation.Tooltip($(".collapsible-button"), {
             position: "top",
@@ -54,8 +38,7 @@ export class CollapseHandler {
             this.collapseNavigation();
         } else {
             this.expandNavigation();
-        }
-        this.calculateCollapsibleNavigationButtonPosition();
+        }        
     }
 
     onClickCollapsibleNavigationButton() {
@@ -66,19 +49,11 @@ export class CollapseHandler {
             } else {
                 this.collapseNavigation();
             }
-            this.calculateCollapsibleNavigationButtonPosition();
-        });
-    }
-
-    onScrollCollapsibleNavigation() {
-        $(window).scroll(() => {
-            this.calculateCollapsibleNavigationButtonPosition();
         });
     }
 
     init() {
         this.loadCollapsibleNavigation();
         this.onClickCollapsibleNavigationButton();
-        this.onScrollCollapsibleNavigation();
     }
 }

src/js/index.js

@@ -12,7 +12,7 @@ import { ImagesHandler } from "./images";
 import { LinksHandler } from "./links";
 import { PromoBannerHandler } from "./promo-banner";
 import { SecondarySidebarHandler } from "./secondary-sidebar";
-import { SidebarHandler } from "./sidebar";
+// import { SidebarHandler } from "./sidebar";
 import { TablesHandler } from "./tables";
 import {DarkTheme} from "./dark-theme";
 
@@ -25,6 +25,6 @@ $(document).ready(function () {
   new LinksHandler().init();
   new PromoBannerHandler().init();
   new CollapseHandler().init();
-  new SidebarHandler().init();
+  // new SidebarHandler().init();
   new SecondarySidebarHandler().init();
 });

src/js/sidebar.js

@@ -54,14 +54,14 @@ export class SidebarHandler {
   }
 
   init() {
-    this.initScrollEvent();
-    this.onLoadRestoreScrollPosition();
+    // this.initScrollEvent();
+    // this.onLoadRestoreScrollPosition();
 
-    const adjustForDesktopView = () => {
-      this.adjustSidebarHeightFooter();
-    };
+    // const adjustForDesktopView = () => {
+    //   this.adjustSidebarHeightFooter();
+    // };
 
-    $(window).scroll(adjustForDesktopView);
-    $(window).resize(adjustForDesktopView);
+    // $(window).scroll(adjustForDesktopView);
+    // $(window).resize(adjustForDesktopView);
   }
 }