Przeglądaj źródła

ajout d'un bouton "back to the top" à l'action-menu sur écran sm

Olivier Massot 1 rok temu
rodzic
commit
9cf057a8fc

+ 9 - 1
components/Common/ActionMenu.vue

@@ -25,6 +25,14 @@ 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"
@@ -159,10 +167,10 @@ const onActionClick = (action: ActionMenuItem) => {
   justify-content: center;
   background-color: var(--neutral-color);
   max-width: 100vw;
+  padding: 0 6px;
 
   .v-btn {
     margin: 6px 2%;
-    width: 46%;
   }
 }
 

+ 7 - 1
components/Layout/Navigation/Md.vue

@@ -72,7 +72,7 @@ import { useDisplay } from 'vuetify'
 import AgendaLink from '~/components/Common/AgendaLink.vue'
 import type { MainMenuItem } from '~/types/interface'
 
-const { smAndUp } = useDisplay()
+const { mdAndDown } = useDisplay()
 
 const props = defineProps({
   menu: {
@@ -134,6 +134,12 @@ const withAnimation = (callback: () => void) => {
     isMenuOpen.value = true
   }, 85)
 }
+
+const showBackToTheTop = ref(false)
+
+const handleScroll = () => {
+  showBackToTheTop.value = window.scrollY > 50
+}
 </script>
 
 <style scoped lang="scss">