Navigation Menu v1.0

<e-navigation-menu
  :menu="menu"
  @toggleEmitNavMenu=""
/>

<e-navigation-menu
  :menu="menu"
  :socials="true"
  @toggleEmitNavMenu=""
/>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { RouteLocation } from 'vue-router';
import { first } from 'lodash-es';

import { EMenuData } from 'types/menu/EMenuData';
import { EMenuItem } from 'types/menu/EMenuItem';
import type { ESocials } from 'types/menu/ESocials';

import ENavigationButton from '../e-navigation-button/e-navigation-button.vue';
import ENavigationFooter from '../e-navigation-footer/e-navigation-footer.vue';
import ENavigationSearchItem from '../e-navigation-search-item/e-navigation-search-item.vue';

export type Props = {
  menu: EMenuData;
  route: RouteLocation;
  socials?: ESocials;
  isMobile?: boolean;
};

const props = withDefaults(defineProps<Props>(), {
  socials: () => {
    return [];
  },
  isMobile: false
});

const emit = defineEmits<{
  (e: 'toggle:nav-menu'): void;
}>();

const navigationMenuClasses = computed(() => {
  return {
    mobile: props.isMobile
  };
});

const openedMenuItemId = ref('');

function toggleSubMenu(menuItem: EMenuItem) {
  if (openedMenuItemId.value === menuItem?.key) {
    openedMenuItemId.value = '';
  } else {
    openedMenuItemId.value = menuItem?.key;
  }
}

const menuItems = computed(() => {
  return props.menu?.menuItems;
});
</script>

<template>
  <nav
    class="e-navigation-menu"
    :class="navigationMenuClasses"
  >
    <div
      class="content"
      role="none"
    >
      <template
        v-for="menuItem in menuItems"
        :key="menuItem?.key"
      >
        <e-navigation-search-item
          v-if="first(menuItem?.icon) === 'search.svg' && $slots.search"
          :menu="menuItem"
        >
          <template #search>
            <slot name="search" />
          </template>
        </e-navigation-search-item>
        <e-navigation-button
          v-else
          :menu-item="menuItem"
          :route="route"
          :is-opened="openedMenuItemId === menuItem?.key"
          :is-mobile="isMobile"
          :active="menuItem?.active"
          @toggle="toggleSubMenu(menuItem)"
          @toggle:nav-menu="emit('toggle:nav-menu')"
        />
      </template>
    </div>

    <e-navigation-footer
      v-if="socials"
      :socials="socials"
    />
  </nav>
</template>

<style scoped lang="scss">
.e-navigation-menu {
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 auto;
  height: 100%;
  overflow-x: hidden;

  .content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-x: hidden;
    min-height: min-content;
  }

  &.mobile {
    min-height: min-content;
    overflow-y: auto;
    max-width: 100%;
    align-items: center;
    justify-content: space-between;
    flex: 0 1 auto;
    height: auto;

    .content {
      justify-content: center;
      max-width: 300px;
    }
  }

  &:not(.mobile) {
    .content {
      flex: 0 1 auto;
    }
  }

  div:last-child:not(.content) {
    margin-top: auto;
  }
}
</style>