Add shadow to version selector panel when left nav is scrolled (#6151)

* Add shadow to version selector panel when scrolling Signed-off-by: Fanit Kolchina <[email protected]> * Change shadow size Signed-off-by: Fanit Kolchina <[email protected]> --------- Signed-off-by: Fanit Kolchina <[email protected]> (cherry picked from commit e7fc108) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Jan 16, 2024 · 1e0645b · 1e0645b
1 parent b840799
commit 1e0645b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -57,7 +57,7 @@
         </a>
       </div>
       <nav role="navigation" aria-label="Main" id="site-nav" class="site-nav">        
-        <div class="version-wrapper">
+        <div class="version-wrapper" id="version-panel">
           {% if page.section == "opensearch" %}
             <a href="{{site.url}}{{site.baseurl}}/about/" class="site-category">{{ page.section-name }}</a>
           {% else %}

diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
@@ -78,6 +78,10 @@ nav#site-nav > .nav-list:nth-of-type(1) {
   margin-right: 0.5rem;
 }
 
+.nav-shadow {
+  box-shadow: 0 6px 4px -4px $grey-lt-300;
+}
+
 .main-content {
   ol {
     > li {

diff --git a/assets/js/listener.js b/assets/js/listener.js
@@ -4,7 +4,8 @@ const numCharsLabel = document.getElementById('num-chars');
 const sendButton = document.getElementById('send');
 const commentTextArea = document.getElementById('comment');
 const thankYouText = document.getElementById('thank-you');
-
+const nav = document.getElementById('site-nav');
+const versionPanel = document.getElementById('version-panel');
 document.addEventListener('DOMContentLoaded', updateTextArea);
 
 document.addEventListener('click', function(event) {
@@ -32,6 +33,14 @@ document.addEventListener('click', function(event) {
     }
 });
 
+nav.addEventListener('scroll',(e)=>{  
+    if(nav.scrollTop > 0){
+      versionPanel.classList.add("nav-shadow");
+    }else{
+      versionPanel.classList.remove("nav-shadow");
+    }
+  });
+
 commentTextArea.addEventListener('input', updateTextArea);
 
 function updateTextArea() {