From 287c145bb02522572f0e5635942b4e0477d83450 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 15 Aug 2022 11:55:23 +0530
Subject: [PATCH] fix/added shared view layout

---
 .../nc-gui-v2/components/shared-view/Grid.vue |  4 +-
 packages/nc-gui-v2/layouts/shared-view.vue    | 37 +++++++++++++++++++
 .../pages/[projectType]/view/[viewId].vue     |  3 +-
 3 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 packages/nc-gui-v2/layouts/shared-view.vue

diff --git a/packages/nc-gui-v2/components/shared-view/Grid.vue b/packages/nc-gui-v2/components/shared-view/Grid.vue
index 0c4bb3f5d1..7a39c09f98 100644
--- a/packages/nc-gui-v2/components/shared-view/Grid.vue
+++ b/packages/nc-gui-v2/components/shared-view/Grid.vue
@@ -18,9 +18,9 @@ useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
 </script>
 
 <template>
-  <div class="nc-container flex flex-col h-full mt-2 px-6">
+  <div class="nc-container flex flex-col h-full mt-4 px-6">
     <SmartsheetToolbar />
-    <SmartsheetGrid />
+    <SmartsheetGrid class="px-3" />
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/layouts/shared-view.vue b/packages/nc-gui-v2/layouts/shared-view.vue
new file mode 100644
index 0000000000..a6d2aef876
--- /dev/null
+++ b/packages/nc-gui-v2/layouts/shared-view.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { navigateTo } from '#app'
+</script>
+
+<script lang="ts">
+export default {
+  name: 'SharedView',
+}
+</script>
+
+<template>
+  <a-layout id="nc-app">
+    <a-layout class="!flex-col">
+      <a-layout-header class="flex !bg-primary items-center text-white pl-3 pr-4 shadow-lg">
+        <div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105" @click="navigateTo('/')">
+          <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+        </div>
+
+        <div class="flex-1" />
+      </a-layout-header>
+
+      <div class="w-full overflow-hidden" style="height: calc(100% - var(--header-height))">
+        <slot />
+      </div>
+    </a-layout>
+  </a-layout>
+</template>
+
+<style lang="scss" scoped>
+:deep(.ant-dropdown-menu-item-group-title) {
+  @apply border-b-1;
+}
+
+:deep(.ant-dropdown-menu-item-group-list) {
+  @apply m-0;
+}
+</style>
diff --git a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
index 09668bcf02..9ba0c0d68e 100644
--- a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
@@ -4,6 +4,7 @@ import { ReadonlyInj, ReloadViewDataHookInj } from '~/context'
 import { useRoute } from '#imports'
 definePageMeta({
   requiresAuth: false,
+  layout: 'shared-view',
 })
 
 const route = useRoute()
@@ -23,7 +24,7 @@ try {
 </script>
 
 <template>
-  <NuxtLayout id="content" class="flex">
+  <NuxtLayout id="content" class="flex" name="shared-view">
     <div v-if="showPassword">
       <SharedViewAskPassword v-model="showPassword" />
     </div>