feat(gui-v2): add create new project button to sidebar

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

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

@@ -2,6 +2,8 @@
 import { navigateTo } from '#app'
 import MaterialSymbolsFormatListBulletedRounded from '~icons/material-symbols/format-list-bulleted-rounded'
 import MaterialSymbolsGridView from '~icons/material-symbols/grid-view'
+import MdiPlus from '~icons/mdi/plus'
+import MdiDatabaseOutline from '~icons/mdi/database-outline'
 
 const route = useRoute()
 
@@ -34,13 +36,41 @@ const navDrawerOptions = [
 <template>
   <NuxtLayout>
     <template #sidebar>
-      <v-navigation-drawer :permanent="true" width="300">
+      <v-navigation-drawer width="300">
         <div class="flex flex-col h-full">
-          <div class="flex-1 pt-8" />
-          <v-divider />
-          <!-- todo: implement extras component
-            <Extras class="pl-6" />
-          -->
+          <div class="flex-1 flex flex-col gap-2 p-4">
+            <v-menu>
+              <template #activator="{ props }">
+                <div
+                  class="mr-auto flex items-center gap-2 leading-8 cursor-pointer rounded-full border-1 border-gray-300 px-5 py-2 shadow-md prose-lg font-semibold hover:bg-gray-200/20"
+                  @click="props.onClick"
+                >
+                  <MdiPlus class="text-primary text-2xl" />
+                  {{ $t('title.newProj') }}
+                </div>
+              </template>
+              <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300 mt-2 ml-2">
+                <div
+                  class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
+                  @click="navigateTo('/projects/create')"
+                >
+                  <MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
+                  <div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
+                </div>
+                <div
+                  class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
+                  @click="navigateTo('/projects/create-external')"
+                >
+                  <MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
+                  <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
+                </div>
+              </v-list>
+            </v-menu>
+
+            <!-- todo: implement extras component
+              <Extras class="pl-6" />
+            -->
+          </div>
 
           <general-sponsors :nav="true" />
         </div>

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

@@ -127,11 +127,6 @@ const formatTitle = (title: string) =>
   @apply bottom-1 right-1 transform hover:(scale-150 text-gray-200) transition-all duration-100 ease;
 }
 
-.nc-project-title {
-  text-transform: capitalize;
-  text-align: center;
-}
-
 .nc-project-thumbnail {
   background-image: linear-gradient(#0002, #0002);
   opacity: 0.5;