small ui fixes

src/layouts/DefaultLayout.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { useRoute, useRouter } from 'vue-router'
 import { authClient } from '@/lib/auth-client.ts'
-import { computed, ref } from 'vue'
-import ProjectMenu from '@/components/ProjectMenu.vue'
+import { computed } from 'vue'
 import AppBreadcrumbs from '@/components/AppBreadcrumbs.vue'
 import BackButton from '@/components/BackButton.vue'
 import { useThemeMode } from '@/composables/useThemeMode.ts'
 import { THEME_ICONS } from '@/lib/theme.ts'
+import NavigationMenu from '@/components/NavigationMenu.vue'
 
 const router = useRouter()
 const route = useRoute()
@@ -17,24 +17,6 @@ const title = 'Ulitka'
 
 const isAuth = computed(() => !!session.value.data)
 
-const menu = ref([
-  {
-    title: 'Home',
-    value: 1,
-    props: { prependIcon: 'mdi-home', to: '/', requiresAuth: false },
-  },
-  {
-    title: 'issues',
-    value: 2,
-    props: { prependIcon: 'mdi-list-status', to: '/issues', requiresAuth: true },
-  },
-  {
-    title: 'games',
-    value: 3,
-    props: { prependIcon: 'mdi-view-dashboard', to: '/games', requiresAuth: false },
-  },
-])
-
 function goToSignIn() {
   router.push({ path: '/sign-in' })
 }
@@ -69,75 +51,47 @@ const fluid = computed(() => {
 <template>
   <v-layout>
     <v-app-bar density="compact" elevation="0" border rounded="0">
-      <template v-slot:prepend>
-        <v-menu>
-          <template v-slot:activator="{ props }">
-            <v-app-bar-nav-icon variant="text" density="comfortable" v-bind="props" />
-          </template>
-
-          <v-list class="mt-1" width="200" density="compact">
-            <template v-for="item in menu" :key="item.value">
-              <v-list-item v-if="!item.props.requiresAuth || isAuth === item.props.requiresAuth" :to="item.props.to">
-                <v-list-item-title class="d-flex align-center ga-4">
-                  <v-icon :icon="item.props.prependIcon" />
-                  <div>{{ item.title }}</div>
-                </v-list-item-title>
-              </v-list-item>
-            </template>
-          </v-list>
-        </v-menu>
-      </template>
-      <v-divider class="mx-1" vertical />
-      <v-app-bar-title>
+      <v-app-bar-title class="d-flex">
         <router-link class="text-decoration-none text-link font-weight-bold d-flex align-baseline ga-2" to="/">
           <v-icon icon="mdi-snail" />
           <div>{{ title }}</div>
         </router-link>
       </v-app-bar-title>
 
-      <project-menu v-if="session.data" />
-
-      <v-divider class="mx-2" vertical />
-
-      <div class="d-flex ga-4 align-center" v-if="session.data">
-        <div class="">
-          Hello,
-          <router-link class="text-decoration-none text-link text-capitalize" to="/profile">
-            {{ session?.data.user.name }}
-          </router-link>
-        </div>
-      </div>
       <div v-if="!session.data">
         <v-btn @click="goToSignIn">Sign In</v-btn>
         <v-btn @click="goToSignUp">Sign Up</v-btn>
       </div>
 
-      <v-divider class="mx-2" vertical />
-      <v-btn
-        :icon="THEME_ICONS[themeMode]"
-        :title="`Theme: ${themeMode}`"
-        density="comfortable"
-        @click="cycleThemeMode"
-      />
-      <v-divider class="mx-2" vertical />
+      <v-btn rounded="0" :icon="THEME_ICONS[themeMode]" :title="`Theme: ${themeMode}`" @click="cycleThemeMode" />
 
       <div v-if="session.data">
         <v-menu>
           <template v-slot:activator="{ props }">
-            <v-btn density="comfortable" class="mr-1" icon v-bind="props">
+            <v-btn rounded="0" icon v-bind="props" class="mr-4">
               <v-icon icon="mdi-account" />
             </v-btn>
           </template>
-          <v-list class="mt-1" width="200">
-            <v-list-item @click="goToProfile">
+          <v-list nav density="compact" class="pa-1">
+            <v-list-item density="compact">
+              <v-sheet border class="d-flex align-center ga-2 pa-2">
+                <v-avatar rounded="circle" color="primary">A</v-avatar>
+                <div>
+                  <div>{{ session.data.user.name }}</div>
+                  <div class="text-label-medium">{{ session.data.user.email }}</div>
+                </div>
+              </v-sheet>
+            </v-list-item>
+            <v-list-item rounded="0" density="compact" @click="goToProfile">
               <v-icon icon="mdi-account" />
               Profile
             </v-list-item>
-            <v-list-item @click="goToSettings">
+            <v-list-item rounded="0" density="compact" @click="goToSettings">
               <v-icon icon="mdi-cog" />
               settings
             </v-list-item>
-            <v-list-item @click="goToSignOut">
+            <v-divider class="my-1" />
+            <v-list-item rounded="0" density="compact" @click="goToSignOut">
               <v-icon icon="mdi-logout" />
               Sign Out
             </v-list-item>
@@ -145,6 +99,9 @@ const fluid = computed(() => {
         </v-menu>
       </div>
     </v-app-bar>
+
+    <navigation-menu :is-auth="isAuth" />
+
     <v-main>
       <v-container :fluid="fluid" class="layout-container">
         <div class="nav-row d-flex align-center ga-2 mb-2">