Responsive design

src/common/components/NavbarComponent.vue

@@ -1,15 +1,18 @@
 <template>
   <nav class="navbar">
-    <ul>
-      <li v-for="item in menu" :key="item.name">
+    <button class="menu-toggle" @click="toggleMenu">
+      Menü
+    </button>
+    <ul v-if="isMenuOpen || windowWidth > 768">
+      <li v-for="item in menu" :key="item.name" @click="toggleSubmenu(item.name)">
         <router-link :to="item.link" v-if="item.link">
           {{ item.name }}
         </router-link>
         <span v-if="!item.link">
-          {{  item.name }}
+          {{ item.name }}
         </span>
         <transition name="fade">
-          <div v-if="item.submenu && item.submenu.length" class="dropdown-content">
+          <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">
               {{ subitem.name }}
             </router-link>
@@ -21,29 +24,68 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue';
+import { useStore } from 'vuex';
 
 export default {
   name: 'NavbarComponent',
-  computed: {
-    ...mapState(['menuData']),
-    menu() {
-      return this.menuData.filter(item => {
+  setup() {
+    const store = useStore();
+    const isMenuOpen = ref(false);
+    const isSubmenuOpen = reactive({});
+    const windowWidth = ref(window.innerWidth);
+
+    const menu = computed(() => {
+      return store.state.menuData.filter(item => {
         if (!item.showInMenu) {
           return false;
         }
-        if (item.requiresAuth && !this.isLoggedIn) {
+        if (item.requiresAuth && !store.getters.isLoggedIn) {
           return false;
         }
         if (item.submenu) {
-          item.submenu = item.submenu.filter(subitem => subitem.showInMenu && (!subitem.requiresAuth || this.isLoggedIn));
+          item.submenu = item.submenu.filter(subitem => subitem.showInMenu && (!subitem.requiresAuth || store.getters.isLoggedIn));
         }
         return true;
       });
-    },
-    isLoggedIn() {
-      return this.$store.getters.isLoggedIn;
-    }
+    });
+
+    const toggleMenu = () => {
+      isMenuOpen.value = !isMenuOpen.value;
+    };
+
+    const toggleSubmenu = (itemName) => {
+      if (windowWidth.value <= 768) {
+        isSubmenuOpen[itemName] = !isSubmenuOpen[itemName];
+      }
+    };
+
+    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
+    };
   }
 };
 </script>
@@ -52,11 +94,23 @@ export default {
 .navbar {
   background-color: #9400ff;
   overflow: visible;
-  height: 47px;
+  min-height: 47px;
   display: flex;
+  flex-direction: column;
   width: 100%;
 }
 
+.menu-toggle {
+  background-color: #9400ff;
+  color: white;
+  border: none;
+  padding: 14px 20px;
+  text-align: center;
+  text-decoration: none;
+  display: none;
+  font-weight: bold;
+}
+
 .navbar ul {
   list-style-type: none;
   margin: 0;
@@ -126,4 +180,40 @@ export default {
   opacity: 0;
   visibility: hidden;
 }
+
+@media (max-width: 768px) {
+  .navbar {
+    flex-direction: column;
+  }
+
+  .navbar ul {
+    flex-direction: column;
+  }
+
+  .navbar li {
+    width: 100%;
+  }
+
+  .navbar a,
+  .navbar li > span {
+    text-align: left;
+    padding: 14px 20px;
+  }
+
+  .menu-toggle {
+    display: block;
+  }
+
+  .dropdown-content {
+    position: static;
+    box-shadow: none;
+    opacity: 1;
+    visibility: visible;
+    display: none;
+  }
+
+  .navbar li:hover .dropdown-content {
+    display: block;
+  }
+}
 </style>