From 088624470bd4eb1bea873ead03eef4f116dc4d75 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Tue, 16 Jan 2024 13:15:33 -0500
Subject: [PATCH] Add shadow to version selector panel when left nav is
 scrolled (#6151) (#6171)

* Add shadow to version selector panel when scrolling



* Change shadow size



---------


(cherry picked from commit e7fc10885c3678be189abad8aa00860304d3abfd)

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 _layouts/default.html    |  2 +-
 _sass/custom/custom.scss |  4 ++++
 assets/js/listener.js    | 11 ++++++++++-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/_layouts/default.html b/_layouts/default.html
index 574f0e3954..8ba6bd4703 100755
--- 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
index 1b4181edd1..b458b0d62b 100755
--- 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
index 62d0afe2e8..2d7221c73d 100644
--- 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() {