feat(gui-v2): add dropdown to projects icon in sidebar

packages/nc-gui-v2/app.vue

@@ -45,9 +45,9 @@ const logout = () => {
         </div>
 
         <template v-if="signedIn" #overlay>
-          <a-menu class="ml-2 !py-0 nc-user-menu min-w-32 dark:(!bg-gray-800) leading-8 !rounded">
+          <a-menu class="ml-2 !py-0 min-w-32 leading-8 !rounded">
             <a-menu-item-group title="User Settings">
-              <a-menu-item key="0" class="!rounded-t">
+              <a-menu-item key="email" class="!rounded-t">
                 <nuxt-link v-t="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user">
                   <MdiAt class="mt-1 group-hover:text-success" />
                   &nbsp;
@@ -57,7 +57,7 @@ const logout = () => {
 
               <a-menu-divider class="!m-0" />
 
-              <a-menu-item key="1" class="!rounded-b">
+              <a-menu-item key="signout" class="!rounded-b">
                 <div v-t="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="logout">
                   <MdiLogout class="dark:text-white group-hover:(!text-red-500)" />&nbsp;
                   <span class="prose font-semibold text-gray-500 group-hover:text-black nc-user-menu-signout">
@@ -71,13 +71,45 @@ const logout = () => {
       </a-dropdown>
 
       <div id="sidebar" ref="sidebar" class="text-white flex-auto flex flex-col items-center w-full">
-        <a-tooltip placement="right">
+        <a-dropdown placement="right">
-          <template #title>My Projects</template>
-
           <div :class="[route.name === 'index' ? 'active' : '']" class="nc-sidebar-left-item" @click="navigateTo('/')">
             <MdiFolder class="cursor-pointer transform hover:scale-105 text-2xl" />
           </div>
-        </a-tooltip>
+
+          <template #overlay>
+            <a-menu class="mt-6 select-none !py-0 min-w-32 leading-8 !rounded">
+              <a-menu-item-group>
+                <template #title>
+                  <span class="cursor-pointer prose-sm text-gray-500 hover:text-primary" @click="navigateTo('/')">
+                    {{ $t('objects.projects') }}
+                  </span>
+                </template>
+
+                <a-menu-item class="active:(ring ring-pink-500)">
+                  <div
+                    v-t="['c:project:create:xcdb']"
+                    class="group flex items-center gap-2 py-2 hover:text-primary"
+                    @click="navigateTo('/project/create')"
+                  >
+                    <MdiPlus class="text-lg group-hover:text-pink-500" />
+                    {{ $t('activity.createProject') }}
+                  </div>
+                </a-menu-item>
+
+                <a-menu-item class="rounded-b active:(ring ring-pink-500)">
+                  <div
+                    v-t="['c:project:create:extdb']"
+                    class="group flex items-center gap-2 py-2 hover:text-primary"
+                    @click="navigateTo('/project/create-external')"
+                  >
+                    <MdiDatabaseOutline class="text-lg group-hover:text-pink-500" />
+                    <div v-html="$t('activity.createProjectExtended.extDB')" />
+                  </div>
+                </a-menu-item>
+              </a-menu-item-group>
+            </a-menu>
+          </template>
+        </a-dropdown>
 
         <a-tooltip placement="right">
           <template v-if="project" #title>{{ project.title }}</template>

packages/nc-gui-v2/components.d.ts

@@ -76,6 +76,7 @@ declare module '@vue/runtime-core' {
     MdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     MdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
     MdiDatabase: typeof import('~icons/mdi/database')['default']
+    MdiDatabaseOutline: typeof import('~icons/mdi/database-outline')['default']
     MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
     MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
     MdiDrag: typeof import('~icons/mdi/drag')['default']