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,49 +18,47 @@ 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
-        class="flex justify-center mb-2"
-        url="https://github.com/nocodb/nocodb"
-        :social-medias="['renren', 'douban', 'weibo', 'wechat']"
-      />
+  <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
+      class="flex justify-center mb-2"
+      url="https://github.com/nocodb/nocodb"
+      :social-medias="['renren', 'douban', 'weibo', 'wechat']"
+    />
 
-      <v-divider />
+    <v-divider />
 
-      <div class="text-center caption grey--text mt-3 mb-1">
-        Built with Vue JS<br /><img src="vue.svg" class="vue-icon mt-1 mb-n1" alt="vue.js" width="30" />
-      </div>
+    <div class="text-center caption grey--text mt-3 mb-1">
+      Built with Vue JS<br /><img src="vue.svg" class="vue-icon mt-1 mb-n1" alt="vue.js" width="30" />
     </div>
+  </div>
 
-    <template v-else>
-      <v-list density="compact">
-        <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
-            v-t="['e:community:discourse']"
-            class="icon flex items-center justify-center min-w-[43px]"
-            @click="open('https://community.nocodb.com/')"
-          >
-            <div class="discourse" />
-          </div>
-          <MdiReddit v-t="['e:community:reddit']" class="icon text-[#FF4600]" @click="open('https://www.reddit.com/r/NocoDB/')" />
-          <MdiTwitter v-t="['e:community:twitter']" class="icon text-[#1DA1F2]" @click="open('https://twitter.com/NocoDB')" />
-          <MdiCalendarMonth
-            v-t="['e:community:book-demo']"
-            class="icon text-green-500"
-            @click="open('https://calendly.com/nocodb-meeting')"
-          />
+  <template v-else>
+    <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
+          v-t="['e:community:discourse']"
+          class="icon flex items-center justify-center min-w-[43px]"
+          @click="open('https://community.nocodb.com/')"
+        >
+          <div class="discourse" />
         </div>
-      </v-list>
-    </template>
-  </div>
+        <MdiReddit v-t="['e:community:reddit']" class="icon text-[#FF4600]" @click="open('https://www.reddit.com/r/NocoDB/')" />
+        <MdiTwitter v-t="['e:community:twitter']" class="icon text-[#1DA1F2]" @click="open('https://twitter.com/NocoDB')" />
+        <MdiCalendarMonth
+          v-t="['e:community:book-demo']"
+          class="icon text-green-500"
+          @click="open('https://calendly.com/nocodb-meeting')"
+        />
+      </div>
+    </v-list>
+  </template>
 </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