feat(gui-v2): add navigation to sidebar

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/nc-gui-v2/components/general/Social.vue

@@ -18,7 +18,6 @@ const isZhLang = $computed(() => locale.value.startsWith('zh'))
 </script>
 
 <template>
-  <div class="wrapper">
   <div v-if="isZhLang">
     <p class="caption grey--text block mb-3 text-center pt-2">Please share a word about us</p>
     <general-share
@@ -35,7 +34,7 @@ const isZhLang = $computed(() => locale.value.startsWith('zh'))
   </div>
 
   <template v-else>
-      <v-list density="compact">
+    <v-list>
       <div class="flex justify-between gap-1 w-full px-2">
         <MdiDiscord v-t="['e:community:discord']" class="icon text-[#7289DA]" @click="open('https://discord.gg/5RgZmkW')" />
         <div
@@ -55,12 +54,11 @@ const isZhLang = $computed(() => locale.value.startsWith('zh'))
       </div>
     </v-list>
   </template>
-  </div>
 </template>
 
 <style scoped>
 .icon {
-  @apply cursor-pointer text-4xl rounded-full p-2 bg-gray-100 shadow-md hover:(shadow-lg bg-gray-200) transition-color ease-in duration-100;
+  @apply cursor-pointer text-3xl rounded-full p-2 bg-gray-100 shadow-md hover:(shadow-lg bg-gray-200) transition-color ease-in duration-100;
 }
 
 .discourse {

packages/nc-gui-v2/pages/projects/index.vue

@@ -4,33 +4,37 @@ import MaterialSymbolsFormatListBulletedRounded from '~icons/material-symbols/fo
 import MaterialSymbolsGridView from '~icons/material-symbols/grid-view'
 import MdiPlus from '~icons/mdi/plus'
 import MdiDatabaseOutline from '~icons/mdi/database-outline'
-
-const route = useRoute()
-
-const { $api } = useNuxtApp()
-
-const response = await $api.project.list({})
-const projects = $ref(response.list)
-const activePage = $ref()
+import MdiFolderOutline from '~icons/mdi/folder-outline'
+import MdiAccountGroup from '~icons/mdi/account-group'
+import MdiClockOutline from '~icons/mdi/clock-outline'
+import MdiStar from '~icons/mdi/star'
 
 const navDrawerOptions = [
   {
     title: 'My NocoDB',
-    icon: 'mdi-folder-outline',
+    icon: MdiFolderOutline,
   },
   {
     title: 'Shared With Me',
-    icon: 'mdi-account-group',
+    icon: MdiAccountGroup,
   },
   {
     title: 'Recent',
-    icon: 'mdi-clock-outline',
+    icon: MdiClockOutline,
   },
   {
     title: 'Starred',
-    icon: 'mdi-star',
+    icon: MdiStar,
   },
 ]
+
+const route = useRoute()
+
+const { $api } = useNuxtApp()
+
+const response = await $api.project.list({})
+const projects = $ref(response.list)
+const activePage = $ref(navDrawerOptions[0].title)
 </script>
 
 <template>
@@ -38,7 +42,7 @@ const navDrawerOptions = [
     <template #sidebar>
       <v-navigation-drawer :border="0">
         <div class="flex flex-col h-full">
-          <div class="flex-1 flex flex-col gap-2 p-4">
+          <div class="flex p-4">
             <v-menu class="select-none">
               <template #activator="{ props }">
                 <div
@@ -66,10 +70,29 @@ const navDrawerOptions = [
                 </div>
               </v-list>
             </v-menu>
+          </div>
 
-            <div>
+          <div class="advance-menu flex-1">
+            <v-list class="flex flex-col gap-1" color="primary">
+              <!-- todo: v-list-item-group doesn't seem to work with vuetify 3 yet ... -->
+              <v-list-item
+                v-for="item in navDrawerOptions"
+                :key="item.title"
+                class="flex items-center gap-4 !rounded-r-lg"
+                :value="item.title"
+              >
+                <component :is="item.icon" />
 
-            </div>
+                <span
+                  class="font-semibold"
+                  :class="{
+                    'textColor--text text--lighten-2': item.title !== activePage,
+                  }"
+                >
+                  {{ item.title }}
+                </span>
+              </v-list-item>
+            </v-list>
           </div>
 
           <v-divider />
@@ -83,13 +106,9 @@ const navDrawerOptions = [
 
     <v-container class="flex-1 h-full">
       <div class="flex">
-        <div class="prose-xl p-2">
-          {{ $t('title.myProject') }}
-        </div>
-
-        <h2 class="display-1 ml-5 mb-7 font-weight-medium textColor--text text--lighten-2 flex-grow-1">
+        <div class="flex-1 prose-xl p-2">
           {{ activePage }}
-        </h2>
+        </div>
 
         <div class="self-end flex text-4xl mb-1">
           <MaterialSymbolsFormatListBulletedRounded