Store for join popup state, added to header and other components

components/Header.vue

@@ -11,7 +11,7 @@
       <NuxtLink to="/articles">Articles</NuxtLink>
       <NuxtLink to="/contact">Contact</NuxtLink>
     </nav> -->
-    <a href="#join" class="button clear">
+    <a href="#join" class="button clear" @click="toggleJoin()">
       <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
         <circle cx="7" cy="7" r="7" fill="#8D00FB"/>
         <path d="M3 7H11" stroke="white"/>
@@ -25,6 +25,13 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue';
 
+import { useJoinStore } from '~/stores/useJoin';
+const joinStore = useJoinStore();
+
+const toggleJoin = () => {
+  joinStore.toggleJoin();
+};
+
 const isScrolled = ref(false);
 
 const handleScroll = () => {

components/JoinPopup.vue

@@ -0,0 +1,26 @@
+<template>
+  <section id="JoinPopup" :class="{ joining: joinStore.joining }">
+    <div class="blur" @click="joinStore.toggleJoin"></div>
+    <div class="container">
+      <div class="row">
+        <div class="col full">
+          <div class="popup">
+            <h2>Join our journey</h2>
+            <p>We are looking to work with experienced technical writing teams and freelance writers who are interested in improving their workflows and making more money along the way.</p>
+            <Join id="hero-join" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+
+import { useJoinStore } from '~/stores/useJoin';
+import { storeToRefs } from 'pinia';
+
+const joinStore = useJoinStore();
+const { joining } = storeToRefs(joinStore);
+
+</script>

nuxt.config.ts

@@ -27,11 +27,7 @@ export default defineNuxtConfig({
     }
   },
 
-  modules: [
-    '@nuxtjs/google-fonts',
-    '@nuxt/content',
-    'nuxt-module-hotjar'
-  ],
+  modules: ['@nuxtjs/google-fonts', '@nuxt/content', 'nuxt-module-hotjar', '@pinia/nuxt'],
 
   hotjar: {
     hotjarId: 5129596,

package.json

@@ -13,10 +13,15 @@
     "@nuxt/content": "^2.13.2",
     "@nuxtjs/google-fonts": "^3.2.0",
     "@nuxtjs/supabase": "^1.4.0",
+    "@pinia/nuxt": "^0.5.4",
     "@vueuse/core": "^11.0.3",
     "nuxt": "^3.13.0",
     "nuxt-module-hotjar": "^1.3.2",
+    "pinia": "^2.2.2",
     "sass": "^1.77.8",
     "vue": "latest"
+  },
+  "overrides": {
+    "vue": "latest"
   }
 }

pages/index.vue

@@ -1,18 +1,6 @@
 <template>
-  <section id="JoinPopup" :class="isJoining">
-    <div class="blur" @click="toggleJoin()"></div>
-    <div class="container">
-      <div class="row">
-        <div class="col full">
-          <div class="popup">
-            <h2>Join our journey</h2>
-            <p>We are looking to work with experienced technical writing teams and freelance writers who are interested in improving their workflows and making more money along the way.</p>
-            <Join id="hero-join" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
+
+  <JoinPopup />
 
   <main id="Hero" :class="{'scrolled': isScrolled}">
     <div class="container">
@@ -28,7 +16,7 @@
             </p>
             <section class="hero-buttons">
               <nuxt-link to="/articles/introducing-vewrite" class="button primary large">Learn more about Vewrite</nuxt-link>
-              <a href="#join" class="button clear" @click="toggleJoin()">
+              <a href="#join" class="button clear" @click="joinStore.toggleJoin">
                 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <circle cx="7" cy="7" r="7" fill="#8D00FB"/>
                   <path d="M3 7H11" stroke="white"/>
@@ -212,7 +200,6 @@
 import { ref, onMounted, onUnmounted } from 'vue';
 
 const isScrolled = ref(false);
-const isJoining = ref('');
 const isInView = ref(false);
 
 const handleScroll = () => {
@@ -228,14 +215,6 @@ const handleScroll = () => {
   }
 };
 
-const toggleJoin = () => {
-  if (isJoining.value === '') {
-    isJoining.value = 'joining';
-  } else {
-    isJoining.value = '';
-  }
-};
-
 onMounted(() => {
   window.addEventListener('scroll', handleScroll);
   handleScroll(); // Initial check
@@ -249,6 +228,12 @@ definePageMeta({
   layout: 'home'
 });
 
+import { useJoinStore } from '~/stores/useJoin';
+import { storeToRefs } from 'pinia';
+
+const joinStore = useJoinStore();
+const { joining } = storeToRefs(joinStore);
+
 </script>
 
 <style lang="scss">

stores/useJoin.js

@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia'
+
+export const useJoinStore = defineStore({
+  id: 'join',
+  state: () => ({
+    joining: false,
+  }),
+  actions: {
+    toggleJoin() {
+      this.joining = !this.joining
+      console.log('Joining:', this.joining)
+    }
+  },
+})