From 686116c8241ec6392fc8ba6ffb5defbf96961c0f Mon Sep 17 00:00:00 2001
From: Daniel Spaude <daniel@spaude.de>
Date: Sun, 1 Jan 2023 19:56:41 +0100
Subject: [PATCH] WIP

---
 .../pages/[projectType]/[projectId]/index.vue | 309 +-----------------
 1 file changed, 13 insertions(+), 296 deletions(-)

diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index b0297b8cd6..3ea437d489 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) {
+  if (!isMobileMode.value || !isOpen.value) {
     return
   }
 
@@ -222,11 +222,12 @@ 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) {
@@ -238,12 +239,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)
@@ -292,14 +293,16 @@ 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"
@@ -344,292 +347,6 @@ 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"