implements theming in action menu

assets/style/theme.scss

@@ -20,6 +20,11 @@ body {
   --artist-color: #FAC20A;
   --school-color: #2093be;
   --manager-color: #D8050B;
+
+  --action-menu-primary-color: #0e2d32;
+  --action-menu-on-primary-color: #ffffff;
+  --action-menu-secondary-color: #9edbdd;
+  --action-menu-on-secondary-color: #262626;
 }
 
 body {

components/Common/ActionMenu.vue

@@ -39,8 +39,6 @@ de l'écran (ou au bas de l'écran sur les petits écrans)
 </template>
 
 <script setup lang="ts">
-import { defineProps, ComputedRef } from "vue";
-import { useRouter } from "vue-router";
 import { useDisplay } from "vuetify";
 import { useLayoutStore } from "~/stores/layoutStore";
 import { ActionMenuItemType } from "~/types/enum/layout";
@@ -51,7 +49,6 @@ const router = useRouter();
 const layoutStore = useLayoutStore()
 const { isMobileDevice } = useClientDevice()
 
-// TODO: passer en conf?
 const telephoneNumber = "09 72 12 60 17";
 
 // Actions par défaut du menu, peut-être surchargé via la propriété `actions`
@@ -178,54 +175,20 @@ const onActionClick = (action: ActionMenuItem) => {
 }
 
 .primary {
-  background: var(--primary-color);
-  color: var(--on-primary-color);
+  background: var(--action-menu-primary-color);
+  color: var(--action-menu-on-primary-color);
 
   a {
-    color: var(--on-primary-color);
+    color: var(--action-menu-on-primary-color);
   }
 }
 
 .secondary {
-  background: var(--secondary-color);
-  color: var(--on-secondary-color);
+  background: var(--action-menu-secondary-color);
+  color: var(--action-menu-on-secondary-color);
 
   a {
-    color: var(--on-secondary-color);
+    color: var(--action-menu-on-secondary-color);
   }
 }
-
-.on-primary-color-alt {
-  background: var(--on-primary-color-alt);
-  color: var(--on-alt-theme);
-
-  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>

nuxt.config.ts

@@ -137,25 +137,6 @@ export default defineNuxtConfig({
     ],
     defaultLocale: "fr",
     detectBrowserLanguage: false,
-    vueI18n: {
-      legacy: false,
-      datetimeFormats: {
-        "fr-FR": {
-          short: {
-            year: "numeric",
-            month: "numeric",
-            day: "numeric",
-          },
-          long: {
-            year: "numeric",
-            month: "numeric",
-            day: "numeric",
-            hour: "numeric",
-            minute: "numeric",
-          },
-        },
-      },
-    },
   } as NuxtI18nOptions,
   build: {
     transpile: transpile,

package.json

@@ -40,7 +40,7 @@
     "leaflet": "^1.9.3",
     "leaflet.markercluster": "^1.5.3",
     "libphonenumber-js": "^1.9.38",
-    "nuxt": "^3.2.0",
+    "nuxt": "3.2.0",
     "nuxt-lodash": "^2.4.1",
     "ohmyfetch": "^0.4.21",
     "pinia": "^2.0.33",

pages/opentalent_artist.vue

@@ -58,14 +58,14 @@ const menus: Array<MenuScroll> = [
 const stickyMenuActions: Array<ActionMenuItem> = [
   {
     type: ActionMenuItemType.FOLLOW_LINK,
-    color: "on-primary-color-alt",
+    color: "primary",
     icon: "far fa-comments",
     text: "Nous contacter",
     url: "/nous-contacter",
   },
   {
     type: ActionMenuItemType.FOLLOW_LINK,
-    color: "on-primary-color-alt",
+    color: "primary",
     icon: "fas fa-circle-info",
     text: "Brochure",
     url: "https://www.opentalent.fr/fileadmin/stockage/commercial/plaquettes_commerciales/Depliant_Opentalent_Artist_23.pdf ",
@@ -80,5 +80,10 @@ const stickyMenuActions: Array<ActionMenuItem> = [
   --on-primary-color: #0e2d32;
   --primary-color-alt: #262626;
   --on-primary-color-alt: #fac20a;
+
+  --action-menu-primary-color: #fac20a;
+  --action-menu-on-primary-color: #262626;
+  --action-menu-secondary-color: #fef3ce;
+  --action-menu-on-secondary-color: #262626;
 }
 </style>

pages/opentalent_manager.vue

@@ -49,21 +49,21 @@ const menus: Array<MenuScroll> = ref([
 const stickyMenuActions: Array<ActionMenuItem> = [
   {
     type: ActionMenuItemType.FOLLOW_LINK,
-    bgColor: "red-square",
+    color: "primary",
     icon: "fa-regular fa-comments icon",
     text: "Nous contacter",
     url: "/nous-contacter",
   },
   {
     type: ActionMenuItemType.FOLLOW_LINK,
-    bgColor: "red-square",
+    color: "primary",
     icon: "fa-brands fa-readme icon",
     text: "Brochure",
     url: "https://www.opentalent.fr/fileadmin/user_upload/Manager.pdf",
   },
   {
     type: ActionMenuItemType.CALL_US,
-    bgColor: "darkblue-square",
+    color: "secondary",
     icon: "fa-solid fa-phone icon",
     text: "Nous appeler",
   },
@@ -77,5 +77,10 @@ const stickyMenuActions: Array<ActionMenuItem> = [
   --secondary-color: #f7cdce;
   --on-primary-color: #0e2d32;
   --on-primary-color-alt: #d8050b;
+
+  --action-menu-primary-color: #d8050b;
+  --action-menu-on-primary-color: #ffffff;
+  --action-menu-secondary-color: #0e2d32;
+  --action-menu-on-secondary-color: #ffffff;
 }
 </style>

pages/opentalent_school.vue

@@ -52,28 +52,28 @@ const menus: Array<MenuScroll> = [
 const stickyMenuActions: Array<ActionMenuItem> = [
   {
     type: ActionMenuItemType.FOLLOW_LINK,
-    bgColor: "blue-square",
+    color: "primary",
     icon: "fa-regular fa-comments icon",
     text: "Nous contacter",
     url: "/nous-contacter",
   },
   {
     type: ActionMenuItemType.FOLLOW_LINK,
-    bgColor: "blue-square",
+    color: "primary",
     icon: "fa-solid fa-circle-info icon",
     text: "Demander une demo",
     url: "/nous-contacter",
   },
   {
     type: ActionMenuItemType.FOLLOW_LINK,
-    bgColor: "blue-square",
+    color: "primary",
     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: ActionMenuItemType.CALL_US,
-    bgColor: "darkblue-square",
+    color: "secondary",
     icon: "fa-solid fa-phone icon",
     text: "Nous Appeler",
   },
@@ -88,5 +88,10 @@ const stickyMenuActions: Array<ActionMenuItem> = [
   --on-primary-color: #0e2d32;
   --primary-color-alt: #262626;
   --on-primary-color-alt: #c3e5e7;
+
+  --action-menu-primary-color: #c3e5e7;
+  --action-menu-on-primary-color: #262626;
+  --action-menu-secondary-color: #0e2d32;
+  --action-menu-on-secondary-color: #ffffff;
 }
 </style>

types/interface.d.ts

@@ -2,7 +2,7 @@ import { ActionMenuItemType } from "~/types/enum/layout";
 
 interface ActionMenuItem {
   type: ActionMenuItemType
-  color: string,
+  color: 'primary' | 'secondary',
   icon: string,
   text: string,
   url?: string,