Allow to resize left drawer as well

Author: g3force

frontend/src/App.vue

@@ -28,12 +28,18 @@ if (uiStore.darkMode !== undefined) {
 }
 
 let initialDrawerWidth = 0
-const resizeDrawer = (ev: any) => {
+const resizeRightDrawer = (ev: any) => {
   if (ev.isFirst === true) {
     initialDrawerWidth = uiStore.rightDrawerWidth
   }
   uiStore.rightDrawerWidth = initialDrawerWidth - ev.offset.x
 }
+const resizeLeftDrawer = (ev: any) => {
+  if (ev.isFirst === true) {
+    initialDrawerWidth = uiStore.leftDrawerWidth
+  }
+  uiStore.leftDrawerWidth = initialDrawerWidth + ev.offset.x
+}
 
 const dev = computed(() => {
   return import.meta.env.DEV
@@ -74,12 +80,14 @@ const dev = computed(() => {
       </q-tabs>
     </q-header>
 
-    <q-drawer v-model="uiStore.leftDrawerOpen" side="left" bordered>
+    <q-drawer v-model="uiStore.leftDrawerOpen" side="left" bordered :width="uiStore.leftDrawerWidth">
+      <div v-touch-pan.preserveCursor.prevent.mouse.horizontal="resizeLeftDrawer" class="q-left-drawer__resizer"></div>
       <ManualControlView/>
     </q-drawer>
 
     <q-drawer v-model="uiStore.rightDrawerOpen" side="right" bordered :width="uiStore.rightDrawerWidth">
-      <div v-touch-pan.preserveCursor.prevent.mouse.horizontal="resizeDrawer" class="q-drawer__resizer"></div>
+      <div v-touch-pan.preserveCursor.prevent.mouse.horizontal="resizeRightDrawer"
+           class="q-right-drawer__resizer"></div>
       <ProtocolList dense/>
     </q-drawer>
 
@@ -97,12 +105,21 @@ const dev = computed(() => {
 </template>
 
 <style>
-.q-drawer__resizer {
+.q-right-drawer__resizer {
   position: absolute;
   top: 0;
   bottom: 0;
   left: -2px;
   width: 4px;
   cursor: ew-resize;
 }
+
+.q-left-drawer__resizer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -2px;
+  width: 4px;
+  cursor: ew-resize;
+}
 </style>

frontend/src/store/uiState/index.ts

@@ -9,6 +9,7 @@ interface UiState {
   teamDetailsRedCardsExpanded: boolean,
   darkMode?: boolean,
   rightDrawerWidth: number,
+  leftDrawerWidth: number,
   leftDrawerOpen: boolean,
   rightDrawerOpen: boolean,
 }
@@ -22,6 +23,7 @@ export const useUiStateStore = defineStore('uiState', {
       teamDetailsRedCardsExpanded: true,
       darkMode: undefined,
       rightDrawerWidth: 400,
+      leftDrawerWidth: 300,
       leftDrawerOpen: false,
       rightDrawerOpen: false,
     }