From 496c5fa80b4cf191b605e4ef13c7aebc2a16bb7b Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Sun, 5 Nov 2023 17:58:43 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=8A=E3=83=93=E3=82=B2=E3=83=BC=E3=82=B7?=
 =?UTF-8?q?=E3=83=A7=E3=83=B3=E3=83=90=E3=83=BC=E3=82=92=E3=81=84=E3=81=84?=
 =?UTF-8?q?=E6=84=9F=E3=81=98=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                          | 47 ++++++++++++++++++++++++--
 src/components/Layout/PageHeader.vue | 50 ++++++++++++++++++++--------
 src/styles/z-index.scss              |  4 +++
 3 files changed, 84 insertions(+), 17 deletions(-)
 create mode 100644 src/styles/z-index.scss

diff --git a/src/App.vue b/src/App.vue
index 0324a142..34cb2db4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,12 +2,38 @@
 import NavigationBar from '/@/components/NavigationBar/NavigationBar.vue'
 import PageHeader from '/@/components/Layout/PageHeader.vue'
 import Loading from '/@/pages/Loading.vue'
+import { useResponsiveStore } from '/@/store/responsive'
+import { computed, ref, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const { isMobile } = storeToRefs(useResponsiveStore())
+
+const isOpenNavigationBar = ref(!isMobile.value)
+const showCover = computed(() => isMobile.value && isOpenNavigationBar.value)
+
+watch(
+  () => route.fullPath,
+  () => {
+    isOpenNavigationBar.value = false
+  }
+)
 </script>
 
 <template>
   <div :class="$style.container">
-    <page-header :class="$style.header" />
-    <navigation-bar :class="$style.navigationBar" />
+    <page-header
+      :class="$style.header"
+      :is-open-navigation-bar="isOpenNavigationBar"
+      @toggle-navigation-bar="isOpenNavigationBar = !isOpenNavigationBar"
+    />
+    <div
+      v-if="showCover"
+      :class="$style.navigationBarCover"
+      @click="isOpenNavigationBar = false"
+    />
+    <navigation-bar v-if="isOpenNavigationBar" :class="$style.navigationBar" />
     <div :class="$style.content">
       <router-view v-slot="{ Component }">
         <template v-if="Component">
@@ -39,8 +65,23 @@ import Loading from '/@/pages/Loading.vue'
 }
 
 @media (width <= 768px) {
+  .navigationBarCover {
+    position: absolute;
+    z-index: --z-index-navigationBarCover;
+    top: 5rem;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-color: $color-background-dim;
+    opacity: 0.5;
+  }
   .navigationBar {
-    display: none;
+    position: absolute;
+    z-index: --z-index-navigationBar;
+    top: 5rem;
+    left: 0;
+    height: 100%;
+    width: 260px;
   }
   .container {
     grid-template-columns: 1fr;
diff --git a/src/components/Layout/PageHeader.vue b/src/components/Layout/PageHeader.vue
index 6f2e2048..253f1e2d 100644
--- a/src/components/Layout/PageHeader.vue
+++ b/src/components/Layout/PageHeader.vue
@@ -1,23 +1,33 @@
+<script lang="ts" setup>
+import SearchInput from '/@/components/UI/SearchInput.vue'
+import Icon from '/@/components/UI/Icon.vue'
+import { storeToRefs } from 'pinia';
+import { useResponsiveStore } from '/@/store/responsive';
+
+interface Props {
+  isOpenNavigationBar: boolean
+}
+defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'toggleNavigationBar'): void
+}>()
+
+const { isMobile } = storeToRefs(useResponsiveStore())
+</script>
+
 <template>
   <div :class="$style.container">
-    <div>Logo</div>
+    <div :class="$style.leftContainer">
+      <button v-if="isMobile" @click="emit('toggleNavigationBar')">
+        <icon name="mdi:menu" />
+      </button>
+      <div>Logo</div>
+    </div>
     <search-input />
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-import SearchInput from '/@/components/UI/SearchInput.vue'
-
-export default defineComponent({
-  name: 'Header',
-  components: { SearchInput },
-  setup() {
-    return {}
-  }
-})
-</script>
-
 <style lang="scss" module>
 .container {
   display: flex;
@@ -27,4 +37,16 @@ export default defineComponent({
   align-items: center;
   border-bottom: solid 0.1rem $color-secondary;
 }
+
+.leftContainer {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+@media (width <= 768px) {
+  .container {
+    padding: 0 1rem;
+  }
+}
 </style>
diff --git a/src/styles/z-index.scss b/src/styles/z-index.scss
new file mode 100644
index 00000000..cbe0ccd6
--- /dev/null
+++ b/src/styles/z-index.scss
@@ -0,0 +1,4 @@
+:root {
+  --z-index-navigationBar: 40;
+  --z-index-navigationBarCover: 30;
+}