Merge pull request #401 from traPtitech/fix/sidebar_design

サイドバーがヘッダーを覆うように修正
traPtitech · Dec 3, 2024 · d12632e · d12632e
2 parents 9653926 + d035aa4
commit d12632e
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -36,6 +36,7 @@ watch([() => route.fullPath, isMobile], () => {
     />
     <navigation-bar
       v-if="isOpenNavigationBar"
+      v-model="isOpenNavigationBar"
       :class="$style.navigationBar"
     />
     <div :class="$style.content">
@@ -72,7 +73,6 @@ watch([() => route.fullPath, isMobile], () => {
   .navigationBarCover {
     position: absolute;
     z-index: $z-index-navigationBarCover;
-    top: 5rem;
     left: 0;
     height: 100%;
     width: 100%;
@@ -82,7 +82,6 @@ watch([() => route.fullPath, isMobile], () => {
   .navigationBar {
     position: absolute;
     z-index: $z-index-navigationBar;
-    top: 5rem;
     left: 0;
     height: 100%;
     width: 260px;

diff --git a/src/components/NavigationBar/NavigationBar.vue b/src/components/NavigationBar/NavigationBar.vue
@@ -1,10 +1,27 @@
 <script lang="ts" setup>
+import { defineModel } from 'vue'
 import NavigationLinks from './NavigationLinks.vue'
+import { useResponsiveStore } from '/@/store/responsive'
 import NavigationBarFooter from './NavigationBarFooter.vue'
+import Icon from '../UI/Icon.vue'
+import { storeToRefs } from 'pinia'
+
+const isSidebarOpen = defineModel<boolean>({ required: true })
+const { isMobile } = storeToRefs(useResponsiveStore())
 </script>
 
 <template>
   <nav :class="$style.container">
+    <button
+      v-if="isMobile"
+      style="width: fit-content"
+      @click="isSidebarOpen = false"
+    >
+      <div :class="$style.closeContainer">
+        <icon name="mdi:chevron-left" />
+        <p>閉じる</p>
+      </div>
+    </button>
     <navigation-links />
     <navigation-bar-footer />
   </nav>
@@ -14,8 +31,17 @@ import NavigationBarFooter from './NavigationBarFooter.vue'
 .container {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  // justify-content: space-between;
   background-color: $color-background-dim;
   padding: 1rem 0;
+  gap: 1rem;
+}
+.closeContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  gap: 16px;
+  color: $color-secondary;
 }
 </style>
diff --git a/src/components/NavigationBar/NavigationLinks.vue b/src/components/NavigationBar/NavigationLinks.vue
@@ -17,6 +17,7 @@ import { routes } from '/@/lib/routeInfo'
 <style lang="scss" module>
 .list {
   list-style: none;
+  flex-grow: 1;
 
   li {
     margin: 0.5rem 0;