From fc424c1fccfaa30467097c8c47f1e538ad3bc67d Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 15 Sep 2022 15:19:19 +0530
Subject: [PATCH] feat(gui): fullscreen option to toggle nav drawers

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components.d.ts               |  2 ++
 .../smartsheet-toolbar/FullScreen.vue         | 34 +++++++++++++++++++
 .../nc-gui/components/smartsheet/Toolbar.vue  |  2 ++
 .../components/smartsheet/sidebar/index.vue   |  2 --
 4 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 packages/nc-gui/components/smartsheet-toolbar/FullScreen.vue

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 6eaa24df25..f17ae3eead 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -163,6 +163,8 @@ declare module '@vue/runtime-core' {
     MdiFlag: typeof import('~icons/mdi/flag')['default']
     MdiFlashOutline: typeof import('~icons/mdi/flash-outline')['default']
     MdiFolder: typeof import('~icons/mdi/folder')['default']
+    MdiFullscreen: typeof import('~icons/mdi/fullscreen')['default']
+    MdiFullscreenExit: typeof import('~icons/mdi/fullscreen-exit')['default']
     MdiFunction: typeof import('~icons/mdi/function')['default']
     MdiGestureDoubleTap: typeof import('~icons/mdi/gesture-double-tap')['default']
     MdiGithub: typeof import('~icons/mdi/github')['default']
diff --git a/packages/nc-gui/components/smartsheet-toolbar/FullScreen.vue b/packages/nc-gui/components/smartsheet-toolbar/FullScreen.vue
new file mode 100644
index 0000000000..f760cc713a
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet-toolbar/FullScreen.vue
@@ -0,0 +1,34 @@
+<template>
+  <a-tooltip placement="bottom">
+<!--    todo: i18n -->
+    <template #title> {{ isFullScreen ? 'Exit fullscreen' : 'Fullscreen' }}</template>
+    <div
+      v-e="['c:toolbar:fullscreen']"
+      class="nc-fullscreen-btn cursor-pointer flex align-center"
+    >
+      <MdiFullscreenExit v-if="isFullScreen" @click="isFullScreen = false" />
+      <MdiFullscreen v-else @click="isFullScreen = true" />
+    </div>
+  </a-tooltip>
+</template>
+
+<script setup lang="ts">
+
+// provide the sidebar injection state
+import { useSidebar } from '~/composables'
+
+const rightSidebar = useSidebar('nc-right-sidebar')
+const leftSidebar = useSidebar('nc-left-sidebar')
+
+const isFullScreen = computed({
+  get: () => !(rightSidebar.isOpen.value || leftSidebar.isOpen.value),
+  set: (value) => {
+    rightSidebar.toggle(!value)
+    leftSidebar.toggle(!value)
+  },
+})
+</script>
+
+<style scoped>
+
+</style>
diff --git a/packages/nc-gui/components/smartsheet/Toolbar.vue b/packages/nc-gui/components/smartsheet/Toolbar.vue
index a28d041cc1..0d7b81803f 100644
--- a/packages/nc-gui/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui/components/smartsheet/Toolbar.vue
@@ -43,6 +43,8 @@ const { allowCSVDownload } = useSharedView()
 
     <SmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mr-2 ml-2" />
 
+    <SmartsheetToolbarFullScreen v-if="!isPublic" class="mx-1" />
+
     <template v-if="!isOpen && !isPublic">
       <div class="border-l-1 pl-3">
         <ToggleDrawer class="mr-2" />
diff --git a/packages/nc-gui/components/smartsheet/sidebar/index.vue b/packages/nc-gui/components/smartsheet/sidebar/index.vue
index 3f5a928232..92803132ed 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/index.vue
@@ -110,12 +110,10 @@ function onCreate(view: ViewType) {
     class="relative shadow-md h-full"
     theme="light"
   >
-    {{ isOpen }}
     <Toolbar
       v-if="isOpen"
       class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)] flex items-center py-3 px-3 justify-between border-b-1"
     />
-
     <div v-if="isOpen" class="flex-1 flex flex-col min-h-0">
       <MenuTop @open-modal="openModal" @deleted="loadViews" @sorted="loadViews" />