From d5cb1595106802c598f31fbd8d701c182e14d3c6 Mon Sep 17 00:00:00 2001
From: ErrorSyntax1 <ken522.king@gmail.com>
Date: Tue, 3 Dec 2024 14:07:48 +0900
Subject: [PATCH 1/4] =?UTF-8?q?=E3=82=B5=E3=82=A4=E3=83=89=E3=83=90?=
 =?UTF-8?q?=E3=83=BC=E3=81=8C=E3=83=98=E3=83=83=E3=83=80=E3=83=BC=E3=82=92?=
 =?UTF-8?q?=E8=A6=86=E3=81=86=E3=82=88=E3=81=86=E3=81=AB=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  3 +--
 .../NavigationBar/NavigationBar.vue           | 24 ++++++++++++++++++-
 .../NavigationBar/NavigationLinks.vue         |  1 +
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 92f5f55a..cdbbca65 100644
--- 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
index 54826463..07718785 100644
--- a/src/components/NavigationBar/NavigationBar.vue
+++ b/src/components/NavigationBar/NavigationBar.vue
@@ -1,10 +1,23 @@
 <script lang="ts" setup>
+import {defineModel} from 'vue'
 import NavigationLinks from './NavigationLinks.vue'
 import NavigationBarFooter from './NavigationBarFooter.vue'
+import Icon from '../UI/Icon.vue';
+
+const a = defineModel<boolean>({required: true})
 </script>
 
 <template>
   <nav :class="$style.container">
+    <button
+      style="width: fit-content;"
+      @click="a=false"
+    >
+      <div :class="$style.closeContainer">
+        <icon name="mdi:chevron-left" />
+        <p>閉じる</p>
+      </div>
+    </button>
     <navigation-links />
     <navigation-bar-footer />
   </nav>
@@ -14,8 +27,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
index 20641ba3..ff12b419 100644
--- 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;

From b12035a185334426094fff83c21284d1362ac691 Mon Sep 17 00:00:00 2001
From: ErrorSyntax1 <ken522.king@gmail.com>
Date: Tue, 3 Dec 2024 14:11:09 +0900
Subject: [PATCH 2/4] =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=BC=E3=83=9E?=
 =?UTF-8?q?=E3=83=83=E3=83=88=E3=82=92=E9=81=A9=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NavigationBar/NavigationBar.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/NavigationBar/NavigationBar.vue b/src/components/NavigationBar/NavigationBar.vue
index 07718785..4a602848 100644
--- a/src/components/NavigationBar/NavigationBar.vue
+++ b/src/components/NavigationBar/NavigationBar.vue
@@ -1,17 +1,17 @@
 <script lang="ts" setup>
-import {defineModel} from 'vue'
+import { defineModel } from 'vue'
 import NavigationLinks from './NavigationLinks.vue'
 import NavigationBarFooter from './NavigationBarFooter.vue'
-import Icon from '../UI/Icon.vue';
+import Icon from '../UI/Icon.vue'
 
-const a = defineModel<boolean>({required: true})
+const a = defineModel<boolean>({ required: true })
 </script>
 
 <template>
   <nav :class="$style.container">
     <button
-      style="width: fit-content;"
-      @click="a=false"
+      style="width: fit-content"
+      @click="a = false"
     >
       <div :class="$style.closeContainer">
         <icon name="mdi:chevron-left" />
@@ -32,7 +32,7 @@ const a = defineModel<boolean>({required: true})
   padding: 1rem 0;
   gap: 1rem;
 }
-.closeContainer{
+.closeContainer {
   display: flex;
   align-items: center;
   justify-content: center;

From 9c16bee5f8edcddc7370a7204ec46ce53f937801 Mon Sep 17 00:00:00 2001
From: ErrorSyntax1 <ken522.king@gmail.com>
Date: Tue, 3 Dec 2024 14:16:15 +0900
Subject: [PATCH 3/4] =?UTF-8?q?=E5=A4=89=E6=95=B0=E5=90=8D=E3=81=AE?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NavigationBar/NavigationBar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/NavigationBar/NavigationBar.vue b/src/components/NavigationBar/NavigationBar.vue
index 4a602848..85fdee09 100644
--- a/src/components/NavigationBar/NavigationBar.vue
+++ b/src/components/NavigationBar/NavigationBar.vue
@@ -4,14 +4,14 @@ import NavigationLinks from './NavigationLinks.vue'
 import NavigationBarFooter from './NavigationBarFooter.vue'
 import Icon from '../UI/Icon.vue'
 
-const a = defineModel<boolean>({ required: true })
+const isSidebarOpen = defineModel<boolean>({ required: true })
 </script>
 
 <template>
   <nav :class="$style.container">
     <button
       style="width: fit-content"
-      @click="a = false"
+      @click="isSidebarOpen = false"
     >
       <div :class="$style.closeContainer">
         <icon name="mdi:chevron-left" />

From d035aa4e32a53c2956d47bdc43b2cc77acb9d620 Mon Sep 17 00:00:00 2001
From: ErrorSyntax1 <ken522.king@gmail.com>
Date: Tue, 3 Dec 2024 14:24:55 +0900
Subject: [PATCH 4/4] =?UTF-8?q?PC=E7=94=BB=E9=9D=A2=E3=81=A7=E9=96=89?=
 =?UTF-8?q?=E3=81=98=E3=82=8B=E3=82=92=E8=A1=A8=E7=A4=BA=E3=81=97=E3=81=AA?=
 =?UTF-8?q?=E3=81=84=E3=82=88=E3=81=86=E3=81=AB=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NavigationBar/NavigationBar.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/NavigationBar/NavigationBar.vue b/src/components/NavigationBar/NavigationBar.vue
index 85fdee09..8965ce91 100644
--- a/src/components/NavigationBar/NavigationBar.vue
+++ b/src/components/NavigationBar/NavigationBar.vue
@@ -1,15 +1,19 @@
 <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"
     >