fix: header 수정(#30)

* chore: test * [bot] update files * chore: test * chore: body 스크롤 막기 * chore: test * chore: test * fix(project): ios 미지원 프로퍼티 수정 * [bot] update files Co-authored-by: GitHub Action <action@github.com>
Nexters · Oct 26, 2021 · dfa4c5c · dfa4c5c
1 parent 804b333
commit dfa4c5c
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 12 deletions.
diff --git a/components/header.vue b/components/header.vue
@@ -10,14 +10,17 @@
         <img class="text-logo" :src="txt_logo" alt="NEXTERS_TEXT_LOGO" />
       </nuxt-link>
       <div class="menu" @click="toggleMenu">
-        <img v-if="isMenuOpen" :src="ic_close" alt="ic_close" />
-        <img v-else :src="ic_menu" alt="ic_menu" />
+        <img :src="ic_menu" alt="ic_menu" />
       </div>
     </div>
     <div
       class="menu-items"
       :class="{ 'menu-close': !isMenuOpen, overlay: isMenuOpen }"
     >
+      <div class="menu" @click="toggleMenu">
+        <img v-if="isMenuOpen" :src="ic_close" alt="ic_close" />
+        <img v-else :src="ic_menu" alt="ic_menu" />
+      </div>
       <nuxt-link
         v-for="header in headers"
         :key="header.name"
@@ -122,14 +125,23 @@ nav {
     .menu-items {
       width: 100%;
       position: fixed;
-      top: 73px;
+      top: 0;
       left: 0;
       right: 0;
       bottom: 0;
-      padding-top: 32px;
       display: flex;
       flex-direction: column;
-      gap: 32px;
+      a {
+        margin-bottom: 32px;
+      }
+      .menu {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 73px;
+        align-self: flex-end;
+        padding-right: 16px;
+      }
     }
 
     .nav-header {

diff --git a/middleware/store.js b/middleware/store.js
@@ -1,3 +1,4 @@
 export default function ({ store }) {
   store.commit("init");
+  store.commit("project/init");
 }
diff --git a/pages/project/index.vue b/pages/project/index.vue
@@ -35,7 +35,7 @@
 
 <script>
 import { defineComponent } from "@nuxtjs/composition-api";
-import { mapActions, mapGetters } from "vuex";
+import { mapGetters } from "vuex";
 
 export default defineComponent({
   name: "Project",
@@ -65,13 +65,18 @@ export default defineComponent({
   computed: {
     ...mapGetters({
       project: "project/project",
-      showDetail: "project/showDetail",
+      showDetailFromStore: "project/showDetail",
     }),
+    showDetail: {
+      get() {
+        return this.showDetailFromStore;
+      },
+      set(value) {
+        return value;
+      },
+    },
   },
   methods: {
-    ...mapActions({
-      showDetail: "project/showDetail",
-    }),
     async onClickMore() {
       const projects = await this.$content("projects")
         .sortBy("idx", "desc")

diff --git a/store/index.js b/store/index.js
@@ -15,7 +15,6 @@ export const mutations = {
     } else {
       document.documentElement.style.getPropertyValue("--scroll-y");
       const { body } = document;
-      body.style.height = "100vh";
       body.style.overflowY = "hidden";
     }
     state.isMenuOpen = !state.isMenuOpen;

diff --git a/store/project.js b/store/project.js
@@ -14,7 +14,6 @@ export const mutations = {
     state.project = project;
     document.documentElement.style.getPropertyValue("--scroll-y");
     const { body } = document;
-    body.style.height = "100vh";
     body.style.overflowY = "hidden";
   },
   dismiss(state) {