From 39f31d759e317c849d83613c32e40721ee0971ce Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 6 Jul 2022 18:51:13 +0200
Subject: [PATCH] feat(gui-v2): add menu to default layout

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/nc-gui-v2/layouts/default.vue | 158 +++++--------------------
 1 file changed, 27 insertions(+), 131 deletions(-)

diff --git a/packages/nc-gui-v2/layouts/default.vue b/packages/nc-gui-v2/layouts/default.vue
index 9f56380109..e30da7aa20 100644
--- a/packages/nc-gui-v2/layouts/default.vue
+++ b/packages/nc-gui-v2/layouts/default.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
 import { navigateTo } from '#app'
+import MdiAt from '~icons/mdi/at'
+import MdiLogout from '~icons/mdi/logout'
+import MdiDotsVertical from '~icons/mdi/dots-vertical'
 
 const route = useRoute()
+const { $state } = useNuxtApp()
 
 const openDiscord = () => {
   //   shell.openExternal('https://discord.gg/5RgZmkW')
@@ -43,148 +47,40 @@ export default {
            -->
         </div>
 
-        <!-- todo: implement isDashboard
-        <div v-if="isDashboard" class="text-capitalize text-center title" style="flex: 1">
-          {{ $store.getters['project/GtrProjectName'] }}
-        </div>
-        -->
-
-        <div style="flex: 1" class="d-flex justify-end">
-          <v-toolbar-items class="hidden-sm-and-down nc-topright-menu">
+        <div class="flex justify-end">
+          <v-toolbar-items class="flex gap-4 hidden-sm-and-down nc-topright-menu">
             <!-- todo: implement components
             <release-info />
             -->
 
             <general-language class="mr-3" />
 
-            <!-- todo: implement isDashboard
-            <template v-if="isDashboard">
-              <div>
-                <x-btn
-                  v-if="_isUIAllowed('add-user')"
-                  small
-                  btn-class="primary--text nc-menu-share white"
-                  @click="shareModal = true"
-                >
-                  <v-icon small class="mr-1"> mdi-account-supervisor-outline </v-icon>
-                  {{ $t('activity.share') }}
-                </x-btn>
-
-                <share-or-invite-modal v-model="shareModal" />
-              </div>
-              <span v-shortkey="['ctrl', 'shift', 'd']" @shortkey="navigateTo('/')" />
-              <x-btn
-                v-if="!$store.state.settings.nc"
-                text
-                btn.class="caption font-weight-bold px-2 text-capitalize"
-                tooltip="Enable/Disable Models"
-                @click="cronTabAdd()"
-              >
-                <v-icon size="20"> mdi-timetable </v-icon> &nbsp; Crons
-              </x-btn>
-            </template>
-
-            <template v-else>
-              <span v-shortkey="['ctrl', 'shift', 'c']" @shortkey="settingsTabAdd" />
-
-              <span v-shortkey="['ctrl', 'shift', 'b']" @shortkey="changeTheme" />
-            </template>
-
-
-
-            <preview-as class="mx-1" />
-
-            <v-menu v-if="isAuthenticated" offset-y>
-              <template #activator="{ on }">
-                <v-icon v-ge="['Profile', '']" text class="font-weight-bold nc-menu-account icon" v-on="on">
-                  mdi-dots-vertical
-                </v-icon>
+            <v-menu>
+              <template #activator="{ props }">
+                <MdiDotsVertical class="cursor-pointer" @click="props.onClick" />
               </template>
-              <v-list dense class="nc-user-menu">
-                <template>
-                  <v-list-item v-t="['c:navbar:user:email']" v-ge="['Settings', '']" dense to="/user/settings">
-                    <v-list-item-title>
-                      <v-icon small> mdi-at </v-icon>&nbsp;
-                      <span class="font-weight-bold caption">{{ userEmail }}</span>
-                    </v-list-item-title>
-                  </v-list-item>
-
-                  <v-divider />
-
-                  <v-list-item
-                    v-if="isDashboard"
-                    v-t="['a:navbar:user:copy-auth-token']"
-                    v-clipboard="$store.state.users.token"
-                    dense
-                    @click.stop="$toast.success($t('msg.toast.authToken')).goAway(3000)"
-                  >
-                    <v-list-item-title>
-                      <v-icon key="terminal-dash" small> mdi-content-copy </v-icon>&nbsp;
-                      <span class="font-weight-regular caption">{{ $t('activity.account.authToken') }}</span>
-                    </v-list-item-title>
-                  </v-list-item>
-                  <v-list-item v-if="isDashboard" v-t="['a:navbar:user:swagger']" dense @click.stop="openUrl(swaggerLink)">
-                    <v-list-item-title>
-                      <v-icon key="terminal-dash" small> mdi-code-json </v-icon>&nbsp;
-                      <span class="font-weight-regular caption"> {{ 'Swagger API Doc' }}</span>
-                    </v-list-item-title>
-                  </v-list-item>
-                  <v-divider />
-                  <v-list-item
-                    v-if="isDashboard"
-                    v-t="['c:navbar:user:copy-proj-info']"
-                    v-ge="['Sign Out', '']"
-                    dense
-                    @click="copyProjectInfo"
-                  >
-                    <v-list-item-title>
-                      <v-icon small> mdi-content-copy </v-icon>&nbsp;
-                      <span class="font-weight-regular caption">{{ $t('activity.account.projInfo') }}</span>
-                    </v-list-item-title>
-                  </v-list-item>
-                  <v-divider v-if="isDashboard" />
-                  <v-list-item v-if="isDashboard" v-t="['c:navbar:user:themes']" dense @click.stop="settingsTabAdd">
-                    <v-list-item-title>
-                      <v-icon key="terminal-dash" small> mdi-palette </v-icon>&nbsp;
-                      <span class="font-weight-regular caption">{{ $t('activity.account.themes') }}</span>
-                    </v-list-item-title>
-                  </v-list-item>
+              <v-list class="!py-0 nc-user-menu min-w-32">
+                <nuxt-link
+                  v-t="['c:navbar:user:email']"
+                  class="flex flex-row cursor-pointer hover:bg-gray-200 flex items-center p-2"
+                  to="/user/settings"
+                >
+                  <MdiAt />&nbsp;
+                  <span class="font-bold">{{ $state.user }}</span>
+                </nuxt-link>
 
-                  <v-divider v-if="isDashboard" />
+                <v-divider />
 
-                  <v-list-item v-t="['a:navbar:user:sign-out']" v-ge="['Sign Out', '']" dense @click="MtdSignOut">
-                    <v-list-item-title>
-                      <v-icon small> mdi-logout </v-icon>&nbsp;
-                      <span class="font-weight-regular caption">{{ $t('general.signOut') }}</span>
-                    </v-list-item-title>
-                  </v-list-item>
-                </template>
-              </v-list>
-            </v-menu>
-            <v-menu v-else offset-y open-on-hover>
-              <template #activator="{ on }">
-                <v-btn v-ge="['Profile', '']" text class="font-weight-bold nc-menu-account" v-on="on">
-                  <v-icon>mdi-account</v-icon>
-                  <v-icon>arrow_drop_down</v-icon>
-                </v-btn>
-              </template>
-              <v-list dense>
-                <v-list-item v-if="!user && !isThisMobile" dense to="/user/authentication/signup">
-                  <v-list-item-title>
-                    <v-icon small> mdi-account-plus-outline </v-icon> &nbsp;
-                    <span class="font-weight-regular caption">{{ $t('general.signUp') }}</span>
-                  </v-list-item-title>
-                </v-list-item>
-                <v-list-item v-if="!user && !isThisMobile" dense to="/user/authentication/signin">
-                  <v-list-item-title>
-                    <v-icon small> mdi-login </v-icon> &nbsp;
-                    <span class="font-weight-regular caption">{{ $t('general.signIn') }}</span>
-                  </v-list-item-title>
-                </v-list-item>
+                <div
+                  v-t="['a:navbar:user:sign-out']"
+                  class="group flex flex-row cursor-pointer hover:bg-gray-200 flex items-center p-2"
+                  @click.stop
+                >
+                  <MdiLogout class="transition-colors duration-150 ease-in group-hover:text-red-500" />&nbsp;
+                  <span class="text-sm font-semibold text-gray-500">{{ $t('general.signOut') }}</span>
+                </div>
               </v-list>
             </v-menu>
-
-            -->
           </v-toolbar-items>
         </div>
       </v-app-bar>