diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index 3ea437d489..b0297b8cd6 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -196,7 +196,7 @@ const hideSidebarOnClickOrTouchIfMobileMode = (event: MouseEvent | TouchEvent) =
   // event.stopPropagation()
   // event.preventDefault()
 
-  if (!isMobileMode.value || !isOpen.value) {
+  if (!isMobileMode.value) {
     return
   }
 
@@ -222,12 +222,11 @@ const hideSidebarOnClickOrTouchIfMobileMode = (event: MouseEvent | TouchEvent) =
   // console.log(sidebar.value?.contains(event.target as Node))
 
   // debugger
-  // if (event.target !== toggleSideBarButton.value && !toggleSideBarButton.value?.contains(event.target as Node)) {
-  // alert('now')
-  // toggle(false)
-  // }
+  if (event.target !== toggleSideBarButton.value && !toggleSideBarButton.value?.contains(event.target as Node)) {
+    // alert('now')
+    toggle(false)
+  }
 
-  toggle(!isOpen.value)
   // debugger
   // if (isMobileMode.value && isOpen.value && !event.target?.matchesSelector('.show-sidebar-button')) {
   // if (isMobileMode.value && isOpen.value && event.target !== toggleSideBarButton.value) {
@@ -239,12 +238,12 @@ onMounted(() => {
   toggle(false)
   toggleHasSidebar(true)
   // TODO: use useEventListener instead of onMounted and onBeforeUnmount
-  document.addEventListener('click', hideSidebarOnClickOrTouchIfMobileMode)
-  document.addEventListener('touchstart', hideSidebarOnClickOrTouchIfMobileMode)
+  // document.addEventListener('click', hideSidebarOnClickOrTouchIfMobileMode)
+  // document.addEventListener('touchstart', hideSidebarOnClickOrTouchIfMobileMode)
 })
 onBeforeUnmount(() => {
-  document.removeEventListener('click', hideSidebarOnClickOrTouchIfMobileMode)
-  document.removeEventListener('touchstart', hideSidebarOnClickOrTouchIfMobileMode)
+  // document.removeEventListener('click', hideSidebarOnClickOrTouchIfMobileMode)
+  // document.removeEventListener('touchstart', hideSidebarOnClickOrTouchIfMobileMode)
 })
 
 onBeforeUnmount(reset)
@@ -293,16 +292,14 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 })
 
 const FOO_ON_OPEN_CLICK = () => {
-  alert('FOO_ON_OPEN_CLICK')
   console.log('inside of FOO_ON_OPEN_CLICK')
-  toggle(!isOpen)
+  // toggle(!isOpen)
 }
 </script>
 
 <template>
   <NuxtLayout>
     <template #sidebar>
-      <div>isOpen: {{ isOpen }}</div>
       <a-layout-sider
         ref="sidebar"
         :collapsed="!isOpen"
