miriamgemeinde/src/common/components/NavbarComponent.vue

<template>
  <nav class="navbar">
    <button
      class="menu-toggle"
      type="button"
      @click="toggleMenu"
      :aria-expanded="String(isMenuOpen)"
      aria-controls="main-menu"
    >
      <span class="menu-toggle__icon" aria-hidden="true">≡</span>
      <span>Menü</span>
    </button>
    <ul id="main-menu" v-if="isMenuOpen || windowWidth > 768">
      <li class="ekhnlogo">
        <img src="/images/facettenkreuz.png" class="facettenkreuz" alt="EKHN" />
      </li>
      <li v-for="item in menu" :key="item.name">
        <router-link :to="item.link" v-if="item.link" @click="closeMenu" class="nav-link">
          {{ item.name }}
        </router-link>
        <span
          v-if="!item.link"
          class="nav-link pointer"
          role="button"
          tabindex="0"
          @click="toggleSubmenu(item.name)"
          @keydown.enter.prevent="toggleSubmenu(item.name)"
          @keydown.space.prevent="toggleSubmenu(item.name)"
          :aria-expanded="String(!!isSubmenuOpen[item.name])"
        >
          {{ item.name }}
        </span>
        <transition name="fade">
          <div v-if="item.submenu && item.submenu.length && (isSubmenuOpen[item.name] || windowWidth > 768)"
            class="dropdown-content">
            <router-link v-for="subitem in item.submenu" :key="subitem.name" :to="subitem.link" @click="closeMenu">
              {{ subitem.name }}
            </router-link>
          </div>
        </transition>
      </li>
    </ul>
  </nav>
</template>

<script>
import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue';
import { useStore } from 'vuex';

export default {
  name: 'NavbarComponent',
  setup() {
    const store = useStore();
    const isMenuOpen = ref(false);
    const isSubmenuOpen = reactive({});
    const windowWidth = ref(window.innerWidth);

    const menu = computed(() => {
      return (store.state.menuData || []).map((item) => {
        const submenu = Array.isArray(item.submenu)
          ? item.submenu.filter(
            (subitem) => subitem.showInMenu && (!subitem.requiresAuth || store.getters.isLoggedIn)
          )
          : item.submenu;
        return { ...item, submenu };
      }).filter(item => {
        if (!item.showInMenu) {
          return false;
        }
        if (item.requiresAuth && !store.getters.isLoggedIn) {
          return false;
        }
        return true;
      });
    });

    const toggleMenu = () => {
      isMenuOpen.value = !isMenuOpen.value;
    };

    const toggleSubmenu = (itemName) => {
      if (windowWidth.value <= 768) {
        isSubmenuOpen[itemName] = !isSubmenuOpen[itemName];
      }
    };

    const closeMenu = () => {
      isMenuOpen.value = false;
      Object.keys(isSubmenuOpen).forEach(key => {
        isSubmenuOpen[key] = false;
      });
    }

    const handleResize = () => {
      windowWidth.value = window.innerWidth;
      if (windowWidth.value > 768) {
        isMenuOpen.value = false;
        Object.keys(isSubmenuOpen).forEach(key => {
          isSubmenuOpen[key] = false;
        });
      }
    };

    onMounted(() => {
      window.addEventListener('resize', handleResize);
    });

    onBeforeUnmount(() => {
      window.removeEventListener('resize', handleResize);
    });

    return {
      isMenuOpen,
      isSubmenuOpen,
      windowWidth,
      menu,
      toggleMenu,
      toggleSubmenu,
      closeMenu
    };
  }
};
</script>

<style scoped>
.navbar {
  background-color: var(--color-brand-primary);
  overflow: visible;
  min-height: 31px;
  display: inline-flex;
  flex-direction: column;
  width: calc(100% - (var(--space-3) * 2));
  margin: var(--space-1) var(--space-3) var(--space-3) var(--space-3);
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--color-brand-primary);
}

.menu-toggle {
  background-color: var(--color-brand-primary);
  color: #fff;
  border: none;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  text-decoration: none;
  display: none;
  font-weight: bold;
  align-items: center;
  gap: var(--space-2);
  border-radius: 4px;
}

.menu-toggle__icon {
  font-size: 1.25rem;
  line-height: 1;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.navbar li {
  position: relative;
}

.nav-link,
.navbar a,
.navbar li > span {
  display: block;
  color: white;
  text-align: center;
  padding: 10px 14px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 3px;
  line-height: 1.2;
}

.navbar a:hover,
.nav-link:hover {
  background-color: var(--color-brand-primary-hover);
}

.nav-link:active,
.menu-toggle:active {
  transform: translateY(1px);
}

.navbar a:focus-visible,
.menu-toggle:focus-visible {
  outline-color: #fff;
}

.navbar :deep(.router-link-exact-active) {
  background-color: rgba(255, 255, 255, 0.18);
}

.menu-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.dropdown-content {
  position: absolute;
  background-color: var(--color-brand-primary);
  min-width: 200px;
  z-index: 1;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-standard), visibility var(--transition-standard);
  box-shadow: var(--shadow-dropdown);
  border-radius: 4px;
  padding: var(--space-1);
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: var(--color-brand-primary-hover);
}

.navbar li:hover .dropdown-content {
  opacity: 1;
  visibility: visible;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--transition-standard), visibility var(--transition-standard);
}

.fade-enter,
.fade-leave-to

/* .fade-leave-active in <2.1.8 */
  {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
  }

  .navbar ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .navbar li {
    width: 100%;
  }

  .navbar a,
  .navbar li>span {
    text-align: left;
    padding: 14px 16px;
    border-radius: 0;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .dropdown-content {
    position: static;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    padding-left: var(--space-4);
    padding-bottom: var(--space-2);
  }

  .navbar :deep(.router-link-exact-active) {
    background-color: rgba(255, 255, 255, 0.14);
  }
}

.pointer {
  cursor: pointer;
}

.facettenkreuz {  
  width: 28px;
  height: 28px;
  display: block;
  margin: 0 var(--space-2);
}

.ekhnlogo {
  width: auto;
  display: flex;
  align-items: center;
  padding: 0;
}
</style>