feat(gui-v2): add flipping card to sidebar

packages/nc-gui-v2/components/smartsheet/Sidebar.vue

@@ -22,6 +22,7 @@ import MdiTrashCan from '~icons/mdi/trash-can'
 import MdiContentCopy from '~icons/mdi/content-copy'
 import MdiXml from '~icons/mdi/xml'
 import MdiHook from '~icons/mdi/hook'
+import MdiHeartsCard from '~icons/mdi/cards-heart'
 
 const meta = inject(MetaInj, ref())
 
@@ -274,8 +275,7 @@ function onApiSnippet() {
 
 <template>
   <a-layout-sider class="shadow" :width="toggleDrawer ? 0 : 250">
-    <div class="flex flex-col h-full">
-      <a-menu class="flex-1" :selected-keys="selected">
+    <a-menu class="h-full relative" :selected-keys="selected">
       <h3 class="pt-3 px-3 text-xs font-semibold">{{ $t('objects.views') }}</h3>
 
       <a-menu-item
@@ -403,15 +403,36 @@ function onApiSnippet() {
         </button>
       </div>
 
-        <general-flipping-card class="my-4 h-[250px] w-[250px]">
+      <general-flipping-card class="my-4 h-[250px] w-[250px]" :triggers="['click', { duration: 15000 }]">
         <template #front>
+          <div class="flex h-full w-full gap-6 flex-col">
             <general-social />
 
-            <a v-t="['e:hiring']" href="https://angel.co/company/nocodb" target="_blank"> 🚀 We are Hiring! 🚀 </a>
+            <div>
+              <a
+                v-t="['e:hiring']"
+                class="p-4 bg-primary/75 rounded accent-pink-500 shadow bordered border-primary text-white"
+                href="https://angel.co/company/nocodb"
+                target="_blank"
+              >
+                🚀 We are Hiring! 🚀
+              </a>
+            </div>
+          </div>
+        </template>
+
+        <template #back>
+          <a
+            href="https://github.com/sponsors/nocodb"
+            target="_blank"
+            class="flex items-center gap-2 w-full mx-3 p-4 rounded bordered !bg-primary text-white transform translate-x-4 hover:translate-x-0 transition duration-150 ease"
+          >
+            <MdiHeartsCard class="text-red-500" />
+            {{ $t('activity.sponsorUs') }}
+          </a>
         </template>
       </general-flipping-card>
     </a-menu>
-    </div>
 
     <DlgViewCreate v-if="views" v-model="modalOpen" :title="viewCreateTitle" :type="viewCreateType" @created="onCreate" />
   </a-layout-sider>