From a865e6babcda33f9ceea9cfcee7713b346b70850 Mon Sep 17 00:00:00 2001
From: Brandon Fergerson <bfergerson@apache.org>
Date: Sat, 30 Apr 2022 07:40:43 +0200
Subject: [PATCH] portal style

---
 src/layout/components/AppMain.vue | 17 ++++++++++++++---
 src/layout/components/SideBar.vue | 25 ++++++++++++++++---------
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index ec7dbf36..4cd1f243 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <section class="app-main flex-v">
+  <section class="app-main flex-v" :style="portalStyle">
     <router-view v-slot="{ Component }" :key="$route.fullPath">
       <keep-alive>
         <component :is="Component" />
@@ -24,6 +24,19 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { ElMessage } from "element-plus";
 import { useAppStoreWithOut } from "@/store/modules/app";
+import { useRoute } from "vue-router";
+
+const { query } = useRoute();
+
+// eslint-disable-next-line no-undef
+let portalStyle = reactive({});
+if (query["portal"] === "true") {
+  // eslint-disable-next-line no-undef
+  portalStyle = reactive({
+    "max-height": "375px",
+    "max-width": "800px",
+  });
+}
 
 const appStore = useAppStoreWithOut();
 if (!appStore.utc) {
@@ -37,8 +50,6 @@ if (!appStore.utc) {
 <style lang="scss" scoped>
 .app-main {
   height: 100%;
-  max-height: 375px;
-  max-width: 800px;
   background: #f7f9fa;
 }
 </style>
diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue
index 1c1df9f6..c2acf502 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div class="side-bar" v-if="isFullview === false">
+  <div class="side-bar" v-if="isFullview === false" :style="portalStyle">
     <div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">
       <Icon
         :size="isCollapse ? 'xl' : 'logo'"
@@ -110,7 +110,19 @@ import { useRouter, RouteRecordRaw, useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 import Icon from "@/components/Icon.vue";
 
-const { path } = useRoute();
+const { path, query } = useRoute();
+
+// eslint-disable-next-line no-undef
+let portalStyle = reactive({});
+if (query["portal"] === "true") {
+  // eslint-disable-next-line no-undef
+  portalStyle = reactive({
+    "min-height": "unset",
+    "overflow-y": "scroll",
+    "overflow-x": "hidden",
+  });
+}
+
 const isFullview = computed(() => {
   return path.includes("fullview");
 });
@@ -120,7 +132,7 @@ const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "")
   ? ref("light")
   : ref("black");
 const routes = ref<any>(useRouter().options.routes);
-const isCollapse = ref(true);
+const isCollapse = ref(query["portal"] === "true");
 const controlMenu = () => {
   isCollapse.value = !isCollapse.value;
 };
@@ -138,14 +150,9 @@ const filterMenus = (menus: any[]) => {
 .side-bar {
   background: #252a2f;
   height: 100%;
-  //min-height: 700px;
+  min-height: 700px;
   position: relative;
   margin-bottom: 100px;
-  overflow-y: scroll;
-  overflow-x: hidden;
-
-  scrollbar-color: #6969dd #e0e0e0;
-  scrollbar-width: thin;
 }
 
 .el-menu-vertical:not(.el-menu--collapse) {