remove fullscreen/no-navigation and move/remove _variables

Signed-off-by: John Cowen <john.cowen@konghq.com>

Author: johncowen

packages/kuma-gui/src/app/application/components/app-view/AppView.vue

@@ -71,20 +71,14 @@
                 />
               </nav>
 
-              <section
-                :class="{
-                  'is-fullscreen': props.fullscreen,
-                }"
-              >
+              <section>
                 <XLayout
                   type="stack"
                 >
                   <header
                     v-if="slots.title || slots.actions"
                     class="app-view-title-bar"
                   >
-                    <KongIcon v-if="props.fullscreen" />
-
                     <template
                       v-if="summary.length > 0"
                     >
@@ -143,7 +137,6 @@
 </template>
 
 <script lang="ts" setup>
-import { KongIcon } from '@kong/icons'
 import { ROUTE_VIEW_PARENT } from '@kumahq/routing/vue'
 import { nextTick , provide, inject, watch, ref, onBeforeUnmount , useId } from 'vue'
 
@@ -162,12 +155,10 @@ type Breadcrumbs = Map<symbol, BreadcrumbItem[]>
 
 const props = withDefaults(defineProps<{
   breadcrumbs?: BreadcrumbItem[] | null
-  fullscreen?: boolean
   docs?: string
   notifications?: boolean
 }>(), {
   breadcrumbs: null,
-  fullscreen: false,
   docs: '',
   notifications: false,
 })
@@ -238,18 +229,6 @@ onBeforeUnmount(() => {
   position: relative;
   left: -3px;
 }
-.is-fullscreen {
-  .app-view-title-bar {
-    padding: var(--x-space-80) var(--x-space-90);
-    border-bottom: var(--x-border-width-10) solid var(--x-color-border);
-  }
-  .app-view-title-bar h1 {
-    margin-left: var(--x-space-40);
-    padding-left: var(--x-space-40);
-    border-left: var(--x-border-width-10) solid var(--x-color-border);
-    font-size: var(--x-font-size-60);
-  }
-}
 .k-tabs + .route-view > .app-view .app-view-title-bar {
   margin-bottom: 20px;
 }

packages/kuma-gui/src/app/kuma/components/ApplicationShell.vue

@@ -162,29 +162,17 @@ const env = useEnv()
 const { t } = useI18n()
 
 </script>
-<style lang="scss">
-html.is-fullscreen {
-  .application-shell > header {
-    display: none;
-  }
-  .application-shell > .app-content-container > nav {
-    display: none;
-  }
-  .application-shell > .app-content-container > .app-notifications {
-    display: none;
-  }
-}
-html.no-navigation {
-  .application-shell > .app-content-container .app-sidebar > nav {
-    display: none;
-  }
-}
-</style>
-
 <style lang="scss" scoped>
+.application-shell {
+  --AppHeaderHeight: 60px;
+  --AppSidebarWidth: 240px;
+  --AppContentPadding: var(--x-space-80);
+  --x-drawer-offset-top: var(--AppHeaderHeight);
+
+}
 .app-content-container {
+  display: grid;
   padding-top: var(--AppHeaderHeight, initial);
-  display: var(--AppDisplay);
   // Note: `minmax(0, 1fr)` is used because `1fr` implies `minmax(auto, 1fr)` which will allow grid items to grow beyond their container's size.
   grid-template-columns: var(--AppSidebarWidth) minmax(0, 1fr);
 }

packages/kuma-gui/src/assets/styles/_variables.scss

@@ -1,6 +1,5 @@
 @use "mixins";
 @use "fonts";
-@use "variables";
 @use "base";
 @use "components";
 

packages/kuma-gui/src/assets/styles/main.scss

@@ -6,7 +6,7 @@
     :has-overlay="false"
     visible
     :max-width="props.width"
-    offset-top="var(--app-slideout-offset-top, 0)"
+    offset-top="var(--x-drawer-offset-top, 0)"
     data-testid="summary"
     @close="emit('close')"
   >