Sidebar: Make mobile sidebar full length

Author: nginx-jack

assets/css/v2/style.css

@@ -441,6 +441,7 @@ ol li:last-child {
     }
 
     .header__search {
+      display: block;
       width: 14rem;
       /* This is a horrible hack to stop coveo overflowing 3500px for no reason. :sad */
       transform: translateY(0);
@@ -635,16 +636,20 @@ ol li:last-child {
       display: block;
       transform: translateX(0);
       border-bottom: 1px solid oklch(var(--color-divider));
-      height: fit-content;
+
       position: fixed;
       top: 0;
       left: 0;
 
-      .sidebar__search {
+      .sidebar__content__wrapper {
         display: flex;
+        flex-direction: column;
+      }
+
+      .sidebar__search {
+        display: unset;
         width: calc(var(--sidebar-width) - 4rem);
-        justify-self: anchor-center;
-        margin-left: -1rem;
+        margin-left: 1rem;
       }
     }
   }

assets/js/site-dropdown.js

@@ -1,12 +1,17 @@
 document.addEventListener('DOMContentLoaded', () => {
   const dropdownContent = document.getElementById('dropdown-content');
   const navbarButton = document.getElementById('navbar-sites-button');
+  const chevronIcon = document.getElementById('navbar-sites-button-icon');
 
   navbarButton.addEventListener('click', () => {
+    chevronIcon.classList.toggle('rotate-chevron');
+
     if (dropdownContent.style.display === 'block') {
       dropdownContent.style.display = 'none';
+      navbarButton.classList.remove('remove-bottom-radius');
     } else {
       dropdownContent.style.display = 'block';
+      navbarButton.classList.add('remove-bottom-radius');
     }
   });
 
@@ -15,7 +20,14 @@ document.addEventListener('DOMContentLoaded', () => {
       !event.target.matches('#navbar-sites-button') &&
       !event.target.matches('#navbar-sites-button-icon')
     ) {
+      if (
+        dropdownContent.style.display !== 'none' &&
+        dropdownContent.style.display !== ''
+      ) {
+        chevronIcon.classList.toggle('rotate-chevron');
+      }
       dropdownContent.style.display = 'none';
+      navbarButton.classList.remove('remove-bottom-radius');
     }
   });
 });

layouts/partials/coveo-atomic-search.html

@@ -3,4 +3,4 @@
 <atomic-search-interface id={{ $id }}>
     <atomic-search-box redirection-url={{ $redirectionUrl }} class="header-search-box">
     </atomic-search-box>
-</atomic-search-interface>
+</atomic-search-interface>

layouts/partials/coveo-legacy-search.html

@@ -12,17 +12,20 @@
             </label>
         </div>
     </div>
-    <div class="sidebar__search">
-      <!-- Standalone search box. -->
-      {{ partial "coveo-atomic-search.html" (dict "id" "search-standalone-sidebar") }}
-    </div>
-    <div class="sidebar__content">
-        <a class="skip-link" href="#maincontent">Skip Navigation</a>
-        {{ partial "sidebar-list.html" (dict
-        "firstSection" .FirstSection
-        "currentUrl" .Permalink
-        "currentPage" .
-        "idPrefix" ""
-      ) }}
+    <div class="sidebar__content__wrapper">
+        <div class="sidebar__search">
+          <!-- Standalone search box. -->
+          {{ partial "coveo-atomic-search.html" (dict "id" "search-standalone-sidebar") }}
+        </div>
+        <div class="sidebar__content">
+            <a class="skip-link" href="#maincontent">Skip Navigation</a>
+            {{ partial "sidebar-list.html" (dict
+            "firstSection" .FirstSection
+            "currentUrl" .Permalink
+            "currentPage" .
+            "idPrefix" ""
+          ) }}
+        </div>
     </div>
+
 </div>