Merge pull request #1498 from scylladb/docs-fix-mobile-announcement-bar

Author: dgarcia360

sphinx_scylladb_theme/promo-banner.html

@@ -1,13 +1,15 @@
 <section class="promo-banner {{'promo-banner--hide' if not theme_hide_banner}} {{'promo-banner--hide' if theme_hide_banner|lower == 'true'}}" style="display: none;">
     <div class="promo-banner-wrapper">
-        {% if theme_banner_icon_path %}
-            <div class="promo-banner__icon">
-                <img src="{{ pathto(theme_banner_icon_path, 1) }}" />
-            </div>
-        {% endif %}
-        <div class="promo-banner__title">{{theme_banner_title_text}}</div>
-        <a class="promo-banner__button button button--reverse" href="{{theme_banner_button_url}}"
-           target="_blank" rel="noopener noreferrer">{{theme_banner_button_text}}</a>
+        <div class="promo-banner__content">
+            {% if theme_banner_icon_path %}
+                <div class="promo-banner__icon">
+                    <img src="{{ pathto(theme_banner_icon_path, 1) }}" />
+                </div>
+            {% endif %}
+            <div class="promo-banner__title">{{theme_banner_title_text}}</div>
+            <a class="promo-banner__button button button--reverse" href="{{theme_banner_button_url}}"
+               target="_blank" rel="noopener noreferrer">{{theme_banner_button_text}}</a>
+        </div>
         <button class="promo-banner__close">
             <i class="icon-cancel"></i>
         </button>

sphinx_scylladb_theme/static/css/main.css

@@ -225,6 +225,7 @@ $product-title-height: $spacer-md;
     --biel-primary-color: #{$primary};
     --biel-button-dark-bg-color: #{$primary};
     --biel-input-button-bg-color: #{$primary};
+    --biel-bot-content-z-index: 900;
   }
 
   @each $key, $styles in $brand-colors {

sphinx_scylladb_theme/static/js/main.bundle.js

@@ -16,7 +16,7 @@
         padding-left: $spacer;
         padding-right: $spacer;
       }
-      
+
       @media screen and (min-width: $xlarge) {
         padding-left: $spacer-md;
         padding-right: $spacer-md;
@@ -31,7 +31,7 @@
         padding-top: $spacer;
         padding-bottom: $spacer;
       }
-      
+
       @media screen and (min-width: $xlarge) {
         padding-top: $spacer-md;
         padding-bottom: $spacer-md;
@@ -57,7 +57,6 @@
     }
   }
 
