feat(gui): fullscreen option to toggle nav drawers

Signed-off-by: Pranav C <pranavxc@gmail.com>

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']

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>

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" />

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" />