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>