Navigation v1.0

<e-navigation
  :menu='menu'
  :socials='socials'
/>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useDark } from '@vueuse/core';
import { RouteLocation, useRouter } from 'vue-router';

import { EMenuData, ESocials } from 'types';

import EImage from '../e-image/e-image.vue';
import EHamburger from '../e-hamburger/e-hamburger.vue';
import ENavigationMenu from '../e-navigation-menu/e-navigation-menu.vue';

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

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

const emit = defineEmits<{
  (e: 'toggle', value: boolean): void;
}>();

const isDark = useDark({
  valueDark: 'dark',
  valueLight: 'light'
});

const router = useRouter();

const toggleNavigationMenu = ref(!props.isMobile);

function toggleEmitNavMenu() {
  toggleNavigationMenu.value = !toggleNavigationMenu.value;
  emit('toggle', toggleNavigationMenu.value);
}

function toggleNavMenu() {
  if (props.isMobile) {
    toggleNavigationMenu.value = !toggleNavigationMenu.value;
  }
}

function navigateTo(routePath) {
  router?.push(routePath);
}

const navigationMenu = computed(() => {
  return props.menu;
});

const isLogoVisible = computed(() => {
  return !props.isMobile || toggleNavigationMenu.value || props.logoVisible;
});

const showNavMenu = computed(() => {
  if (props.isMobile) {
    return toggleNavigationMenu.value;
  } else {
    return true;
  }
});

const logoImageUrl = computed(() => {
  return `https://cdn.econnect.eu/media/logos/econnect${isDark.value ? '-white' : ''}.svg`;
});

const classes = computed(() => {
  return {
    'full-screen': toggleNavigationMenu,
    mobile: props.isMobile,
    closed: !showNavMenu.value
  };
});
</script>

<template>
  <div
    class="e-navigation"
    :class="classes"
    role="navigation"
    :aria-expanded="isMobile"
  >
    <div
      class="e-navigation-menu-header"
      role="none"
    >
      <e-hamburger
        :active="toggleNavigationMenu"
        @click="toggleEmitNavMenu"
      />

      <div
        v-if="router && isLogoVisible"
        class="e-logo"
        title="home"
        aria-label="home"
        @click="navigateTo('/')"
      >
        <e-image
          alt="HomePage"
          :src="logoImageUrl"
        />
      </div>
      <a
        v-else-if="isLogoVisible"
        class="e-logo"
        href="/"
        title="home"
        aria-label="home"
        @click="toggleNavMenu()"
      >
        <e-image
          alt="HomePage"
          :src="logoImageUrl"
        />
      </a>
    </div>

    <div
      class="e-navigation-menu-content"
      role="none"
    >
      <e-navigation-menu
        :menu="navigationMenu"
        :socials="socials"
        :is-mobile="isMobile"
        :route="route"
        :router="router"
        @toggle:nav-menu="toggleEmitNavMenu"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.e-navigation {
  position: absolute;
  width: 100%;
  z-index: 3000;
  background-color: var(--e-background);
  display: flex;
  flex-direction: column;

  .e-navigation-menu-header {
    display: flex;
    align-items: center;
    height: 100px;

    .e-hamburger {
      z-index: 6000;
    }

    .e-logo {
      margin-bottom: 6px;
      height: 50px;
      width: 122px;
      cursor: pointer;
    }
  }

  .e-navigation-menu-content {
    display: flex;
    flex-direction: column;
    height: calc(100% - 100px);
  }

  &.full-screen {
    height: 100vh;
    background-color: var(--e-white);
  }

  &.mobile {
    width: 100%;
    height: 100vh;
    overflow: hidden;

    .e-navigation-menu-header {
      position: absolute;
      background-color: var(--e-white);
      overflow-y: auto;
      z-index: 1;
      width: 100%;
    }

    .e-navigation-menu-content {
      position: absolute;
      display: block;
      width: 100%;
      overflow-y: scroll;
      overflow-x: hidden;
      top: 100px;
      bottom: 0;
    }
  }
}

@media only screen and (max-width: 1000px) {
  .e-navigation {
    .e-navigation-menu-header {
      position: static;
    }

    &.closed {
      flex-direction: row;
      height: 100px;
    }

    &:not(.closed) {
      width: 100%;
    }
  }
}

@media only screen and (min-width: 1000px) {
  .e-navigation {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: var(--e-white);
    padding-left: 25px;

    .e-navigation-menu-header {
      .e-hamburger {
        display: none;
      }
    }
  }
}
</style>