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 <kolchfa@amazon.com>

* Change shadow size

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

---------

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

_layouts/default.html

@@ -57,7 +57,7 @@ layout: table_wrappers
         </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 %}

_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 {

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() {