implements theme in action menu (ex: sticky menu)

components/Common/StickyMenu.vue → components/Common/ActionMenu.vue

@@ -2,31 +2,35 @@
 Menu d'actions rapides (appel, contact, ...), qui reste accroché au bord droit
 de l'écran (ou au bas de l'écran sur les petits écrans)
 -->
-<!-- TODO: implémenter le theming ici -->
 <template>
-  <!-- Écrans larges : menu lateral -->
+  <!-- Écrans larges : menu lateral, accroché au bord droit de l'écran -->
   <div class="sticky-menu lateral" v-if="lgAndUp">
     <v-row
       v-for="(action, index) in actionsOrDefault"
       :key="index"
-      :class="['square', action.bgColor]"
+      :class="['square', action.color]"
       @click="() => onActionClick(action)"
     >
       <NuxtLink :to="action.url" class="link">
         <div>
-          <v-icon :class="action.iconClass" />
-          <p class="text-square mt-2">{{ action.text }}</p>
+          <v-icon
+            :class="action.icon"
+          />
+
+          <p class="text-square mt-2">
+            {{ action.text }}
+          </p>
         </div>
       </NuxtLink>
     </v-row>
   </div>
 
-  <!-- Petits : menu sous forme de bandeau en pied de page (sauf si le footer du site est visible) -->
+  <!-- Petits écrans : menu sous forme de bandeau en pied de page (sauf si le footer du site est visible) -->
   <div class="sticky-menu band" v-else-if="!layoutStore.isFooterVisible">
     <v-btn
       v-for="(action, index) in actionsOrDefault"
       :key="index"
-      :class="[action.bgColor]"
+      :class="[action.color]"
       @click="() => onActionClick(action)"
     >
       {{ action.text }}
@@ -39,8 +43,8 @@ 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";
+import { ActionMenuItemType } from "~/types/enum/layout";
+import { ActionMenuItem } from "~/types/interface";
 
 const { mdAndDown, lgAndUp } = useDisplay();
 const router = useRouter();
@@ -51,34 +55,34 @@ const { isMobileDevice } = useClientDevice()
 const telephoneNumber = "09 72 12 60 17";
 
 // Actions par défaut du menu, peut-être surchargé via la propriété `actions`
