Merge pull request #1203 from Giskard-AI/feature/gsk-1250-ui-sidebar-disappears-on-narrow-layout

Fixed left navigation drawer disappearing on small screens

Author: kevinmessiaen

frontend/src/views/main/Main.vue

@@ -1,15 +1,15 @@
 <template>
   <v-main class="fill-height vertical-container">
-    <v-navigation-drawer fixed app persistent class="background" mobile-breakpoint="sm" width="75" color="primaryLight">
+    <v-navigation-drawer fixed app permanent class='background' width='75' color='primaryLight'>
       <v-layout column fill-height>
-        <v-list subheader class="align-center" @click="resetStates">
-          <v-list-item to="/" @click.stop="() => {
+        <v-list subheader class='align-center' @click='resetStates'>
+          <v-list-item to='/' @click.stop='() => {
             projectStore.setCurrentProjectId(null);
-          }">
+          }'>
             <v-list-item-content>
-              <div class="align-center text-center">
-                <img src="@/assets/logo_v2.png" alt="Giskard icon" width="45px" />
-                <span class="caption">Projects</span>
+              <div class='align-center text-center'>
+                <img src='@/assets/logo_v2.png' alt='Giskard icon' width='45px' />
+                <span class='caption'>Projects</span>
               </div>
             </v-list-item-content>
           </v-list-item>
@@ -125,15 +125,15 @@
 </template>
 
 <script lang="ts" setup>
-import { useUserStore } from "@/stores/user";
-import { useMainStore } from "@/stores/main";
-import { useProjectStore } from "@/stores/project";
-import { useDebuggingSessionsStore } from "@/stores/debugging-sessions";
-import { useTestSuitesStore } from "@/stores/test-suites";
-import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { useUserStore } from '@/stores/user';
+import { useMainStore } from '@/stores/main';
+import { useProjectStore } from '@/stores/project';
+import { useDebuggingSessionsStore } from '@/stores/debugging-sessions';
+import { useTestSuitesStore } from '@/stores/test-suites';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router/composables';
-import moment from "moment/moment";
-import { state, client } from "@/socket";
+import moment from 'moment/moment';
+import { state, client } from '@/socket';
 
 const route = useRoute();
 const mainStore = useMainStore();