ナビゲーションバーをいい感じに

traPtitech · Nov 5, 2023 · 496c5fa · 496c5fa
1 parent 06e939e
commit 496c5fa
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 17 deletions.
diff --git 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
@@ -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
@@ -0,0 +1,4 @@
+:root {
+  --z-index-navigationBar: 40;
+  --z-index-navigationBarCover: 30;
+}