-  
 
   .post-content {
     padding-bottom: $spacer-md;

src/css/base/_variables.scss

@@ -2,17 +2,18 @@
   align-items: center;
   background-color: var(--card-bg);
   box-shadow: 0 2px 22px rgba(0,0,0, 0.1);
-  display: flex;  
+  display: flex;
   flex-wrap: wrap;
   gap: $spacer-xs 0;
   justify-content: space-between;
-  position: sticky;
+  position: fixed;
   top: 0;
   padding: $spacer-xs $spacer-sm;
   width: 100%;
   z-index: 99;
 
   @media screen and (min-width: $large) {
+    position: sticky;
     min-height: $header-height-large;
     padding: $spacer-xs $spacer;
   }
@@ -164,7 +165,7 @@
     width: auto;
     min-width: 300px;
     gap: 20px;
-    
+
     .header-ask-ai {
       display: block;
     }

src/css/components/_content.scss

@@ -35,15 +35,15 @@
   }
 
   &__close {
-    display: none;
-    position: absolute;
-    right: 16px;
-    top: 16px;
+    background: none;
+    border: none;
+    padding: 0;
+    margin-left: 16px;
 
     i {
-      height: 34px;
-      width: 34px;
-      font-size: 34px;
+      height: 20px;
+      width: 20px;
+      font-size: 20px;
       color: var(--white);
     }
 
@@ -57,10 +57,17 @@
 .promo-banner-wrapper {
   align-items: center;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   padding: 5.85px 20px;
 }
 
+.promo-banner__content {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  flex: 1;
+}
+
 @media (min-width: $large) {
   .promo-banner {
     &__title {
@@ -72,8 +79,15 @@
       font-size: $font-sm;
       padding: 8.5px;
     }
+
     &__close {
-      display: block;
+      margin: 0;
+
+      i {
+        height: 34px;
+        width: 34px;
+        font-size: 34px;
+      }
     }
   }
   .promo-banner-wrapper {

src/css/components/_header.scss

@@ -4,7 +4,7 @@
   gap: 10px;
   font-size: 22px;
   position: relative;
-  z-index: 300;
+  z-index: 1000;
 }
 
 @media screen and (min-width: $large) {

src/css/components/_promo-banner.scss

@@ -18,9 +18,16 @@
   top: $header-height;
   left: 0;
   width: 100%;
-  z-index: 100;
+  z-index: 950;
+
+  &.show {
+    display: flex;
+    flex-direction: column;
+  }
 
   @media screen and (min-width: $large) {
+    display: flex;
+    flex-direction: column;
     position: sticky;
     flex-grow: 1;
   }
@@ -43,7 +50,7 @@
 
       &:hover {
         filter: brightness(105%);
-        
+
       }
     }
   }
@@ -60,10 +67,10 @@
     }
 
     .toctree-l1 {
- 
+
         &:not(.has-children) {
           display: flex;
-          
+
           &::before {
             content: '•';
             width: $spacer;
@@ -72,8 +79,8 @@
             opacity: .4;
           }
         }
-        
-      a { 
+
+      a {
         font-size: 16px;
         font-weight: 500;
       }
@@ -89,7 +96,7 @@
         width: $spacer-sm;
         height: $spacer-sm;
         font-size: 14px;
-        
+
       }
 
       ul {
@@ -128,7 +135,7 @@
         order: 3;
       }
 
-     
+
     }
 
     /* Override icons extension */
@@ -214,7 +221,7 @@
     li {
       list-style: none;
       padding: 0;
-      
+
 
       &.has-children {
         display: flex;
@@ -349,7 +356,7 @@
 @media screen and (min-width: $xlarge) {
   .side-nav {
     width: $side-nav-width;
-    
+
     .side-nav-content {
       height: 0;
       flex-grow: 1;

src/css/components/_side-nav-toggle.scss

@@ -3,13 +3,12 @@ export class SidebarHandler {
   constructor() {
     this.localStorageKey = "scylladb-docs-sidebar-scroll-position";
   }
-  
+
   initScrollEvent() {
     const sideNavContent = $('#side-nav .side-nav-content');
     sideNavContent.on('scroll', () => {
       const scrollPosition = sideNavContent.scrollTop();
       localStorage.setItem(this.localStorageKey, scrollPosition);
-      console.log('scrollPosition', scrollPosition);
     });
   }
 
@@ -19,12 +18,41 @@ export class SidebarHandler {
     if (savedPosition) {
       sideNavContent.scrollTop(savedPosition);
     }
-    // $('.side-nav-content').css('visibility', 'visible');
   }
 
-    
+  initHamburgerToggle() {
+    const hamburger = $('.side-nav-toggle__button');
+    const sideNav = $('#side-nav');
+
+    hamburger.on('click', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      sideNav.toggleClass('show');
+    });
+  }
+
+  handleResize() {
+    const sideNav = $('#side-nav');
+    const mediaQuery = window.matchMedia('(min-width: 1024px)');
+
+    const checkResize = (e) => {
+      if (e.matches) {
+        // Desktop view - remove the show class
+        sideNav.removeClass('show');
+      }
+    };
+
+    // Check on load
+    checkResize(mediaQuery);
+
+    // Listen for changes
+    mediaQuery.addListener(checkResize);
+  }
+
   init() {
     this.initScrollEvent();
     this.onLoadRestoreScrollPosition();
+    this.initHamburgerToggle();
+    this.handleResize();
   }
 }