fix the upgrade premium btn when menu is railed

components/Layout/MainMenu.vue

@@ -8,13 +8,13 @@ Prend en paramètre une liste de ItemMenu et les met en forme
     v-model="displayMenu"
     :rail="isRail"
     :disable-resize-watcher="true"
-    style="z-index: 1006;"
+    style="z-index: 1006"
     class="theme-secondary main-menu"
   >
-  <!-- Forcing z-index to avoid this : https://github.com/vuetifyjs/nuxt-module/issues/205 -->
+    <!-- Forcing z-index to avoid this : https://github.com/vuetifyjs/nuxt-module/issues/205 -->
 
     <template #prepend>
-      <slot name="prepend"></slot>
+      <slot name="prepend" :is-rail="isRail" />
     </template>
 
     <v-list open-strategy="single" active-class="active" class="left-menu">
@@ -68,7 +68,7 @@ Prend en paramètre une liste de ItemMenu et les met en forme
     </v-list>
 
     <template #append>
-      <slot name="foot"></slot>
+      <slot name="foot" :is-rail="isRail" />
     </template>
   </v-navigation-drawer>
 </template>
@@ -78,12 +78,12 @@ import { useMenu } from '~/composables/layout/useMenu'
 import { computed } from '@vue/reactivity'
 import { useDisplay } from 'vuetify'
 import type { MenuGroup, MenuItem } from '~/types/layout'
-import {useApiLegacyRequestService} from "~/composables/data/useApiLegacyRequestService";
+import { useApiLegacyRequestService } from '~/composables/data/useApiLegacyRequestService'
 
 const i18n = useI18n()
 const organizationProfile = useOrganizationProfileStore()
-const { getMenu, hasMenu, isInternalLink, setMenuState, isMenuOpened } = useMenu()
-
+const { getMenu, hasMenu, isInternalLink, setMenuState, isMenuOpened } =
+  useMenu()
 
 const { mdAndUp, lgAndUp } = useDisplay()
 
