Left Drawer Updates

src/layouts/MainLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-layout view="lHh Lpr lFf">
+  <q-layout view="hHh Lpr lFf">
     <q-header elevated>
       <q-toolbar>
         <q-btn
@@ -12,22 +12,12 @@
         />
 
         <q-toolbar-title> OYS Borrow a Boat </q-toolbar-title>
-        <div v-if="loggedInUser">Logged in as: {{ loggedInUser.name }}</div>
+        <div v-if="loggedInUser">{{ loggedInUser.name }}</div>
         <q-btn flat round dense icon="logout" @click="logout" />
       </q-toolbar>
     </q-header>
 
-    <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
-      <q-list>
-        <q-item-label header> Essential Links </q-item-label>
-
-        <EssentialLink
-          v-for="link in linksList"
-          :key="link.title"
-          v-bind="link"
-        />
-      </q-list>
-    </q-drawer>
+    <LeftDrawer :drawer="leftDrawerOpen" @drawer-toggle="toggleLeftDrawer" />
 
     <q-page-container>
       <router-view />
@@ -36,21 +26,11 @@
 </template>
 
 <script setup lang="ts">
-import EssentialLink from 'components/EssentialLink.vue';
-import type { Models } from 'appwrite';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 import { useAuthStore } from 'src/stores/auth';
-
-const linksList = [
-  {
-    title: 'Docs',
-    caption: 'quasar.dev',
-    icon: 'school',
-    link: 'https://quasar.dev',
-  },
-];
+import LeftDrawer from 'components/LeftDrawer.vue';
 
 const q = useQuasar();
 const leftDrawerOpen = ref(false);