fix: menu

pages/dashboard.vue

@@ -1,7 +1,10 @@
 <template>
   <v-app full-height>
-    <v-navigation-drawer>
-      <v-img src="/logo.jpg" height="75" class="my-6" />
+    <v-navigation-drawer
+      v-model="drawer"
+      :location="mdAndDown ? 'bottom' : undefined"
+    >
+      <v-img v-if="!mdAndDown" src="/logo.jpg" height="75" class="my-6" />
 
       <v-list color="primary" lines="two">
         <v-list-item
@@ -15,6 +18,12 @@
 
       <template #append>
         <v-list lines="two">
+          <v-list-item
+            v-if="user"
+            :title="`${user.first_name} ${user.last_name}`"
+            :subtitle="user.email"
+            prepend-icon="mdi-account"
+          />
           <v-list-item
             @click="logOut"
             title="Log out"
@@ -27,14 +36,16 @@
 
     <v-app-bar v-if="mdAndDown" elevation="2">
       <template #prepend>
-        <v-img src="/logo.jpg" width="75" class="ml-3" />
+        <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer" />
       </template>
 
+      <v-img src="/logo.jpg" height="50" />
+
       <template #append>
         <v-btn
           @click="logOut"
           class="mr-3"
-          variant="tonal"
+          variant="text"
           color="error"
           icon="mdi-logout"
         />
@@ -43,13 +54,6 @@
 
     <v-main>
       <router-view />
-
-      <v-bottom-navigation :active="mdAndDown" color="primary" elevation="2">
-        <v-btn v-for="(item, index) in menu" :key="index" :to="item.to">
-          <v-icon :icon="item.icon" />
-          <span v-text="item.title" />
-        </v-btn>
-      </v-bottom-navigation>
     </v-main>
   </v-app>
 </template>
@@ -62,9 +66,11 @@ definePageMeta({
 
 const { mdAndDown } = useDisplay();
 const { logout } = useDirectusAuth();
-
+const user = useDirectusUser();
 const tags = usePortalTags();
 
+const drawer = ref(false);
+
 const interestMenu = [
   {
     to: "/dashboard/interest-eoi-queue",