fix: Added animation to chevron + alignment fixed

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;
 }
 
@@ -508,6 +508,33 @@ atomic-search-layout atomic-layout-section[section="search"] {
   box-shadow: 3px 3px 0px var(--color-shadow);
 }
 
+@keyframes rotateAnimationToCloseIcon {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(180deg);
+  }
+}
+
+@keyframes rotateAnimationToOpenIcon {
+  0% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+button:has(~ .product-selector[style*="block"])
+  > .product-selector-button-icon {
+  animation: rotateAnimationToCloseIcon 0.25s ease-in-out forwards;
+}
+
+button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
+  animation: rotateAnimationToOpenIcon 0.25s ease-in-out forwards;
+}
+
 .product-selector p {
   font-size: 0.75rem;
   color: var(--color-product-title);

layouts/partials/sidebar-v2.html

@@ -22,10 +22,10 @@
 
 <button class="product-selector-button" id="product-selector-button">
     {{/* product name and selector */}}
-    <div class="product-selector-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"/>
+    <div class="product-selector-name" id="product-selector-name">{{ $productName }}</div>
+    <div class="product-selector-button-icon" id="product-selector-button-icon">
+        <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg" id="product-selector-chevron-icon">
+            <path d="M1 13L7 7L0.999999 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="product-selector-chevron-icon"/>
         </svg>     
     </div>
 </button>