site_logiciels/components/Layout/Navigation/Md.vue

<template>
  <div class="app-container">
    <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="smAndUp ? '/images/logo/navigation-logo.png' : '/images/Opentalent_Griffe.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>
  </div>
</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";
import { useDisplay } from "vuetify";

const { smAndUp } = useDisplay()

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">
.app-container {
  height: 54px;
}

.navigation-sm {
  background-color: var(--neutral-color);
  position: fixed;
  top: 0;
  z-index: 1000;
}

.logo-md {
  width: 150px;
  height: 50px;

  @media (max-width: 600px) {
    width: 50px;
  }
}

.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-light);
}
</style>