Responsive design

src/AppComponent.vue

@@ -3,9 +3,12 @@
     <HeaderComponent />
     <main class="content-section">
       <div class="left-column">
+        <div class="right-column-overlay" v-if="showOverlay">
+          <router-view name="rightColumn" />
+        </div>
         <router-view />
       </div>
-      <div class="right-column">
+      <div class="right-column rightcolumnvisibility" v-if="showRightColumn">
         <router-view name="rightColumn" />
       </div>
     </main>
@@ -23,14 +26,38 @@ export default {
     HeaderComponent,
     FooterComponent,
   },
+  data() {
+    return {
+      windowWidth: window.innerWidth,
+    };
+  },
+  computed: {
+    showRightColumn() {
+      return this.windowWidth > 1200;
+    },
+    showOverlay() {
+      return this.windowWidth <= 1200 && this.windowWidth >= 768;
+    },
+  },
   mounted() {
+    window.addEventListener('resize', this.handleResize);
     document.title = 'Evangelische Miriamgemeinde Frankfurt';
-  }
+  },
+  beforeUnmount() { // eslint-disable-line vue/no-deprecated-destroyed-lifecycle
+    window.removeEventListener('resize', this.handleResize);
+  },
+  methods: {
+    handleResize() {
+      this.windowWidth = window.innerWidth;
+    },
+  },
 };
 </script>
 
 <style>
-html, body {
+/* eslint-disable */
+html,
+body {
   height: 100%;
   margin: 0;
   padding: 0;
@@ -53,19 +80,19 @@ html, body {
   overflow: hidden;
 }
 
-.left-column, .right-column {
-  flex: 1;
-  overflow-y: auto;
-}
-
 .left-column {
+  flex: 1;
+  min-width: 1000px;
   margin: 0.5em 0 0.5em 0.5em;
   padding-right: 0.5em;
   background-color: #ffffff;
+  overflow-y: auto;
 }
 
 .right-column {
+  flex: 1;
   background-color: #d9e2f3;
+  overflow-y: auto;
 }
 
 .right-column h2 {
@@ -80,13 +107,58 @@ html, body {
   height: auto;
 }
 
-@media (max-width: 768px) {
+.right-column-overlay {
+  max-height: 150px;
+  overflow-y: hidden;
+  margin-top: 10px;
+  background-color: #d9e2f3;
+}
+
+@media (max-width: 1400px) and (min-width: 1201px) {
+
+  .left-column,
+  .right-column {
+    flex: 0 0 50%;
+  }
+}
+
+@media (max-width: 1200px) {
   .content-section {
     flex-direction: column;
   }
 
-  .left-column, .right-column {
+  .left-column,
+  .right-column {
     padding: 10px;
   }
+
+  .rightcolumnvisibility {
+    display: none;
+  }
 }
+
+@media (max-width: 767px) {
+  .content-section {
+    flex-direction: column;
+  }
+
+  .left-column,
+  .right-column {
+    padding: 10px;
+  }
+
+  .rightcolumnvisibility {
+    display: none;
+  }
+
+  .right-column-overlay {
+    display: block;
+  }
+}
+
+.right-column-overlay > .right-column > img {
+  max-height: 130px;
+  margin: 0;
+}
+/* eslint-enable */
 </style>

src/axios.js

@@ -3,6 +3,7 @@ import store from './store';
 import router from './router';
 
 axios.defaults.baseURL = process.env.VUE_APP_BACKEND_URL;
+console.log(process.env.VUE_APP_BACKEND_URL);
 
 axios.interceptors.request.use(
   config => {

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>