Added state to each component

src/lib/layout/hexagons/TeamMemberHexagon.svelte

@@ -9,11 +9,44 @@
   export const orientation = 'horizontal';
   export let teamMember = data as TeamMember;
 
+  const openHexagonAnimation = (
+    target: HTMLElement,
+    container: HTMLElement,
+    fullOpacityContainers: NodeListOf<HTMLElement>,
+    variableOpacityContainer: HTMLElement
+  ) => {
+    container.style.top = '50%';
+    container.style.transform = 'translateY(-50%)';
+
+    fullOpacityContainers.forEach((i) => {
+      i.style.opacity = '100%';
+    });
+
+    variableOpacityContainer.style.opacity = '30%';
+
+    target.dataset.state = 'open';
+  };
+  const closeHexagonAnimation = (
+    target: HTMLElement,
+    container: HTMLElement,
+    fullOpacityContainers: NodeListOf<HTMLElement>,
+    variableOpacityContainer: HTMLElement
+  ) => {
+    container.style.top = '';
+    container.style.transform = '';
+
+    fullOpacityContainers.forEach((i) => {
+      i.style.opacity = '0%';
+    });
+
+    variableOpacityContainer.style.opacity = '0%';
+
+    target.dataset.state = 'closed';
+  };
+
   onMount(() => {
     const listTargets: NodeListOf<HTMLElement> | null = document.querySelectorAll('.target');
 
-    let clickToggle = 0;
-
     for (let target of listTargets) {
       const container: HTMLElement | null = target.querySelector('.container');
       const fullOpacityContainers: NodeListOf<HTMLElement> | null =
@@ -22,58 +55,41 @@
         target.querySelector('.variable-opacity');
 
       target.addEventListener('touchstart', () => {
-        if (!clickToggle) {
-          if (container) {
-            container.style.top = '50%';
-            container.style.transform = 'translateY(-50%)';
-          }
-
-          fullOpacityContainers.forEach((i) => {
-            i.style.opacity = '100%';
-          });
-
-          if (variableOpacityContainer) {
-            variableOpacityContainer.style.opacity = '30%';
+        if (container && fullOpacityContainers && variableOpacityContainer) {
+          if (target.dataset.state == 'closed') {
+            openHexagonAnimation(
+              target,
+              container,
+              fullOpacityContainers,
+              variableOpacityContainer
+            );
+          } else {
+            closeHexagonAnimation(
+              target,
+              container,
+              fullOpacityContainers,
+              variableOpacityContainer
+            );
           }
-
-          clickToggle++;
-        } else {
-          if (container) {
-            container.style.top = '';
-            container.style.transform = '';
-          }
-
-          fullOpacityContainers.forEach((i) => {
-            i.style.opacity = '0%';
-          });
-
-          if (variableOpacityContainer) {
-            variableOpacityContainer.style.opacity = '0%';
-          }
-
-          clickToggle = 0;
         }
       });
     }
   });
 </script>
 
 <Hexagon {orientation}>
-  <div class="target group relative" data-testid="hexagon">
+  <div class="target group relative" data-testid="hexagon" data-state="closed">
     <div
-      class="container
-       absolute top-full z-20 w-full -translate-y-16 px-4 pb-4 duration-500 group-hover:top-1/2 group-hover:-translate-y-1/2"
+      class="container        absolute top-full z-20 w-full -translate-y-16 px-4 pb-4 duration-500 group-hover:top-1/2 group-hover:-translate-y-1/2"
     >
       <p
         class="mx-auto text-center text-sm font-bold leading-tight text-gray-100 transition-all sm:text-sm md:text-sm lg:text-base xl:text-xl"
       >
-        {teamMember.name.split(' ')[0]}
-        <br />
+        {teamMember.name.split(' ')[0]} <br />
         {teamMember.name.split(' ')[1]}
       </p>
       <p
-        class="full-opacity mx-auto
-        text-center text-xs leading-tight text-gray-100 opacity-0 transition-all duration-500 ease-out group-hover:opacity-100 sm:text-xs md:text-sm lg:text-base xl:text-lg"
+        class="full-opacity mx-auto         text-center text-xs leading-tight text-gray-100 opacity-0 transition-all duration-500 ease-out group-hover:opacity-100 sm:text-xs md:text-sm lg:text-base xl:text-lg"
       >
         {teamMember.role}
       </p>
@@ -116,7 +132,6 @@
         {/if}
       </div>
     </div>
-
     <div
       class="variable-opacity absolute inset-0 z-10 bg-black text-lg opacity-0 transition-opacity duration-500 group-hover:opacity-30"
     />