|
|
@@ -25,23 +25,24 @@ de l'écran (ou au bas de l'écran sur les petits écrans)
|
|
|
|
|
|
<!-- Petits écrans : menu sous forme de bandeau en pied de page (sauf si le footer du site est visible) -->
|
|
|
<div v-else-if="isVisible" class="sticky-menu band">
|
|
|
- <v-btn
|
|
|
- :to="{ path: '', hash: '#top' }"
|
|
|
- class="primary"
|
|
|
- :width="24"
|
|
|
- >
|
|
|
- <v-icon>fas fa-arrow-up</v-icon>
|
|
|
- </v-btn>
|
|
|
-
|
|
|
<v-btn
|
|
|
v-for="(action, index) in actionsOrDefault"
|
|
|
:key="index"
|
|
|
:class="[action.color]"
|
|
|
@click="() => onActionClick(action)"
|
|
|
>
|
|
|
- {{ action.text }}
|
|
|
+ <span v-if="mdAndUp">{{ action.text }}</span>
|
|
|
+ <v-icon v-else>{{ action.icon }}</v-icon>
|
|
|
</v-btn>
|
|
|
</div>
|
|
|
+
|
|
|
+ <v-btn
|
|
|
+ v-if="isVisible"
|
|
|
+ :to="{ path: '', hash: '#top' }"
|
|
|
+ class="back-to-the-top secondary"
|
|
|
+ >
|
|
|
+ <v-icon>fas fa-arrow-up</v-icon>
|
|
|
+ </v-btn>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
@@ -52,7 +53,7 @@ import { useLayoutStore } from '~/stores/layoutStore'
|
|
|
import { ActionMenuItemType } from '~/types/enum/layout'
|
|
|
import type { ActionMenuItem } from '~/types/interface'
|
|
|
|
|
|
-const { lgAndUp } = useDisplay()
|
|
|
+const { lgAndUp, mdAndUp } = useDisplay()
|
|
|
const router = useRouter()
|
|
|
const layoutStore = useLayoutStore()
|
|
|
const { isMobileDevice } = useClientDevice()
|
|
|
@@ -197,6 +198,16 @@ const onActionClick = (action: ActionMenuItem) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+.back-to-the-top {
|
|
|
+ position: fixed;
|
|
|
+ right: 12px;
|
|
|
+ bottom: 58px;
|
|
|
+ z-index: 100;
|
|
|
+ height: 48px;
|
|
|
+ width: 48px;
|
|
|
+ border-radius: 32px;
|
|
|
+}
|
|
|
+
|
|
|
.primary {
|
|
|
background: var(--action-menu-primary-color);
|
|
|
color: var(--action-menu-on-primary-color);
|
Olivier Massot