Fix menu open

3 files changed, 17 insertions, 10 deletions

diff --git a/components/PostLink.vue b/components/PostLink.vue
index 2dc3dd9..54cd934 100644
--- a/components/PostLink.vue
+++ b/components/PostLink.vue
@@ -40,7 +40,7 @@ export default {
   margin: 20px;
   flex-basis: 410px;
   max-width: 410px;
-  height: 250px;
+  /* height: 250px; */
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
   background: #ffffff;
   text-align: left;
diff --git a/components/PostList/PurePostList.vue b/components/PostList/PurePostList.vue
index 07883ad..ace069f 100644
--- a/components/PostList/PurePostList.vue
+++ b/components/PostList/PurePostList.vue
@@ -49,7 +49,7 @@ export default {
 .post-list-container {
   display: flex;
   flex-wrap: wrap;
-  justify-content: initial;
+  justify-content: center;
 }
 
 @keyframes loading {
@@ -88,4 +88,4 @@ export default {
 .fade-in-enter-active {
   animation: fade-in 0.3s reverse;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/TheHeader.vue b/components/TheHeader.vue
index 431b945..4d17616 100644
--- a/components/TheHeader.vue
+++ b/components/TheHeader.vue
@@ -1,14 +1,21 @@
 <template>
-  <nav class="navbar" :class="{'menu-open': isMenuCollapsed}">
+  <nav class="navbar" :class="{ 'menu-open': showMenu }">
     <div class="title">
       <img v-if="logo" class="logo" :src="logo" alt="ZHR" />
-      <nuxt-link class="title-name" :class="{margin: logo}" to="/">{{ title }}</nuxt-link>
+      <nuxt-link class="title-name" :class="{ margin: logo }" to="/">{{
+        title
+      }}</nuxt-link>
     </div>
     <div class="space"></div>
     <button @click="toggleMenu" class="menu-toggler">Menu</button>
-    <ul class="links" :class="{show: this.isMenuCollapsed}" @click="toggleMenu">
+    <ul class="links" :class="{ show: this.showMenu }" @click="toggleMenu">
       <!-- Loop for generating links -->
-      <nav-link v-for="route in routes" :key="route.path" :link="route.path" :name="route.name" />
+      <nav-link
+        v-for="route in routes"
+        :key="route.path"
+        :link="route.path"
+        :name="route.name"
+      />
     </ul>
   </nav>
 </template>
@@ -38,12 +45,12 @@ export default {
   },
   data: function() {
     return {
-      isMenuCollapsed: true
+      showMenu: false
     }
   },
   methods: {
     toggleMenu() {
-      this.isMenuCollapsed = !this.isMenuCollapsed
+      this.showMenu = !this.showMenu
     }
   }
 }
@@ -180,4 +187,4 @@ export default {
     height: calc(100% - 80px);
   }
 }
-</style>
\ No newline at end of file
+</style>