site_logiciels/components/Layout/Navigation/Md.vue

<template>
  <v-app class="navigation-sm">
    <!-- Top bar -->
    <v-app-bar app>
      <v-app-bar-nav-icon
        @click="toggleMenu"
      />

      <nuxt-link to="/">
        <v-img class="logo-md" src="/images/logo/navigation-logo.png" />
      </nuxt-link>

      <v-spacer />

      <div class="mx-4">
        <v-btn
          href="https://admin.opentalent.fr/#/login/"
          icon="fas fa-user"
          class="icon"
        />

        <v-btn
          to="/nous-contacter"
          icon="fas fa-phone"
          class="icon"
        />

        <AgendaLink href="/agenda-culturel">
          <v-btn
            icon="fas fa-calendar"
            class="icon"
          />
        </AgendaLink>
      </div>
    </v-app-bar>

    <!-- Tiroir de navigation principal -->
    <v-navigation-drawer
      v-model="isMenuOpen"
      app
      temporary
    >
      <v-list nav dense>
        <v-list-item
          v-if="isSubMenu"
          class="menuItem back-item"
          @click="onBackItemClick"
        >
          <v-list-item-title>
            <v-icon icon="fas fa-caret-left" class="mr-1"/> Retour
          </v-list-item-title>
        </v-list-item>

        <v-list-item
          v-for="(item, index) in activeMenu"
          :key="item.label"
          :to="item.to"
          class="menuItem"
          @click="onMenuItemClick(index, item)"
        >
          <v-list-item-title class="d-flex flex-row w-100">
            <span class="flex-grow-1">
              {{ item.label }}
            </span>
            <span v-if="item.children?.length! > 0">
              <v-icon icon="fa fa-angle-right" />
            </span>
          </v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </v-app>
</template>

<script setup lang="ts">
import AgendaLink from "~/components/Common/AgendaLink.vue";
import type { PropType } from "@vue/runtime-core";
import type { MainMenuItem } from "~/types/interface";

const props = defineProps({
  menu: {
    type: Array as PropType<Array<MainMenuItem>>
  }
})

const isMenuOpen: Ref<boolean> = ref(false);
const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value;
};

const activeMenuIndex: Ref<number | null> = ref(null)

const activeMenu = computed(() =>
  activeMenuIndex.value !== null ? props.menu![activeMenuIndex.value].children : props.menu
)

/**
 * Determines if the is active menu is a sub-menu .
 *
 * @function isSubMenu
 * @returns {boolean} - True if a sub-menu is active, otherwise false.
 */
const isSubMenu = computed(() => activeMenuIndex.value !== null)

/**
 * Handles the click event on a menu item.
 *
 * @param {number} index - The index of the clicked menu item.
 * @param {MainMenuItem} item - The clicked menu item.
 * @returns {void}
 */
const onMenuItemClick = (index: number, item: MainMenuItem): void => {
  if (!item.children) {
    return
  }
  withAnimation(() => activeMenuIndex.value = index)
}

/**
 * Function to handle back button click event.
 */
const onBackItemClick = (): void => {
  withAnimation(() => activeMenuIndex.value = null)
}

/**
 * Déclenche une animation de changement de menu en fermant et rouvrant le drawer
 * @param callback
 */
const withAnimation = (callback: () => void) => {
  isMenuOpen.value = false
  callback()
  setTimeout(() => {isMenuOpen.value = true}, 85)
}
</script>

<style scoped lang="scss">
.navigation-sm {
  background-color: var(--neutral-color);
  position: fixed;
  top: 0;
  z-index: 1000;
}

.logo-md {
  width: 150px;
  height: 300px;
}

.back-item {
  border-bottom: solid 1px var(--on-neutral-color-light);
  border-radius: 0;

  .v-list-item-title {
    display: flex;
    align-items: center;
  }
}

.icon {
  color: var(--on-neutral-color);
}
</style>