fix bug with opening sidebar

TheBlackbird14 · May 28, 2024 · 9790468 · 9790468
1 parent faf6eee
commit 9790468
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/src/components/homeworkHeader.vue b/src/components/homeworkHeader.vue
@@ -17,9 +17,11 @@ const props = defineProps({
   }
 })
 
+const sidebarVisible = ref(false)
 const mobileWidth = ref(window.screen.width <= 700)
 
 function reload() {
+  sidebarVisible.value = false
   emit('reload')
 }
 </script>
@@ -58,10 +60,11 @@ function reload() {
     tabindex="-1"
     id="sidebar"
     aria-labelledby="sidebar"
+    :class="{ show: sidebarVisible }"
     data-bs-backdrop="true"
     data-bs-scroll="true"
   >
-    <Sidebar @reload="reload"></Sidebar>
+    <Sidebar @toggle="sidebarVisible = !sidebarVisible" @reload="reload"></Sidebar>
   </div>
 </template>
 
@@ -101,5 +104,4 @@ a {
     visibility: hidden;
   }
 }
-
 </style>
diff --git a/src/components/homeworkListItem.vue b/src/components/homeworkListItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {type PropType, ref} from 'vue'
+import { type PropType, ref } from 'vue'
 import type { homework } from '@/scripts/types/homework.interface'
 import { computed } from 'vue'
 import apiService from '@/scripts/api.service'
@@ -86,9 +86,12 @@ function deleteHomework() {
 <template>
   <div
     class="d-flex justify-content-between align-items-center mb-3 align-middle list-item"
-    :class="[ divClass, {'flex-column': mobileWidth}]"
+    :class="[divClass, { 'flex-column': mobileWidth }]"
   >
-    <div v-if="mobileWidth" class="d-flex flex-row justify-content-between align-items-center align-middle">
+    <div
+      v-if="mobileWidth"
+      class="d-flex flex-row justify-content-between align-items-center align-middle"
+    >
       <div class="p-2 col-sm-2">
         <h1>{{ homeworkEntry.subject }}</h1>
       </div>

diff --git a/src/components/sidebarComponent.vue b/src/components/sidebarComponent.vue
@@ -19,7 +19,7 @@ async function logout() {
         @click="emit('reload')"
         data-bs-toggle="offcanvas"
         data-bs-target="#sidebar"
-        style="font-size: 250%; cursor: pointer; color"
+        style="font-size: 250%; cursor: pointer"
       ></i>
     </div>