@@ -347,6 +344,292 @@ const FOO_ON_OPEN_CLICK = () => {
             </a-tooltip>
           </a>
 
+          <a-dropdown
+            class="h-full min-w-0 flex-1"
+            :trigger="['click']"
+            placement="bottom"
+            overlay-class-name="nc-dropdown-project-menu"
+          >
+            <div
+              :style="{ width: isOpen ? 'calc(100% - 40px) pr-2' : '100%' }"
+              :class="[isOpen ? '' : 'justify-center']"
+              data-testid="nc-project-menu"
+              class="group cursor-pointer flex gap-1 items-center nc-project-menu overflow-hidden"
+            >
+              <template v-if="isOpen">
+                <a-tooltip v-if="project.title?.length > 12" placement="bottom">
+                  <div class="text-md font-semibold truncate">{{ project.title }}</div>
+                  <template #title>
+                    <div class="text-sm">{{ project.title }}</div>
+                  </template>
+                </a-tooltip>
+                <div v-else class="text-md font-semibold truncate capitalize">{{ project.title }}</div>
+
+                <MdiChevronDown class="min-w-[17px] group-hover:text-accent text-md" />
+              </template>
+
+              <template v-else>
+                <MdiFolder class="text-primary cursor-pointer transform hover:scale-105 text-2xl" />
+              </template>
+            </div>
+
+            <template #overlay>
+              <a-menu class="!ml-1 !w-[300px] !text-sm">
+                <a-menu-item-group>
+                  <template #title>
+                    <div class="group select-none flex items-center gap-4 py-1">
+                      <MdiFolder class="group-hover:text-accent text-xl" />
+
+                      <div class="flex flex-col">
+                        <div class="text-lg group-hover:(!text-primary) font-semibold capitalize">
+                          <GeneralTruncateText>{{ project.title }}</GeneralTruncateText>
+                        </div>
+
+                        <div v-if="!isSharedBase" class="flex items-center gap-1">
+                          <div class="group-hover:(!text-primary)">ID:</div>
+
+                          <div class="text-xs group-hover:text-accent truncate font-italic">{{ project.id }}</div>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                  <template v-if="!isSharedBase">
+                    <!-- Copy Project Info -->
+                    <a-menu-item key="copy">
+                      <div
+                        v-e="['c:navbar:user:copy-proj-info']"
+                        class="nc-project-menu-item group"
+                        @click.stop="copyProjectInfo"
+                      >
+                        <MdiContentCopy class="group-hover:text-accent" />
+                        {{ $t('activity.account.projInfo') }}
+                      </div>
+                    </a-menu-item>
+
+                    <a-menu-divider />
+
+                    <!-- Swagger: Rest APIs -->
+                    <a-menu-item key="api">
+                      <div
+                        v-if="isUIAllowed('apiDocs') && !isMobileMode"
+                        v-e="['e:api-docs']"
+                        class="nc-project-menu-item group"
+                        @click.stop="openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`, appInfo.ncSiteUrl)"
+                      >
+                        <MdiApi class="group-hover:text-accent" />
+                        {{ $t('activity.account.swagger') }}
+                      </div>
+                    </a-menu-item>
+
+                    <!-- Copy Auth Token -->
+                    <a-menu-item key="copy">
+                      <div
+                        v-if="!isMobileMode"
+                        v-e="['a:navbar:user:copy-auth-token']"
+                        class="nc-project-menu-item group"
+                        @click.stop="copyAuthToken"
+                      >
+                        <MdiScriptTextKeyOutline class="group-hover:text-accent" />
+                        {{ $t('activity.account.authToken') }}
+                      </div>
+                    </a-menu-item>
+
+                    <a-menu-divider />
+
+                    <!-- Team & Settings -->
+                    <a-menu-item key="teamAndSettings">
+                      <div
+                        v-if="isUIAllowed('settings') && !isMobileMode"
+                        v-e="['c:navdraw:project-settings']"
+                        class="nc-project-menu-item group"
+                        @click="toggleDialog(true, 'teamAndAuth')"
+                      >
+                        <MdiCog class="group-hover:text-accent" />
+                        {{ $t('title.teamAndSettings') }}
+                      </div>
+                    </a-menu-item>
+
+                    <!-- Mobile Mode -->
+                    <a-menu-item key="mobile-mode">
+                      <div
+                        v-e="['e:set-mobile-mode']"
+                        class="nc-project-menu-item group"
+                        @click.stop="setIsMobileMode(!isMobileMode)"
+                      >
+                        <MaterialSymbolsMobileFriendly class="group-hover:text-accent" />
+                        Toggle Mobile Mode
+                        <!-- {{ $t('activity.account.swagger') }} -->
+                        <!-- TODO: use i18n here -->
+                      </div>
+                    </a-menu-item>
+
+                    <!-- Theme -->
+                    <template v-if="isUIAllowed('projectTheme')">
+                      <a-sub-menu key="theme">
+                        <template #title>
+                          <div class="nc-project-menu-item group">
+                            <ClarityImageLine class="group-hover:text-accent" />
+                            {{ $t('activity.account.themes') }}
+
+                            <div class="flex-1" />
+
+                            <MaterialSymbolsChevronRightRounded
+                              class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
+                            />
+                          </div>
+                        </template>
+
+                        <template #expandIcon></template>
+
+                        <LazyGeneralColorPicker
+                          :model-value="theme.primaryColor"
+                          :colors="projectThemeColors"
+                          :row-size="9"
+                          :advanced="false"
+                          class="rounded-t"
+                          @input="handleThemeColor('swatch', $event)"
+                        />
+
+                        <!-- Custom Theme -->
+                        <a-sub-menu key="theme-2">
+                          <template #title>
+                            <div class="nc-project-menu-item group">
+                              {{ $t('labels.customTheme') }}
+
+                              <div class="flex-1" />
+
+                              <MaterialSymbolsChevronRightRounded
+                                class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
+                              />
+                            </div>
+                          </template>
+
+                          <!-- Primary Color -->
+                          <template #expandIcon></template>
+
+                          <a-sub-menu key="pick-primary">
+                            <template #title>
+                              <div class="nc-project-menu-item group">
+                                <ClarityColorPickerSolid class="group-hover:text-accent" />
+                                {{ $t('labels.primaryColor') }}
+                              </div>
+                            </template>
+
+                            <template #expandIcon></template>
+
+                            <LazyGeneralChromeWrapper @input="handleThemeColor('primary', $event)" />
+                          </a-sub-menu>
+
+                          <!-- Accent Color -->
+                          <a-sub-menu key="pick-accent">
+                            <template #title>
+                              <div class="nc-project-menu-item group">
+                                <ClarityColorPickerSolid class="group-hover:text-accent" />
+                                {{ $t('labels.accentColor') }}
+                              </div>
+                            </template>
+
+                            <template #expandIcon></template>
+
+                            <LazyGeneralChromeWrapper @input="handleThemeColor('accent', $event)" />
+                          </a-sub-menu>
+                        </a-sub-menu>
+                      </a-sub-menu>
+                    </template>
+
+                    <a-menu-divider />
+
+                    <!-- Preview As -->
+                    <a-sub-menu v-if="isUIAllowed('previewAs') && !isMobileMode" key="preview-as">
+                      <template #title>
+                        <div v-e="['c:navdraw:preview-as']" class="nc-project-menu-item group">
+                          <MdiFileEyeOutline class="group-hover:text-accent" />
+                          {{ $t('activity.previewAs') }}
+
+                          <div class="flex-1" />
+
+                          <MaterialSymbolsChevronRightRounded
+                            class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
+                          />
+                        </div>
+                      </template>
+
+                      <template #expandIcon></template>
+
+                      <LazyGeneralPreviewAs />
+                    </a-sub-menu>
+                  </template>
+                  <!-- Language -->
+                  <a-sub-menu
+                    key="language"
+                    class="lang-menu !py-0"
+                    popup-class-name="scrollbar-thin-dull min-w-50 max-h-90vh !overflow-auto"
+                  >
+                    <template #title>
+                      <div class="nc-project-menu-item group">
+                        <MaterialSymbolsTranslate class="group-hover:text-accent nc-language" />
+                        {{ $t('labels.language') }}
+                        <div class="flex items-center text-gray-400 text-xs">(Community Translated)</div>
+                        <div class="flex-1" />
+
+                        <MaterialSymbolsChevronRightRounded
+                          class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
+                        />
+                      </div>
+                    </template>
+
+                    <template #expandIcon></template>
+
+                    <LazyGeneralLanguageMenu />
+                  </a-sub-menu>
+
+                  <!-- Account -->
+                  <template v-if="signedIn && !isSharedBase">
+                    <a-sub-menu key="account">
+                      <template #title>
+                        <div class="nc-project-menu-item group">
+                          <MdiAccount class="group-hover:text-accent" />
+                          {{ $t('labels.account') }}
+                          <div class="flex-1" />
+
+                          <MaterialSymbolsChevronRightRounded
+                            class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
+                          />
+                        </div>
+                      </template>
+
+                      <template #expandIcon></template>
+
+                      <a-menu-item key="0" class="!rounded-t">
+                        <nuxt-link
+                          v-e="['c:navbar:user:email']"
+                          class="nc-project-menu-item group !no-underline"
+                          to="/account/users"
+                        >
+                          <MdiAt class="mt-1 group-hover:text-accent" />&nbsp;
+                          <div class="prose-sm group-hover:text-primary">
+                            <div>Account</div>
+                            <div class="text-xs text-gray-500">{{ email }}</div>
+                          </div>
+                        </nuxt-link>
+                      </a-menu-item>
+
+                      <a-menu-item key="1" class="!rounded-b">
+                        <div v-e="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
+                          <MdiLogout class="group-hover:(!text-accent)" />&nbsp;
+
+                          <span class="prose-sm nc-user-menu-signout">
+                            {{ $t('general.signOut') }}
+                          </span>
+                        </div>
+                      </a-menu-item>
+                    </a-sub-menu>
+                  </template>
+                </a-menu-item-group>
+              </a-menu>
+            </template>
+          </a-dropdown>
+
           <div
             ref="toggleSideBarButton"
             class="hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row flex items-center px-2"