feat: Support on mobile fully + handle all bugs

Author: lamATnginx

assets/css/v2/style.css

@@ -98,9 +98,34 @@ header {
   .header-container {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
     width: 100%;
+
+    > ul {
+      padding: 0;
+    }
+
+    @media (max-width: 700px) {
+      a,
+      ul {
+        width: 50%;
+      }
+
+      li {
+        float: right;
+      }
+
+      div {
+        order: 3;
+        width: 100%;
+
+        #search-standalone-header {
+          margin-top: 1rem;
+        }
+      }
+    }
   }
 
   ul {
@@ -213,6 +238,7 @@ nav {
   grid-template-columns: var(--text-content-width-iphone-13) 1fr;
   grid-template-rows: var(--breadcrumb-max-height) 1fr;
   z-index: 1;
+  margin-top: 2rem;
 }
 
 .docs-container {
@@ -320,7 +346,6 @@ nav {
         --side-gutter-width
       );
     column-gap: var(--component-gap);
-    margin-top: 2rem;
   }
 
   .content-layout .side-gutter {
@@ -402,6 +427,9 @@ atomic-search-interface {
   height: fit-content;
   margin-bottom: 2rem;
   margin-top: 2rem;
+}
+
+#search-standalone-sidebar {
   min-height: 54px;
   max-height: 54px;
 }

assets/js/coveo.js

@@ -38,7 +38,6 @@ async function atomicCoveo() {
   const searchBarHeader = document.querySelector('#search-standalone-header');
   const searchBarSidebar = document.querySelector('#search-standalone-sidebar');
   const sidebar = document.querySelector('#sidebar-layout');
-  let searchbar;
 
   if (searchPageInterface) {
     await searchPageInterface.initialize({
@@ -53,29 +52,42 @@ async function atomicCoveo() {
         return request;
       },
     });
-    searchPageInterface.executeFirstSearch();
+    await searchPageInterface.executeFirstSearch();
   } else {
-    // If there is a searchbar, only initialize the searchbar for the sidebar.
     if (sidebar) {
-      searchbar = searchBarSidebar;
-    } else {
-      searchbar = searchBarHeader;
+      await searchBarSidebar.initialize({
+        accessToken: token,
+        organizationId: org_id,
+        analytics: { analyticsMode: 'legacy' },
+        preprocessRequest: (request, clientOrigin, metadata) => {
+          const body = JSON.parse(request.body);
+          body.q = `<@- ${body.q} -@>`;
+          request.body = JSON.stringify(body);
+
+          return request;
+        },
+      });
+      await searchBarSidebar.executeFirstSearch();
     }
+  }
 
-    await searchbar.initialize({
-      accessToken: token,
-      organizationId: org_id,
-      analytics: { analyticsMode: 'legacy' },
-      preprocessRequest: (request, clientOrigin, metadata) => {
-        const body = JSON.parse(request.body);
-        body.q = `<@- ${body.q} -@>`;
-        request.body = JSON.stringify(body);
+  /* Initialize the header searchbar*/
+  await searchBarHeader.initialize({
+    accessToken: token,
+    organizationId: org_id,
+    analytics: { analyticsMode: 'legacy' },
+    preprocessRequest: (request, clientOrigin, metadata) => {
+      const body = JSON.parse(request.body);
+      body.q = `<@- ${body.q} -@>`;
+      request.body = JSON.stringify(body);
 
-        return request;
-      },
-    });
-    searchbar.executeFirstSearch();
-  }
+      return request;
+    },
+  });
+
+  searchBarHeader.style.display =
+    sidebar || searchPageInterface ? 'none' : 'block';
+  await searchBarHeader.executeFirstSearch();
 }
 
 async function legacyCoveo() {
@@ -146,3 +158,26 @@ document.addEventListener('DOMContentLoaded', async () => {
     legacyCoveo();
   }
 });
+
+window.addEventListener('resize', (event) => {
+  const searchBarHeader = document.querySelector('#search-standalone-header');
+  const searchPageInterface = document.querySelector('#search-v2');
+  const searchPageSearchbar = document.querySelector(
+    '#search-standalone-searchpage'
+  );
+  const sidebar = document.querySelector('#sidebar-layout');
+
+  if (!sidebar && !searchPageInterface) {
+    // Show when there is no sidebar or on the search page
+    searchBarHeader.style.display = 'block';
+  } else if (sidebar && sidebar.offsetWidth === 0) {
+    // Show when there is a sidebar but is hidden due to resizing
+    searchBarHeader.style.display = 'block';
+  } else if (searchPageInterface && searchPageSearchbar.offsetWidth === 0) {
+    // Show when on the search page but is "sidebar" searchbar is hidden
+    searchBarHeader.style.display = 'block';
+  } else {
+    // Go back to default state
+    searchBarHeader.style.display = 'none';
+  }
+});

layouts/_default/baseof.html

@@ -61,7 +61,6 @@
 
       v1ElementIds.forEach((elementId) => {
         const element = document.getElementById(elementId);
-        console.log(element)
         if (element !== null) {
           element.style.display = isNewTheme ? "none" : "";
         }

layouts/search/single.html

@@ -121,7 +121,7 @@
 
       <!-- Facet Section -->
       <atomic-layout-section section="facets">
-        <atomic-search-box></atomic-search-box>
+        <atomic-search-box id="search-standalone-searchpage"></atomic-search-box>
         <atomic-facet field="f5_product" label="Show by product"></atomic-facet>
         <atomic-refine-toggle></atomic-refine-toggle>
       </atomic-layout-section>