fix: Redid logic for hiding when clicking outside + clean up

Author: lamATnginx

assets/css/v2/style.css

@@ -486,7 +486,7 @@ atomic-search-layout atomic-layout-section[section="search"] {
   border: none;
   font-size: 1.25rem;
   width: 100%;
-  padding: 0.5rem;
+  padding: 0.5rem 0.5rem 0.5rem 1rem; /* 1rem to vertically align with searchbar text */
   cursor: pointer;
 }
 

assets/js/product-selector.js

@@ -3,6 +3,12 @@ document.addEventListener('DOMContentLoaded', () => {
   const productSelectorButton = document.getElementById(
     'product-selector-button'
   );
+  const productSelectorOpenIcon = document.getElementById(
+    'product-selector-button-open-icon'
+  );
+  const productSelectorCloseIcon = document.getElementById(
+    'product-selector-button-close-icon'
+  );
 
   if (productSelectorButton === null || productSelectorContent == null) {
     return;
@@ -13,20 +19,31 @@ document.addEventListener('DOMContentLoaded', () => {
     if (productSelectorContent.style.display === 'block') {
       productSelectorContent.style.display = 'none';
       productSelectorButton.classList.remove('remove-bottom-radius');
+
+      productSelectorOpenIcon.style.display = 'block';
+      productSelectorCloseIcon.style.display = 'none';
     } else {
       productSelectorContent.style.display = 'block';
       productSelectorButton.classList.add('remove-bottom-radius');
+
+      productSelectorOpenIcon.style.display = 'none';
+      productSelectorCloseIcon.style.display = 'block';
     }
   });
 
   window.addEventListener('click', (event) => {
-    /* Greedy Logic to hide the product selector when something other than the button is clicked. Assumes everything has a classname containing "product-selector" */
+    /* Logic for hiding the product selector when something other than the button or content is clicked. */
     if (
-      event.target.classList.length === 0 ||
-      !event.target.classList[0].includes('product-selector')
+      $(productSelectorContent).has(event.target).length === 0 &&
+      $(productSelectorButton).has(event.target).length === 0 &&
+      productSelectorButton.id !== event.target.id &&
+      productSelectorContent.id !== event.target.id
     ) {
       productSelectorContent.style.display = 'none';
       productSelectorButton.classList.remove('remove-bottom-radius');
+
+      productSelectorOpenIcon.style.display = 'block';
+      productSelectorCloseIcon.style.display = 'none';
     }
   });
 });

layouts/partials/sidebar-v2.html

@@ -22,11 +22,21 @@
 
 <button class="product-selector-button" id="product-selector-button">
     {{/* product name and selector */}}
-    <div class="product-selector-name">{{ $productName }}</div>
+    <div class="product-name">{{ $productName }}</div>
     <div class="product-selector-button-icon">
-        <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="product-selector-expand-icon">
-            <path d="M1 13L7 7L0.999999 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="product-selector-expand-icon"/>
-        </svg>     
+        <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg" id="product-selector-button-open-icon">
+            <path d="M1 13L7 7L0.999999 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg> 
+        <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg" id="product-selector-button-close-icon" style="display: none;">
+            <g clip-path="url(#clip0_16_31)">
+                <path d="M7 1L0.999999 7L7 13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </g>
+            <defs>
+                <clipPath id="clip0_16_31">
+                    <rect width="8" height="14" fill="white" transform="matrix(-1 0 0 -1 8 14)"/>
+                </clipPath>
+            </defs>
+        </svg>        
     </div>
 </button>
 <div class="product-selector" id="product-selector">
@@ -41,11 +51,11 @@
     {{ $type := . }}
     {{ $products := index $groupedProducts $type }}
         <div class="product-selector-content" id="product-selector-content">
-            <p class="product-selector-content-product-group-name">{{ $type | humanize | title | upper }}</p>
-            <ul class="product-selector-content-product-container">
+            <p>{{ $type | humanize | title | upper }}</p>
+            <ul>
             {{ range $products }}
-                <li class="product-selector-content-product-name">
-                    <a class="product-selector-content-product-link" href="{{ .url }}">{{ .title }}</a>
+                <li>
+                    <a href="{{ .url }}">{{ .title }}</a>
                 </li>
             {{ end }}
             </ul>