feat [front]: extract social buttons

front/components/layout/NavBar.vue

@@ -34,21 +34,9 @@
             </div>
           </div>
           <div class="networks">
-            <a
-              class="navbar-item"
-              href="https://www.facebook.com/cineclub.ensulm"
-            >
-              <v-icon scale="1.8" name="ri-facebook-box-fill" /> Facebook
-            </a>
-            <a
-              class="navbar-item"
-              href="https://www.instagram.com/cineclubens/"
-            >
-              <v-icon scale="1.8" name="ri-instagram-fill" /> Instagram
-            </a>
-            <div class="navbar-item">
-              <v-icon scale="1.8" name="ri-mail-fill" /> Newsletter
-            </div>
+            <SocialsFacebook />
+            <SocialsInstagram />
+            <SocialsNewsletter />
           </div>
         </div>
         <div class="navbar-start">
@@ -164,7 +152,3 @@ $navbar-item-img-max-height: 105px
     justify-content: space-between
     flex-direction: column
 </style>
-<style lang="sass">
-.navbar .networks .navbar-item .ov-icon
-  margin-right: 0.5rem
-</style>

front/components/socials/facebook.vue

@@ -0,0 +1,9 @@
+<template>
+  <a
+    class="navbar-item network-item"
+    href="https://www.facebook.com/cineclub.ensulm"
+  >
+    <v-icon scale="1.8" name="ri-facebook-box-fill" />
+    Facebook
+  </a>
+</template>

front/components/socials/instagram.vue

@@ -0,0 +1,9 @@
+<template>
+  <a
+    class="navbar-item network-item"
+    href="https://www.instagram.com/cineclubens/"
+  >
+    <v-icon scale="1.8" name="ri-instagram-fill" />
+    Instagram
+  </a>
+</template>

front/components/socials/newsletter.vue

@@ -0,0 +1,73 @@
+<template>
+  <a class="navbar-item network-item" :href="mailToLink" @click="waitForBlur">
+    <v-icon scale="1.8" name="ri-mail-fill" />
+    Newsletter
+  </a>
+  <div class="modal" :class="{ 'is-active': showModal }">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+      <div class="modal-card-body content">
+        <p>
+          Si aucun mail ne s'est ouvert, alors désolée, il faudra faire
+          l'inscription manuellement. Une solution plus pratique est en cours de
+          développement.
+        </p>
+        <p>
+          Il vous faut envoyer à l'adresse
+          <span
+            class="copyable-text"
+            @click="copyClipboard(mailDestination, 'L\'adresse email')"
+          >
+            {{ mailDestination }}
+          </span>
+          un mail dont l'objet soit
+          <span
+            class="copyable-text"
+            @click="copyClipboard(mailSubject, 'L\'objet du mail')"
+          >
+            {{ mailSubject }}
+          </span>
+        </p>
+        <div v-if="copiedItemFr" class="notification is-primary is-light">
+          {{ copiedItemFr }} a été copié dans votre presse-papier
+        </div>
+      </div>
+    </div>
+    <button
+      class="modal-close is-large"
+      aria-label="close"
+      @click="showModal = false"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+const mailToLink =
+  "mailto:sympa@lists.ens.psl.eu?subject=SUBSCRIBE%20cineclub-informations&body=Envoyez%20ce%20mail%20pour%20terminer%20de%20vous%20inscrire"
+const mailDestination = "sympa@lists.ens.psl.eu"
+const mailSubject = "SUBSCRIBE cineclub-informations"
+const showModal = ref<boolean>(false)
+const copiedItemFr = ref<string>("")
+
+function waitForBlur() {
+  if (process.server) return
+  let t
+  window.addEventListener("blur", () => clearTimeout(t), { once: true })
+  t = setTimeout(() => (showModal.value = true), 500)
+}
+
+function copyClipboard(itemToCopy, itemName) {
+  if (process.server) return
+  navigator.clipboard.writeText(itemToCopy)
+  copiedItemFr.value = itemName
+}
+</script>
+
+<style lang="sass">
+.copyable-text
+  font-family: monospace
+  cursor: pointer
+
+  &:hover
+    color: $primary
+</style>

front/css/app.sass

@@ -13,6 +13,7 @@
 @import "bulma/sass/elements/container"
 @import "bulma/sass/elements/content"
 @import "bulma/sass/elements/image"
+@import "bulma/sass/elements/notification"
 @import "bulma/sass/elements/other"
 @import "bulma/sass/elements/tag"
 @import "bulma/sass/elements/title"
@@ -33,3 +34,7 @@
   font-family: "Carter One", serif
   font-size: 7em
   color: #90001C
+
+
+.network-item .ov-icon
+  margin-right: 0.5rem