Visibility of Navigation Elements on Page Load and Scroll (#1838)

assets/css/autocomplete.css

@@ -1,9 +1,8 @@
 .autocomplete {
   display: none;
-  height: 0;
-  margin-right: 32px;
-  overflow: visible;
-  position: relative;
+  position: absolute;
+  width: 84%;
+  top: 55px;
 }
 
 .autocomplete .triangle {
@@ -36,7 +35,7 @@
 .autocomplete-results .show {
   white-space: normal;
   overflow-x: hidden;
-  width: 62%;
+  width: 84%;
 }
 
 .autocomplete-results .bold {
@@ -135,18 +134,41 @@
 }
 
 @media (max-width: 480px) {
+
+  .autocomplete {
+    width: 90%;
+  }
+
   .autocomplete .triangle {
     left: 27%;
   }
 }
 
+@media (min-width: 481px) and (max-width: 767px) {
+
+  .autocomplete {
+    width: 95%;
+  }
+
+  .autocomplete .triangle {
+    left: 17%;
+  }
+}
+
 @media (max-width: 767px) {
+  .autocomplete {
+    top: 50px;
+    left: 0;
+    right: 0;
+    z-index: 200;
+  }
+
   .autocomplete .triangle {
     left: 17%;
   }
 }
 
-@media (max-width: 1024px) {
+@media (max-width: 1023px) {
   .autocomplete-results {
     gap: 0;
   }

assets/css/layout.css

@@ -35,13 +35,13 @@ body {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 4;
+  z-index: 100;
 }
 
 .sidebar-button {
   --sidebarButtonRightOpen: 4px;
   position: fixed;
-  z-index: 99;
+  z-index: 200;
   left: 0;
   transition: all var(--sidebarTransitionDuration) ease-in-out;
   will-change: transform;
@@ -53,7 +53,6 @@ body {
   left: var(--sidebarWidth);
   height: 100%;
   position: absolute;
-  z-index: 3;
 }
 
 .content-inner {
@@ -124,19 +123,22 @@ body.sidebar-closed .sidebar-button {
 }
 
 @media screen and (max-width: 768px) {
-  .content,
+    .content,
   body.sidebar-opening .content {
     left: 0;
     width: 100%;
   }
 
   .content-inner {
-    padding-top: 13px;
+    padding-top: 43px;
     padding-bottom: 26px;
     overflow-x: auto;
+
   }
 
   body.sidebar-closed .sidebar-button {
-    position: absolute;
+    position: fixed;
+    left: 0;
+    transition: top 0.9s;  
   }
-}
+}

assets/css/search-bar.css

@@ -1,3 +1,13 @@
+.background-layer {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 70px;
+  background-color: var(--background);
+}
+
 .top-search {
   margin-top: 10px;
 }
@@ -6,14 +16,15 @@
   display: flex;
   column-gap: 12px;
   align-items: center;
+  width: 100%;
 }
 
 .search-bar {
   border: 1px solid var(--searchBarBorder);
   border-radius: 8px;
   height: 48px;
   position: relative;
-  flex-grow: 1;
+  width: 100%;
 }
 
 .top-search .search-bar .search-input {
@@ -56,7 +67,7 @@
   position: absolute;
   top: 60%;
   transform: translateY(-60%);
-  z-index: 2;
+  z-index: 99;
 }
 
 .top-search .search-bar.selected .search-button,
@@ -80,7 +91,7 @@
   transform: scaleY(0);
   top: calc(50% - 11px);
   transition: 0.15s transform ease-out;
-  z-index: 2;
+  z-index: 99;
 }
 
 .top-search .search-bar .search-close-button:hover {
@@ -114,13 +125,30 @@
 
 @media (max-width: 480px) or ((min-width: 481px) and (max-width: 768px)) {
   .search-bar {
-    margin-left: 35px;
+    margin-left: 0px;
   }
 }
 
 @media (max-width: 768px) {
+  .background-layer {
+    display: block;
+    z-index: 10;
+    transition: top 0.3s;
+  }
+
   .top-search {
     margin-top: 0;
+    position: fixed;
+    top: 13px;
+    left: 56px;
+    right: 20px;
+    transition: top 0.3s;
+    z-index: 99;
+  }
+
+  .search-settings {
+    width: 100%;
+    box-sizing: border-box;
   }
 }
 

assets/js/search-bar.js

@@ -141,3 +141,29 @@ function hideAutocomplete () {
 function isMacOS () {
   return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)
 }
+
+let lastScrollTop = window.scrollY
+const topSearch = document.querySelector('.top-search')
+const sidebarMenu = document.getElementById('sidebar-menu')
+const backgroundLayer = document.querySelector('.background-layer')
+
+window.addEventListener('scroll', function () {
+  const currentScroll = window.scrollY
+
+  if (currentScroll > lastScrollTop) {
+    // Scrolling down
+    topSearch.style.top = '-50px'
+    backgroundLayer.style.top = '-70px'
+    // Only hide sidebarMenu if aria-expanded is not true
+    if (sidebarMenu.getAttribute('aria-expanded') !== 'true') {
+      sidebarMenu.style.display = 'none'
+    }
+  } else {
+    // Scrolling up
+    topSearch.style.top = '11px'
+    backgroundLayer.style.top = '0px'
+    sidebarMenu.style.display = 'block'
+  }
+
+  lastScrollTop = currentScroll <= 0 ? 0 : currentScroll
+}, false)

lib/ex_doc/formatter/html/templates/sidebar_template.eex

@@ -1,9 +1,11 @@
 <div class="main">
 
-<button class="sidebar-button sidebar-toggle" aria-label="toggle sidebar" aria-controls="sidebar">
+<button id="sidebar-menu" class="sidebar-button sidebar-toggle" aria-label="toggle sidebar" aria-controls="sidebar">
   <i class="ri-menu-line ri-lg" title="Collapse/expand sidebar"></i>
 </button>
 
+<div class="background-layer"></div>
+
 <nav id="sidebar" class="sidebar">
   <% url = config.homepage_url || "#{config.main}.html" %>
   <div class="sidebar-header">
@@ -82,11 +84,12 @@
               <i class="ri-close-line ri-lg" title="Cancel search"></i>
             </button>
           </form>
+          <div class="autocomplete">
+          </div>
           <button class="icon-settings display-settings">
             <i class="ri-settings-3-line"></i>
             <span class="sr-only">Settings</span>
           </button>
         </div>
-      </div>
-      <div class="autocomplete">
+
       </div>