@@ -124,7 +124,9 @@ onUnmounted(() => {
  * Récupère les menuItem disponibles
  * @param menu
  */
-function getItems(menu: MenuGroup|MenuItem|null) : Array<MenuGroup | MenuItem>{
+function getItems(
+  menu: MenuGroup | MenuItem | null,
+): Array<MenuGroup | MenuItem> {
   let items: Array<MenuGroup | MenuItem>
 
   if (menu === null) {
@@ -135,7 +137,7 @@ function getItems(menu: MenuGroup|MenuItem|null) : Array<MenuGroup | MenuItem>{
     items = [menu]
   }
 
-  return items;
+  return items
 }
 </script>
 

components/Layout/UpgradePremiumButton.vue

@@ -1,15 +1,11 @@
 <template>
-  <div v-if="show">
-    <div
-      class="btn_trial"
-      :class="{['btn_mini'] : minimized}"
-      @click="trialAction()"
-    >
+  <div>
+    <div :class="['btn_trial', { minimized }]" @click="trialAction()">
       <v-icon icon="fa fa-ticket" />
 
       <span v-if="organizationProfile.isTrialActive && !minimized">
-        <strong>J-{{organizationProfile.trialCountDown}}</strong>
-        <br/>
+        <strong>J-{{ organizationProfile.trialCountDown }}</strong>
+        <br />
       </span>
 
       <span v-if="!minimized">{{ btnLabel }}</span>
@@ -17,68 +13,64 @@
 
     <LayoutDialogTrialAlreadyDid
       :show="showDialog"
-      @closeDialog = "showDialog = false"
+      @closeDialog="showDialog = false"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import UrlUtils from "~/services/utils/urlUtils";
-import {useApiLegacyRequestService} from '~/composables/data/useApiLegacyRequestService';
-import {computed} from '@vue/reactivity';
+import UrlUtils from '~/services/utils/urlUtils'
+import { useApiLegacyRequestService } from '~/composables/data/useApiLegacyRequestService'
+import { computed } from '@vue/reactivity'
 
 const runtimeConfig = useRuntimeConfig()
-const accessProfile = useAccessProfileStore()
 const organizationProfile = useOrganizationProfileStore()
 const { apiRequestService } = useApiLegacyRequestService()
 const i18n = useI18n()
 
-const props = defineProps({
-  show: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
+defineProps({
   minimized: {
     type: Boolean,
     required: false,
-    default: false
-  }
+    default: false,
+  },
 })
 
 const showDialog: Ref<boolean> = ref(false)
 
 const btnLabel = computed(() => {
-  if(organizationProfile.isTrialActive){
+  if (organizationProfile.isTrialActive) {
     return i18n.t('trial_started')
   }
-  return organizationProfile.principalType === 'ARTISTIC_PRACTICE_ONLY' ? i18n.t('try_premium') : i18n.t('discover_offer')
+  return organizationProfile.principalType === 'ARTISTIC_PRACTICE_ONLY'
+    ? i18n.t('try_premium')
+    : i18n.t('discover_offer')
 })
 
 /**
  * Lorsque l'on appuie sur le bouton pour démarrer l'essai / découvrir les offres
  */
 const trialAction = async () => {
-  const v1BaseURL = runtimeConfig.baseUrlAdminLegacy || runtimeConfig.public.baseUrlAdminLegacy
+  const v1BaseURL =
+    runtimeConfig.baseUrlAdminLegacy || runtimeConfig.public.baseUrlAdminLegacy
 
-  if(organizationProfile.isTrialActive){
+  if (organizationProfile.isTrialActive) {
     await navigateTo(UrlUtils.join(v1BaseURL, '#', 'subscribe'), {
-      external: true
+      external: true,
     })
-  }else if(organizationProfile.principalType === 'ARTISTIC_PRACTICE_ONLY'){
-    try{
+  } else if (organizationProfile.principalType === 'ARTISTIC_PRACTICE_ONLY') {
+    try {
       await apiRequestService.get('/trial/is_available')
       await navigateTo(UrlUtils.join(v1BaseURL, '#', 'trial'), {
-        external: true
+        external: true,
       })
-    }catch(error){
+    } catch (error) {
       showDialog.value = true
     }
-  }else{
+  } else {
     await navigateTo('/subscription')
   }
 }
-
 </script>
 
 <style scoped lang="scss">
@@ -89,7 +81,7 @@ const trialAction = async () => {
   margin-left: 15px;
   margin-right: 15px;
   text-align: center;
-  color:#000;
+  color: #000;
   margin-top: 5px;
   padding: 5px 10px;
   cursor: pointer;
@@ -98,13 +90,13 @@ const trialAction = async () => {
 
   .v-icon {
     font-size: 16px;
-    color:#000;
+    color: #000;
     padding-right: 5px;
     margin: 0 5px 4px 0;
   }
 }
 
-.btn_mini {
+.minimized {
   font-size: 17px;
   margin-left: 7px;
   margin-right: 7px;

layouts/default.vue

@@ -9,9 +9,10 @@
       <LayoutHeader />
 
       <LayoutMainMenu>
-        <template #prepend>
+        <template #prepend="{ isRail }">
           <LayoutUpgradePremiumButton
-            :show="showUpgradePremiumButton"
+            v-if="showUpgradePremiumButton"
+            :minimized="isRail"
           />
         </template>
       </LayoutMainMenu>
@@ -39,8 +40,11 @@ layoutStore.name = 'default'
 const accessProfile = useAccessProfileStore()
 const organizationProfile = useOrganizationProfileStore()
 
-const showUpgradePremiumButton: ComputedRef<boolean> = computed(() =>
-  ((organizationProfile.isArtistProduct || organizationProfile.isTrialActive) && (accessProfile.isCaMember || accessProfile.isAdmin)) ?? false
+const showUpgradePremiumButton: ComputedRef<boolean> = computed(
+  () =>
+    ((organizationProfile.isArtistProduct ||
+      organizationProfile.isTrialActive) &&
+      (accessProfile.isCaMember || accessProfile.isAdmin)) ??
+    false,
 )
-
 </script>