refactoring du sticky menu (cas standard)

.env.docker

@@ -5,5 +5,3 @@ DEBUG=1
 
 NUXT_API_BASE_URL=https://local.maestro.opentalent.fr
 NUXT_PUBLIC_API_BASE_URL=https://local.maestro.opentalent.fr
-
-

.gitignore

@@ -7,5 +7,4 @@
 .env
 dist
 .DS_Store
-
 .idea/

components/Common/Banner/Banner.vue

@@ -11,10 +11,10 @@
           <div class="black-square" :style="{ backgroundColor: squareColor }">
             <v-row>
               <div class="content-row">
-                <img 
-                  src="/images/logiciels/icons/la-musique.svg" 
+                <img
+                  src="/images/logiciels/icons/la-musique.svg"
                   alt="icon instrument de musique"
-                  class="custom-icon" 
+                  class="custom-icon"
                 />
                 <p class="description-square" :style="{ color: textColor }">
                   {{ squareText }}
@@ -37,7 +37,6 @@
 </template>
 
 <script setup>
-import { defineProps } from 'vue';
 
 const props = defineProps({
   imageSrc: {
@@ -50,11 +49,11 @@ const props = defineProps({
   },
   squareColor: {
     type: String,
-    default: "#9edbdd" 
+    default: "#9edbdd"
   },
   textColor: {
     type: String,
-    default: "#091d20" 
+    default: "#091d20"
   },
   squareText: {
     type: String,
@@ -146,7 +145,7 @@ const props = defineProps({
   min-height: 400px;
   max-height: 400px;
   object-fit: cover;
-  object-position: center 20%; 
+  object-position: center 20%;
   transition: transform 0.2s;
   margin: 0 auto;
   transform: scaleX(-1);

components/Common/Banner/BannerTitle.vue

@@ -16,7 +16,6 @@
 </template>
 
 <script setup>
-import { defineProps } from 'vue';
 
 const props = defineProps({
   leftText: String,

components/Common/Card/AvantageCard.vue

@@ -23,7 +23,6 @@
 </template>
 
 <script setup>
-import { defineProps } from "vue";
 
 const props = defineProps({
   title: String,

components/Common/Card/Stat.vue

@@ -8,7 +8,6 @@
 </template>
 
 <script setup>
-import { defineProps } from 'vue'
 
 const props = defineProps({
   chiffre: {
@@ -21,7 +20,7 @@ const props = defineProps({
   },
   backgroundColor: {
     type: String,
-    default: '#fac20a', 
+    default: '#fac20a',
   },
 });
 </script>

components/Common/StickyMenu.vue

@@ -1,61 +1,87 @@
 <template>
-  <div :class="stickyClass" v-if="!mdAndDown">
-    <v-row class="outil-row">
-      <v-col cols="12">
-        <div class="container-square">
-          <v-row
-            v-for="square in squares"
-            :key="square.id"
-            :class="['square', square.bgColor]"
-            @click="() => handleSquareClick(square)"
-          >
-            <NuxtLink :to="square.url" class="link">
-              <div>
-                <v-icon :class="square.iconClass" />
-                <p class="text-square mt-2">{{ square.text }}</p>
-              </div>
-            </NuxtLink>
-          </v-row>
-        </div>
-      </v-col>
-    </v-row>
-  </div>
+  <div class="sticky-menu">
+    <div class="container-square" v-if="lgAndUp">
+      <v-row
+        v-for="(action, index) in actionsOrDefault"
+        :key="index"
+        :class="['square', action.bgColor]"
+        @click="() => onActionClick(action)"
+      >
+        <NuxtLink :to="action.url" class="link">
+          <div>
+            <v-icon :class="action.iconClass" />
+            <p class="text-square mt-2">{{ action.text }}</p>
+          </div>
+        </NuxtLink>
+      </v-row>
+    </div>
 
-  <div v-if="mdAndDown">
-    <div class="sticky-menu">
-      <v-btn color="primary">Bouton 1</v-btn>
-      <v-btn color="secondary">Bouton 2</v-btn>
+    <div class="band" v-else-if="!layoutStore.isFooterVisible">
+      <v-btn color="#9edbdd">
+        Nous contacter
+      </v-btn>
+      <v-btn color="#0e2d32" style="color: white;">
+        Nous appeler
+      </v-btn>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps } from "vue";
+import { defineProps, ComputedRef } from "vue";
 import { useRouter } from "vue-router";
 import { useDisplay } from "vuetify";
+import { useLayoutStore } from "~/stores/layoutStore";
+import { StickyMenuActionType } from "~/types/enum/layout";
+import { StickyMenuAction } from "~/types/interface";
 
-const { mdAndDown } = useDisplay();
+const { mdAndDown, lgAndUp } = useDisplay();
 const router = useRouter();
+const layoutStore = useLayoutStore()
+
+const telephoneNumber = "09 72 12 60 17";
+
+const defaultActions: Array<StickyMenuAction> = [
+  {
+    type: StickyMenuActionType.FOLLOW_LINK,
+    bgColor: "green-square",
+    iconClass: "fa-regular fa-comments icon",
+    text: "Nous contacter",
+    url: "/nous-contacter",
+  },
+  {
+    type: StickyMenuActionType.CALL_US,
+    bgColor: "darkblue-square",
+    iconClass: "fa-solid fa-phone icon",
+    text: "Nous Appeler",
+  },
+];
+
 const props = defineProps({
-  shouldShowStickyMenu: Boolean,
-  squaresData: Array,
-});
+  actions: {
+    type: Array<StickyMenuAction>,
+    required: false,
+    default: []
+  }
+})
 
-const stickyClass = ref("sticky-scroll");
+const actionsOrDefault: ComputedRef<Array<StickyMenuAction>> = computed(() => {
+  return props.actions.length > 0 ? props.actions : defaultActions
+})
 
-const squares = ref(props.squaresData);
-const telephoneNumber = "09 72 12 60 17";
-const handleSquareClick = (square) => {
-  if (square.id === 2) {
-    router.push({ path: square.url, query: { request: "demo" } });
-  } else if (square.id === 4) {
+const onActionClick = (action: StickyMenuAction) => {
+  if (action.type === StickyMenuActionType.ASK_FOR_A_DEMO) {
+    router.push({ path: action.url, query: { request: "demo" } });
+  } else if (action.type === StickyMenuActionType.CALL_US) {
     if (isMobileDevice()) {
       window.location.href = `tel:${telephoneNumber}`;
     } else {
       alert(`Notre numéro de téléphone : ${telephoneNumber}`);
     }
+  } else if (action.url) {
+    router.push({ path: action.url });
   } else {
-    router.push({ path: square.url });
+    throw Error('Unrecognized action')
   }
 };
 
@@ -66,18 +92,7 @@ const isMobileDevice = () => {
 };
 </script>
 
-<style scoped>
-
-
-.sticky-menu {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  background-color: white;
-  z-index: 100;
-}
+<style scoped lang="scss">
 .square {
   transition: transform 0.3s ease-in-out;
 }
@@ -139,4 +154,31 @@ const isMobileDevice = () => {
 
 .text-square {
 }
+
+@media (min-width: 1280px) {
+  .sticky-menu {
+    position: sticky;
+    //right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+    float: right;
+  }
+}
+
+// Menu format ruban (pour affichage petits écrans)
+.sticky-menu .band {
+  position: fixed;
+  height: 46px;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  background-color: white;
+  z-index: 100;
+
+  .v-btn {
+    margin: 4px 6px;
+  }
+}
 </style>

components/Home/Caroussel.vue

@@ -163,7 +163,7 @@ const carouselItems = ref([
   height: 2.5rem;
   margin-top: 1rem;
 }
-::v-deep .v-carousel__controls {
+:deep(.v-carousel__controls) {
   display: none;
 }
 

components/Layout/Footer/Footer.vue

@@ -1,5 +1,9 @@
 <template>
-  <footer ref="footerElement">
+  <!--suppress VueUnrecognizedDirective -->
+  <footer
+    ref="footerElement"
+    v-intersect="onIntersect"
+  >
     <LayoutContainer>
       <div >
         <v-row>
@@ -172,7 +176,7 @@
               </div>
             </div>
             </v-container>
-  
+
           </div>
         </v-col>
       </v-row>
@@ -202,6 +206,7 @@
 <script setup>
 import { useDisplay } from "vuetify";
 import { ref, provide } from "vue";
+import { useLayoutStore } from "~/stores/layoutStore";
 
 const footerElement = ref(null);
 const footerLinks = ref([
@@ -283,8 +288,17 @@ function toggle(index) {
 function isActive(index) {
   return activeIndex.value === index;
 }
+
 provide("footerElement", footerElement);
+
 const { mdAndDown } = useDisplay();
+
+const layoutStore = useLayoutStore()
+
+const onIntersect = (isIntersecting) => {
+  layoutStore.setIsFooterVisible(isIntersecting)
+}
+
 </script>
 
 <style scoped>
@@ -356,7 +370,7 @@ const { mdAndDown } = useDisplay();
   font-size: 1.5rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 
-  
+
 }
 
 .logo-opentalent-md {

components/Layout/UI/Title.vue

@@ -7,13 +7,12 @@
 </template>
 
 <script setup>
-import { defineProps } from "vue";
 
 const props = defineProps({
   title: String,
   titleColor: {
     type: String,
-    default: "#0E2D32", 
+    default: "#0E2D32",
   },
 });
 </script>
@@ -25,7 +24,7 @@ const props = defineProps({
   line-height: 3rem;
   color: inherit;
   margin-left: 1rem;
-  color: var(--Vert-90, #0E2D32); 
+  color: var(--Vert-90, #0E2D32);
   width: 35rem;
 }
 </style>

components/Layout/UI/TitlePage.vue

@@ -15,7 +15,6 @@
 <script setup>
 import { useDisplay } from "vuetify";
 const { mdAndDown } = useDisplay();
-import { defineProps } from "vue";
 
 const props = defineProps({
   title: String,
@@ -43,7 +42,7 @@ const props = defineProps({
   letter-spacing: 0.2rem;
   margin-top: 2rem;
   margin-bottom: 2rem;
-  
+
   text-transform: uppercase;
 }
 

lang/fr.json

@@ -1 +1,2 @@
-{}
+{
+}

nuxt.config.ts

@@ -1,7 +1,23 @@
 import fs from "fs";
 import vuetify from "vite-plugin-vuetify";
 import { NuxtI18nOptions } from "@nuxtjs/i18n";
-import { fa } from "vuetify/lib/locale";
+
+let https = {}
+
+let transpile = ['vuetify', 'pinia', 'pinia-orm', 'date-fns']
+
+if (!process.env.NUXT_ENV) {
+  throw Error('Missing environment file - Run yarn install')
+}
+
+if (process.env.NUXT_ENV === 'dev') {
+  https = {
+    key: fs.readFileSync('local.portail_v2.opentalent.fr.key'),
+    cert: fs.readFileSync('local.portail_v2.opentalent.fr.crt'),
+  }
+} else {
+  transpile.push('lodash')
+}
 
 /**
  * Nuxt configuration
@@ -9,7 +25,6 @@ import { fa } from "vuetify/lib/locale";
  * @see https://nuxt.com/docs/api/configuration/nuxt-config
  */
 export default defineNuxtConfig({
-  css: ["~/assets/css/main.css"],
   ssr: false,
   title: "Opentalent",
   runtimeConfig: {
@@ -22,6 +37,7 @@ export default defineNuxtConfig({
       apiBaseUrl: "",
     },
   },
+  css: ["~/assets/css/main.css"],
   hooks: {
     "builder:watch": console.log,
   },
@@ -90,18 +106,15 @@ export default defineNuxtConfig({
       drop: process.env.DEBUG ? [] : ["console", "debugger"],
     },
     ssr: {
-      noExternal: ["vuetify", "nuxt-lodash"],
+      noExternal: ["vuetify"],
     },
     server: {
-      https: {
-        key: fs.readFileSync("local.portail_v2.opentalent.fr.key"),
-        cert: fs.readFileSync("local.portail_v2.opentalent.fr.crt"),
-      },
+      https,
       //@ts-ignore
       port: 443,
       hmr: {
         protocol: "wss",
-        port: 24680,
+        port: 24680
       },
     },
   },
@@ -142,6 +155,6 @@ export default defineNuxtConfig({
     },
   } as NuxtI18nOptions,
   build: {
-    transpile: ["vuetify"],
+    transpile: transpile,
   },
 });

pages/formations.vue

@@ -3,12 +3,9 @@
 
   <FormationBanner />
   <CommonMenuScroll :menus="menus" class="mb-6" />
-  <div v-if="shouldShowStickyMenu" id="sticky-menu">
-    <CommonStickyMenu
-      :shouldShowStickyMenu="shouldShowStickyMenu"
-      :squaresData="squaresData"
-    />
-  </div>
+
+  <CommonStickyMenu />
+
   <FormationPresentation />
   <FormationCatalogue />
   <FormationOPCA />
@@ -31,56 +28,7 @@ const menus = ref([
   { id: "Inscription", label: "Inscription", element: null },
   { id: "Temoignages", label: "Temoignages", element: null }
 ]).value;
-
-const shouldShowStickyMenu = ref(true);
-
-const squaresData = [
-  {
-    id: 1,
-    bgColor: "green-square",
-    iconClass: "fa-regular fa-comments icon",
-    text: "Nous contacter",
-    url: "/nous-contacter",
-  },
-  {
-    id: 4,
-    bgColor: "darkblue-square",
-    iconClass: "fa-solid fa-phone icon",
-    text: "Nous Appeler",
-  },
-];
-
-onMounted(() => {
-  const stickyMenu = document.getElementById("sticky-menu");
-  const footer = document.getElementById("layout-footer");
-
-  const observer = new IntersectionObserver(
-    ([entry]) => {
-      shouldShowStickyMenu.value = !entry.isIntersecting;
-    },
-    {
-      root: null,
-      threshold: 0,
-    }
-  );
-
-  observer.observe(footer);
-});
 </script>
 
 <style scoped>
-#sticky-menu {
-  position: sticky;
-  top: 20rem;
-  z-index: 2;
-  margin-bottom: -32rem;
-  float: right;
-}
-
-@media (max-width: 1800px) {
-  #sticky-menu {
-    top: 16rem;
-    margin-bottom: -28rem;
-  }
-}
 </style>

pages/index.vue

@@ -1,99 +1,34 @@
 <template>
   <LayoutNavigation />
-  <div v-if="shouldShowStickyMenu && !mdAndDown" id="sticky-menu">
-    <CommonStickyMenu
-      :shouldShowStickyMenu="shouldShowStickyMenu"
-      :squaresData="squaresData"
-    />
-  </div>
-  <div v-if="mdAndDown">
-    <div class="sticky-menu">
-      <v-btn color="primary">Nous contacter</v-btn>
-      <v-btn color="secondary">Nous appeler</v-btn>
-    </div>
-  </div>
+
+  <CommonStickyMenu />
+
   <HomeCaroussel />
 
   <HomePromotion />
+
   <HomeSolution />
-  <div class="spacer"></div>
+
+  <div class="spacer" />
+
   <HomeEventAgenda />
+
   <HomeBesoin />
+
   <HomeReviews />
+
   <HomeHelp />
+
   <LayoutFooterPrefooter />
-  <LayoutFooter id="layout-footer" />
+
+  <LayoutFooter />
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
-import { useRouter } from "vue-router";
-import { useDisplay } from "vuetify";
-
-const { mdAndDown } = useDisplay();
-const router = useRouter();
-
-const shouldShowStickyMenu = ref(true);
-
-const squaresData = [
-  {
-    id: 1,
-    bgColor: "green-square",
-    iconClass: "fa-regular fa-comments icon",
-    text: "Nous contacter",
-    url: "/nous-contacter",
-  },
-  {
-    id: 4,
-    bgColor: "darkblue-square",
-    iconClass: "fa-solid fa-phone icon",
-    text: "Nous Appeler",
-  },
-];
-
-onMounted(() => {
-  const stickyMenu = document.getElementById("sticky-menu");
-  const footer = document.getElementById("layout-footer");
-
-  const observer = new IntersectionObserver(
-    ([entry]) => {
-      shouldShowStickyMenu.value = !entry.isIntersecting;
-    },
-    {
-      root: null,
-      threshold: 0,
-    }
-  );
-
-  observer.observe(footer);
-});
 </script>
 
 <style scoped>
-.sticky-menu {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  background-color: white;
-  z-index: 100;
-}
 .spacer {
   height: 2rem;
 }
-#sticky-menu {
-  position: sticky;
-  top: 30rem;
-  z-index: 1;
-  margin-bottom: -32rem;
-  float: right;
-}
-
-@media (max-width: 1800px) {
-  #sticky-menu {
-    top: 26rem;
-    margin-bottom: -28rem;
-  }
-}
 </style>

pages/qui-sommes-nous.vue

@@ -3,12 +3,9 @@
 
   <AboutBanner />
   <CommonMenuScroll :menus="menus" class="mb-6" />
-  <div v-if="shouldShowStickyMenu" id="sticky-menu">
-    <CommonStickyMenu
-      :shouldShowStickyMenu="shouldShowStickyMenu"
-      :squaresData="squaresData"
-    />
-  </div>
+
+  <CommonStickyMenu />
+
   <AboutHistoire />
   <AboutValeurs />
   <AboutLogiciels />
@@ -21,7 +18,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref } from "vue";
 
 const menus = ref([
   { id: "Qui-sommes-nous", label: "Qui sommes-nous", element: null },
@@ -32,54 +29,7 @@ const menus = ref([
   { id: "team", label: "Notre équipe", element: null },
   { id: "faq", label: "Aide", element: null },
 ]).value;
-const shouldShowStickyMenu = ref(true);
-const squaresData = [
-  {
-    id: 1,
-    bgColor: "green-square",
-    iconClass: "fa-regular fa-comments icon",
-    text: "Nous contacter",
-    url: "/nous-contacter",
-  },
-  {
-    id: 4,
-    bgColor: "darkblue-square",
-    iconClass: "fa-solid fa-phone icon",
-    text: "Nous Appeler",
-  },
-];
-
-onMounted(() => {
-  const stickyMenu = document.getElementById("sticky-menu");
-  const footer = document.getElementById("layout-footer");
-
-  const observer = new IntersectionObserver(
-    ([entry]) => {
-      shouldShowStickyMenu.value = !entry.isIntersecting;
-    },
-    {
-      root: null,
-      threshold: 0,
-    }
-  );
-
-  observer.observe(footer);
-});
 </script>
 
 <style scoped>
-#sticky-menu {
-  position: sticky;
-  top: 20rem;
-  z-index: 10;
-  margin-bottom: -32rem;
-  float: right;
-}
-
-@media (max-width: 1800px) {
-  #sticky-menu {
-    top: 16rem;
-    margin-bottom: -28rem;
-  }
-}
 </style>

pages/webinaires.vue

@@ -1,11 +1,8 @@
 <template>
   <LayoutNavigation />
-  <div v-if="shouldShowStickyMenu" id="sticky-menu">
-    <CommonStickyMenu
-      :shouldShowStickyMenu="shouldShowStickyMenu"
-      :squaresData="squaresData"
-    />
-  </div>
+
+  <CommonStickyMenu />
+
   <WebinaireBanner />
   <WebinaireCatalogue />
   <WebinaireFAQ />
@@ -14,62 +11,10 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
 import { useRouter } from 'vue-router';
 
 const router = useRouter();
-
-const shouldShowStickyMenu = ref(true);
-
-
-const squaresData = [
-  {
-    id: 1,
-    bgColor: "green-square",
-    iconClass: "fa-regular fa-comments icon",
-    text: "Nous contacter",
-    url: "/nous-contacter",
-  },
-  {
-    id: 4,
-    bgColor: "darkblue-square",
-    iconClass: "fa-solid fa-phone icon",
-    text: "Nous Appeler"
-
-  },
-];
-
-onMounted(() => {
-  const stickyMenu = document.getElementById("sticky-menu");
-  const footer = document.getElementById("layout-footer");
-
-  const observer = new IntersectionObserver(
-    ([entry]) => {
-      shouldShowStickyMenu.value = !entry.isIntersecting;
-    },
-    {
-      root: null,
-      threshold: 0,
-    }
-  );
-
-  observer.observe(footer);
-});
 </script>
 
 <style scoped>
-#sticky-menu {
-  position: sticky;
-  top: 20rem;
-  z-index: 2;
-  margin-bottom: -32rem;
-  float: right;
-}
-
-@media (max-width: 1800px) {
-  #sticky-menu {
-    top: 16rem;
-    margin-bottom: -28rem;
-  }
-}
 </style>

stores/layoutStore.ts

@@ -0,0 +1,16 @@
+import type { Ref } from "@vue/reactivity";
+
+
+export const useLayoutStore = defineStore('layout', () => {
+  const isFooterVisible: Ref<boolean> = ref(false)
+
+  const setIsFooterVisible = (value: boolean) => {
+    isFooterVisible.value = value
+  }
+
+
+  return {
+    isFooterVisible,
+    setIsFooterVisible
+  }
+})

types/enum/layout.ts

@@ -0,0 +1,8 @@
+
+
+// Actions du sticky menu
+export const enum StickyMenuActionType {
+  FOLLOW_LINK,
+  CALL_US,
+  ASK_FOR_A_DEMO
+}

types/interface.d.ts

@@ -1,3 +1,13 @@
+import { StickyMenuActionType } from "~/types/enum/layout";
+
 interface AssociativeArray {
   [key: string]: any;
-}
+}
+
+interface StickyMenuAction {
+  type: StickyMenuActionType
+  bgColor: string,
+  iconClass: string,
+  text: string,
+  url?: string,
+}