-const defaultActions: Array<StickyMenuAction> = [
+const defaultActions: Array<ActionMenuItem> = [
   {
-    type: StickyMenuActionType.FOLLOW_LINK,
-    bgColor: "green-square",
-    iconClass: "fa-regular fa-comments icon",
+    type: ActionMenuItemType.FOLLOW_LINK,
+    color: "secondary",
+    icon: "far fa-comments",
     text: "Nous contacter",
     url: "/nous-contacter",
   },
   {
-    type: StickyMenuActionType.CALL_US,
-    bgColor: "darkblue-square",
-    iconClass: "fa-solid fa-phone icon",
+    type: ActionMenuItemType.CALL_US,
+    color: "primary",
+    icon: "fas fa-phone",
     text: "Nous Appeler",
   },
 ];
 
 const props = defineProps({
   /**
-   * Actions accessibles via le menu (par défaut: "Nous contacter", "Nous appeller")
+   * Actions accessibles via le menu (par défaut : "Nous contacter", "Nous appeler")
    */
   actions: {
-    type: Array<StickyMenuAction>,
+    type: Array<ActionMenuItem>,
     required: false,
     default: []
   }
 })
 
-const actionsOrDefault: ComputedRef<Array<StickyMenuAction>> = computed(() => {
+const actionsOrDefault: ComputedRef<Array<ActionMenuItem>> = computed(() => {
   return props.actions.length > 0 ? props.actions : defaultActions
 })
 
@@ -94,17 +98,17 @@ const callUs = () => {
  * On a cliqué sur une des actions du menu
  * @param action
  */
-const onActionClick = (action: StickyMenuAction) => {
+const onActionClick = (action: ActionMenuItem) => {
   switch (action.type) {
-    case StickyMenuActionType.ASK_FOR_A_DEMO:
+    case ActionMenuItemType.ASK_FOR_A_DEMO:
       router.push({ path: action.url, query: { request: "demo" } });
       break;
 
-    case StickyMenuActionType.CALL_US:
+    case ActionMenuItemType.CALL_US:
       callUs()
       break;
 
-    case StickyMenuActionType.FOLLOW_LINK:
+    case ActionMenuItemType.FOLLOW_LINK:
       if (!action.url) {
         throw Error('Missing prop : url')
       }
@@ -115,8 +119,6 @@ const onActionClick = (action: StickyMenuAction) => {
       throw Error('Unrecognized action')
   }
 };
-
-
 </script>
 
 <style scoped lang="scss">
@@ -135,7 +137,6 @@ const onActionClick = (action: StickyMenuAction) => {
 
   display: flex;
   flex-direction: column;
-  color: white;
   font-weight: 500;
   font-size: 0.7rem;
   line-height: 15px;
@@ -152,7 +153,6 @@ const onActionClick = (action: StickyMenuAction) => {
   width: 100%;
   display: flex;
   justify-content: center;
-  background-color: white;
 
   .v-btn {
     margin: 4px 6px;
@@ -175,31 +175,57 @@ const onActionClick = (action: StickyMenuAction) => {
 
 .link {
   text-decoration: none;
-  color: white;
 }
 
-.yellow-square {
-  background: rgb(250, 194, 10);
-  color: #0e2d32;
-}
+.primary {
+  background: var(--primary-color);
+  color: var(--on-primary-color);
 
-.green-square {
-  background: #9edbdd;
+  a {
+    color: var(--on-primary-color);
+  }
 }
 
-.red-square {
-  background: #d8050b;
-}
+.secondary {
+  background: var(--secondary-color);
+  color: var(--on-secondary-color);
 
-.blue-square {
-  background: #2093be;
+  a {
+    color: var(--on-secondary-color);
+  }
 }
 
-.logo-square {
-  background: var(--Bleu-School-60, rgba(32, 147, 190));
-}
+.on-primary-color-alt {
+  background: var(--on-primary-color-alt);
+  color: var(--on-alt-theme);
 
-.darkblue-square {
-  background: #0e2d32;
+  a {
+    color: var(--on-alt-theme);
+  }
 }
+
+//.yellow-square {
+//  background: rgb(250, 194, 10);
+//  color: #0e2d32;
+//}
+//
+//.green-square {
+//  background: #9edbdd;
+//}
+//
+//.red-square {
+//  background: #d8050b;
+//}
+//
+//.blue-square {
+//  background: #2093be;
+//}
+//
+//.logo-square {
+//  background: var(--Bleu-School-60, rgba(32, 147, 190));
+//}
+//
+//.darkblue-square {
+//  background: #0e2d32;
+//}
 </style>

components/Common/MenuScroll.vue

@@ -27,7 +27,6 @@
 </template>
 
 <script setup lang="ts">
-
 import { PropType } from "@vue/runtime-core";
 import { MenuScroll } from "~/types/interface";
 import { useLayoutStore } from "~/stores/layoutStore";

pages/formations.vue

@@ -5,7 +5,7 @@
 
   <CommonMenuScroll :menus="menus" class="mb-6" />
 
-  <CommonStickyMenu />
+  <CommonActionMenu />
 
   <FormationPresentation />
 

pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <LayoutNavigation />
 
-  <CommonStickyMenu />
+  <CommonActionMenu />
 
   <LayoutUITitlePage
     title="LOGICIELS CULTURELS"

pages/opentalent_artist.vue

@@ -2,7 +2,7 @@
   <div class="theme-artist" >
     <LayoutNavigation />
 
-    <CommonStickyMenu :actions="stickyMenuActions" />
+    <CommonActionMenu :actions="stickyMenuActions" />
 
     <CommonBannerTitle
       title="Opentalent Artist"
@@ -39,8 +39,8 @@
 </template>
 
 <script setup lang="ts">
-import { StickyMenuActionType } from "~/types/enum/layout";
-import { MenuScroll, StickyMenuAction } from "~/types/interface";
+import { ActionMenuItemType } from "~/types/enum/layout";
+import { MenuScroll, ActionMenuItem } from "~/types/interface";
 import { useDisplay } from "vuetify";
 
 const { mdAndUp } = useDisplay()
@@ -55,18 +55,18 @@ const menus: Array<MenuScroll> = [
   { anchor: "testimonials", label: "Témoignages" },
 ];
 
-const stickyMenuActions: Array<StickyMenuAction> = [
+const stickyMenuActions: Array<ActionMenuItem> = [
   {
-    type: StickyMenuActionType.FOLLOW_LINK,
-    bgColor: "yellow-square",
-    iconClass: "fa-regular fa-comments icon",
+    type: ActionMenuItemType.FOLLOW_LINK,
+    color: "on-primary-color-alt",
+    icon: "far fa-comments",
     text: "Nous contacter",
     url: "/nous-contacter",
   },
   {
-    type: StickyMenuActionType.FOLLOW_LINK,
-    bgColor: "yellow-square",
-    iconClass: "fa-solid fa-circle-info icon",
+    type: ActionMenuItemType.FOLLOW_LINK,
+    color: "on-primary-color-alt",
+    icon: "fas fa-circle-info",
     text: "Brochure",
     url: "https://www.opentalent.fr/fileadmin/stockage/commercial/plaquettes_commerciales/Depliant_Opentalent_Artist_23.pdf ",
   }

pages/opentalent_manager.vue

@@ -6,7 +6,7 @@
 
     <CommonMenuScroll :menus="menus" class="mb-6" />
 
-    <CommonStickyMenu :actions="stickyMenuActions" />
+    <CommonActionMenu :actions="stickyMenuActions" />
 
     <LogicielsManagerPresentation />
 
@@ -31,8 +31,8 @@
 </template>
 
 <script setup lang="ts">
-import { MenuScroll, StickyMenuAction } from "~/types/interface";
-import { StickyMenuActionType } from "~/types/enum/layout";
+import { MenuScroll, ActionMenuItem } from "~/types/interface";
+import { ActionMenuItemType } from "~/types/enum/layout";
 import { useDisplay } from "vuetify";
 
 const { mdAndUp } = useDisplay()
@@ -46,25 +46,25 @@ const menus: Array<MenuScroll> = ref([
   { anchor: "testimonials", label: "Témoignages" },
 ]).value;
 
-const stickyMenuActions: Array<StickyMenuAction> = [
+const stickyMenuActions: Array<ActionMenuItem> = [
   {
-    type: StickyMenuActionType.FOLLOW_LINK,
+    type: ActionMenuItemType.FOLLOW_LINK,
     bgColor: "red-square",
-    iconClass: "fa-regular fa-comments icon",
+    icon: "fa-regular fa-comments icon",
     text: "Nous contacter",
     url: "/nous-contacter",
   },
   {
-    type: StickyMenuActionType.FOLLOW_LINK,
+    type: ActionMenuItemType.FOLLOW_LINK,
     bgColor: "red-square",
-    iconClass: "fa-brands fa-readme icon",
+    icon: "fa-brands fa-readme icon",
     text: "Brochure",
     url: "https://www.opentalent.fr/fileadmin/user_upload/Manager.pdf",
   },
   {
-    type: StickyMenuActionType.CALL_US,
+    type: ActionMenuItemType.CALL_US,
     bgColor: "darkblue-square",
-    iconClass: "fa-solid fa-phone icon",
+    icon: "fa-solid fa-phone icon",
     text: "Nous appeler",
   },
 ];

pages/opentalent_school.vue

@@ -6,7 +6,7 @@
 
     <CommonMenuScroll :menus="menus" class="mb-6" />
 
-    <CommonStickyMenu :actions="stickyMenuActions" />
+    <CommonActionMenu :actions="stickyMenuActions" />
 
     <LogicielsSchoolPresentation />
 
@@ -33,8 +33,8 @@
 </template>
 
 <script setup lang="ts">
-import { MenuScroll, StickyMenuAction } from "~/types/interface";
-import { StickyMenuActionType } from "~/types/enum/layout";
+import { MenuScroll, ActionMenuItem } from "~/types/interface";
+import { ActionMenuItemType } from "~/types/enum/layout";
 import { useDisplay } from "vuetify";
 
 const { mdAndUp } = useDisplay()
@@ -49,32 +49,32 @@ const menus: Array<MenuScroll> = [
   { anchor: "testimonials", label: "Témoignages" },
 ];
 
-const stickyMenuActions: Array<StickyMenuAction> = [
+const stickyMenuActions: Array<ActionMenuItem> = [
   {
-    type: StickyMenuActionType.FOLLOW_LINK,
+    type: ActionMenuItemType.FOLLOW_LINK,
     bgColor: "blue-square",
-    iconClass: "fa-regular fa-comments icon",
+    icon: "fa-regular fa-comments icon",
     text: "Nous contacter",
     url: "/nous-contacter",
   },
   {
-    type: StickyMenuActionType.FOLLOW_LINK,
+    type: ActionMenuItemType.FOLLOW_LINK,
     bgColor: "blue-square",
-    iconClass: "fa-solid fa-circle-info icon",
+    icon: "fa-solid fa-circle-info icon",
     text: "Demander une demo",
     url: "/nous-contacter",
   },
   {
-    type: StickyMenuActionType.FOLLOW_LINK,
+    type: ActionMenuItemType.FOLLOW_LINK,
     bgColor: "blue-square",
-    iconClass: "fa-brands fa-readme icon",
+    icon: "fa-brands fa-readme icon",
     text: "Brochure",
     url: "https://www.opentalent.fr/fileadmin/stockage/commercial/plaquettes_commerciales/De%CC%81pliant-school_23.pdf",
   },
   {
-    type: StickyMenuActionType.CALL_US,
+    type: ActionMenuItemType.CALL_US,
     bgColor: "darkblue-square",
-    iconClass: "fa-solid fa-phone icon",
+    icon: "fa-solid fa-phone icon",
     text: "Nous Appeler",
   },
 ];

pages/qui-sommes-nous.vue

@@ -9,7 +9,7 @@
 
   <CommonMenuScroll :menus="menus" class="mb-6" />
 
-  <CommonStickyMenu />
+  <CommonActionMenu />
 
   <AboutPresentation />
 

pages/webinaires.vue

@@ -4,7 +4,7 @@
 <template>
   <LayoutNavigation />
 
-  <CommonStickyMenu />
+  <CommonActionMenu />
 
   <WebinaireBanner />
 

types/enum/layout.ts

@@ -1,7 +1,7 @@
 
 
 // Actions du sticky menu
-export const enum StickyMenuActionType {
+export const enum ActionMenuItemType {
   FOLLOW_LINK,
   CALL_US,
   ASK_FOR_A_DEMO

types/interface.d.ts

@@ -1,9 +1,9 @@
-import { StickyMenuActionType } from "~/types/enum/layout";
+import { ActionMenuItemType } from "~/types/enum/layout";
 
-interface StickyMenuAction {
-  type: StickyMenuActionType
-  bgColor: string,
-  iconClass: string,
+interface ActionMenuItem {
+  type: ActionMenuItemType
+  color: string,
+  icon: string,
   text: string,
   url?: string,
 }