@energie360/ui-library 0.1.20 → 0.1.22

package/components/text-block/u-text-block.vue

@@ -6,7 +6,7 @@ interface Props {
   centered?: boolean
 }
 
-const { centered = false } = defineProps<Props>()
+const { title = '', text = '', centered = false } = defineProps<Props>()
 </script>
 
 <template>

package/components/welcome/u-welcome.vue

@@ -1,25 +1,36 @@
 <script setup lang="ts">
-// import { Image } from '../../elements/types'
+import { Image } from '../../elements/types'
 
 interface Props {
   text?: string
-  //   image: Image
+  image?: Image
 }
 defineProps<Props>()
 </script>
 
 <template>
-  <div class="welcome-container">
-    <div class="welcome-content">
-      <slot>
-        <h2 v-if="text">{{ text }}</h2>
+  <div class="welcome">
+    <div class="welcome__content">
+      <h2>
+        <slot>{{ text }}</slot>
+      </h2>
+    </div>
+
+    <div v-if="$slots.image || image" class="welcome__image" aria-hidden="true">
+      <slot name="image">
+        <img :src="image.src" :alt="image.alt" />
       </slot>
     </div>
-    <!-- TODO: Add image whenever is ready -->
-    <!-- <div class="welcome-image">
-        <img src="path/to/image.jpg" alt="Welcome Image" />
-    </div> -->
   </div>
 </template>
 
 <style scoped lang="scss" src="./welcome.scss"></style>
+<style scoped lang="scss">
+.welcome__image {
+  :slotted(img) {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+}
+</style>

package/components/welcome/welcome.scss

@@ -1,25 +1,48 @@
-@use '../../base/abstracts/' as a;
+@use '../../base/abstracts' as a;
 
-.welcome-container {
+.welcome {
   @include a.type(500, strong);
 
-  background-color: var(--e-c-primary-01-100);
-  border-radius: var(--e-brd-radius-2);
-  color: var(--e-c-primary-01-950);
+  position: relative;
+  height: a.rem(94);
   display: flex;
-  justify-content: space-between;
-  padding: var(--e-space-8) var(--e-space-6);
+  align-items: center;
+  padding: 0 var(--e-space-6);
+  background-color: var(--e-c-primary-01-50);
+  border: 1px solid var(--e-c-primary-01-100);
+  border-radius: var(--e-brd-radius-2);
+  color: var(--e-c-secondary-01-950);
+  overflow: hidden;
 
-  @include a.bp(m) {
+  @include a.bp(lg) {
+    min-height: a.rem(86);
+    height: auto;
     padding: var(--e-space-3) var(--e-space-4);
   }
 }
 
-// .welcome-content {
+.welcome__content {
+  max-width: calc(100% - #{a.rem(340)});
+
+  @include a.bp(lg) {
+    max-width: calc(100% - #{a.rem(80)});
+  }
+}
 
-// }
+.welcome__image {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  aspect-ratio: 10/3;
 
-// TODO: Add styles for the welcome image whenever is ready
-// .welcome-image {
+  img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
 
-// }
+  @include a.bp(lg) {
+    display: none;
+  }
+}

package/dist/base-style.css

@@ -3,28 +3,6 @@
 Base styling and resets for all vue-components/custom-elements.
 This must be loaded before all other styles.
 */
-/**
- * @license
- * MyFonts Webfont Build ID 3943012, 2020-09-02T07:30:46-0400
- *
- * The fonts listed in this notice are subject to the End User License
- * Agreement(s) entered into by the website owner. All other parties are
- * explicitly restricted from using the Licensed Webfonts(s).
- *
- * Webfont: Glober-Bold by Fontfabric
- * URL: https://www.myfonts.com/fonts/font-fabric/glober/bold/
- * Copyright: Copyright (c) 2019 by Svet Simov. All rights reserved.
- *
- *
- * Webfont: Glober-Regular by Fontfabric
- * URL: https://www.myfonts.com/fonts/font-fabric/glober/regular/
- * Copyright: Copyright (c) 2019 by Svet Simov. All rights reserved.
- *
- *
- * © 2020 MyFonts Inc
-*/
-/* @import must be at top of file, otherwise CSS will not work */
-@import url("//hello.myfonts.net/count/3c2a64");
 body {
   margin: 0;
   min-height: 100vh;
@@ -180,6 +158,29 @@ body {
   outline: none;
 }
 
+/**
+ * @license
+ * MyFonts Webfont Build ID 3943012, 2020-09-02T07:30:46-0400
+ *
+ * The fonts listed in this notice are subject to the End User License
+ * Agreement(s) entered into by the website owner. All other parties are
+ * explicitly restricted from using the Licensed Webfonts(s).
+ *
+ * Webfont: Glober-Bold by Fontfabric
+ * URL: https://www.myfonts.com/fonts/font-fabric/glober/bold/
+ * Copyright: Copyright (c) 2019 by Svet Simov. All rights reserved.
+ *
+ *
+ * Webfont: Glober-Regular by Fontfabric
+ * URL: https://www.myfonts.com/fonts/font-fabric/glober/regular/
+ * Copyright: Copyright (c) 2019 by Svet Simov. All rights reserved.
+ *
+ *
+ * © 2020 MyFonts Inc
+*/
+/* @import must be at top of file, otherwise CSS will not work */
+/* TODO: Add this import only for production build. Currently It causes weird warnings in dev mode. */
+/* @import url('//hello.myfonts.net/count/3c2a64'); */
 /* TODO: Assets path is hardcoded here. Should be configurable */
 /* Regular */
 @font-face {

package/dist/base-style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../base/main-base.scss","../node_modules/@energie360/design-tokens/dist/fonts/fonts.css","../base/_resets.scss","../base/abstracts/_resets.scss","../base/abstracts/_variables.scss","../base/abstracts/_functions.scss","../base/_input-resets.scss","../base/abstracts/_mixins.scss","../base/_html.scss","../base/_body.scss","../base/_focus-handling.scss","../node_modules/@energie360/design-tokens/dist/css/design-tokens.css"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBA;AACQ;ACpBR;EACE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AC1BA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADuBJ;AAAA;EAEE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AErB+E;AChCjF;ACHA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EC8BE;EACA;EAKE;;;AD7BF;EACE;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAIA;EACE;;;AAIJ;EACE;;;AAGF;EAEE;;AAEA;EAEE;EACA;;;AEvDJ;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;ACTF;EACE;EACA;EACA;EACA;EACA;;;ACAF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;ATQF;AACA;AACA;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA,KACE;;AU3CJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;EAEA;AAAA;EAEA;AAAA;EAEA;AAAA;EAEA;;;AX7MA;AAAA;AAAA;AAAA;EACE","file":"base-style.css"}
+{"version":3,"sourceRoot":"","sources":["../base/main-base.scss","../base/_resets.scss","../base/abstracts/_resets.scss","../base/abstracts/_variables.scss","../base/abstracts/_functions.scss","../base/_input-resets.scss","../base/abstracts/_mixins.scss","../base/_html.scss","../base/_body.scss","../base/_focus-handling.scss","../node_modules/@energie360/design-tokens/dist/fonts/fonts.css","../node_modules/@energie360/design-tokens/dist/css/design-tokens.css"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACEA;EACE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AC1BA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADuBJ;AAAA;EAEE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AErB+E;AChCjF;ACHA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EC8BE;EACA;EAKE;;;AD7BF;EACE;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAIA;EACE;;;AAIJ;EACE;;;AAGF;EAEE;;AAEA;EAEE;EACA;;;AEvDJ;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;ACTF;EACE;EACA;EACA;EACA;EACA;;;ACAF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AChBF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBA;AAEA;AAEA;AAEA;AAEA;AACA;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA,KACE;;AC/CJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;EAEA;AAAA;EAEA;AAAA;EAEA;AAAA;EAEA;;;AX7MA;AAAA;AAAA;AAAA;EACE","file":"base-style.css"}

package/elements/button/_button-plain.scss

@@ -6,16 +6,14 @@
   text-decoration: none;
   grid-gap: var(--e-space-1);
 
-  .icon,
-  e-icon {
+  .icon {
     --icon-fill-color: var(--e-c-primary-01-700);
   }
 
   &:hover {
     color: var(--e-c-secondary-01-900);
 
-    .icon,
-    e-icon {
+    .icon {
       --icon-fill-color: var(--e-c-secondary-01-900);
     }
   }
@@ -23,8 +21,7 @@
   &:active {
     color: var(--e-c-secondary-01-700);
 
-    .icon,
-    e-icon {
+    .icon {
       --icon-fill-color: var(--e-c-secondary-01-700);
     }
   }
@@ -34,15 +31,15 @@
     background: none;
     color: var(--e-c-mono-500);
 
-    .icon,
-    e-icon {
+    .icon {
       --icon-fill-color: var(--e-c-mono-500);
     }
   }
 
   &.loading {
-    .loader,
-    e-loader {
+    pointer-events: none;
+
+    .loader {
       --dot-color: var(--e-c-secondary-01-700);
     }
   }

package/elements/button/u-button.vue

@@ -18,7 +18,14 @@ interface ButtonProps {
   hideLabelLg?: boolean
 }
 
-const { asSpan = false } = defineProps<ButtonProps>()
+const {
+  label = '',
+  variant = 'filled',
+  icon = '',
+  href = '',
+  target = '',
+  asSpan = false,
+} = defineProps<ButtonProps>()
 
 const buttonTag = computed(() => (asSpan ? 'span' : 'button'))
 </script>
@@ -86,6 +93,4 @@ const buttonTag = computed(() => (asSpan ? 'span' : 'button'))
   </template>
 </template>
 
-<style lang="scss" scoped>
-@use './button.scss';
-</style>
+<style lang="scss" scoped src="./button.scss"></style>

package/elements/button-chip/u-button-chip.vue

@@ -15,7 +15,13 @@ interface Props {
   target?: string
 }
 
-const { variant = ButtonChipVariant.normal } = defineProps<Props>()
+const {
+  label = '',
+  icon = '',
+  href = '',
+  target = '',
+  variant = ButtonChipVariant.normal,
+} = defineProps<Props>()
 </script>
 
 <template>
@@ -23,9 +29,9 @@ const { variant = ButtonChipVariant.normal } = defineProps<Props>()
     <a :class="['button-chip', variant]" :href :target>
       <UIcon v-if="icon" :name="icon"></UIcon>
 
-      <span class="button-chip__label"
-        ><slot>{{ label }}</slot></span
-      >
+      <span class="button-chip__label">
+        <slot>{{ label }}</slot>
+      </span>
     </a>
   </template>
 
@@ -33,9 +39,9 @@ const { variant = ButtonChipVariant.normal } = defineProps<Props>()
     <button :class="['button-chip', variant]" :disabled>
       <UIcon v-if="icon" :name="icon"></UIcon>
 
-      <span class="button-chip__label"
-        ><slot>{{ label }}</slot></span
-      >
+      <span class="button-chip__label">
+        <slot>{{ label }}</slot>
+      </span>
     </button>
   </template>
 </template>

package/elements/checkbox/u-checkbox.vue

@@ -9,7 +9,7 @@ interface Props {
   errorMessage?: string
 }
 
-const { errorMessage = '' } = defineProps<Props>()
+const { label = '', errorMessage = '' } = defineProps<Props>()
 
 const model = defineModel<boolean>()
 const cId = `checkbox-${useId()}`

package/elements/icon-button/u-icon-button.vue

@@ -10,7 +10,7 @@ interface Props {
   target?: string
 }
 
-const { target = '_blank', variant = 'filled' } = defineProps<Props>()
+const { label = '', href = '', target = '_blank', variant = 'filled' } = defineProps<Props>()
 </script>
 
 <template>

package/elements/numeric-stepper/u-numeric-stepper.vue

@@ -5,7 +5,6 @@ import { getTranslation } from '../../utils/translations/translate'
 
 interface Props {
   label?: string
-  value?: string | number
   name: string
   disabled?: boolean
   readonly?: boolean
@@ -24,6 +23,7 @@ const {
   max = '',
   step = '1',
   error = false,
+  errorMessage = '',
 } = defineProps<Props>()
 
 const cId = `numeric-stepper-${useId()}`

package/elements/select-chip/u-select-chip.vue

@@ -11,6 +11,7 @@ interface Props {
   provideKey?: string
 }
 const {
+  label = '',
   name,
   disabled = false,
   value = '',
@@ -30,7 +31,9 @@ const classes = computed(() =>
   <div class="select-chip">
     <label :class="classes" class="select-chip__button button">
       <UIcon v-if="model === value" name="mini-check" />
-      {{ label }}
+      <slot name="label">
+        {{ label }}
+      </slot>
 
       <slot>
         <input v-model="model" type="radio" :name :value :disabled @change="onChange" />

package/elements/text-field/u-text-field.vue

@@ -16,6 +16,8 @@ interface Props extends FormFieldBase {
 const inputId = useId()
 
 const {
+  placeholder = '',
+  unit = '',
   disabled = false,
   readonly = false,
   required = false,
@@ -27,16 +29,17 @@ const {
 const slots = useSlots()
 const model = defineModel<string>()
 const emits = defineEmits<{
-  input: [value: string | null]
+  input: [value: string | null] // TODO: Could be obsolete because we get value via model.
   focus: [target: FocusEvent['target']]
   focusout: [target: FocusEvent['target']]
 }>()
 
+// TODO: Do we need a ref to input? Value is currently written/read via model.
 const input = useTemplateRef('input')
 
 const isFocused = ref(false)
 const isHovering = ref(false)
-const hasValue = ref(false) // only needed for input type 'search'
+const hasValue = ref(!!model.value)
 const forceFloatLabel = ref(type === TextFieldTypes.date) // input-type 'date' doesn't support placeholder.
 
 const spacer = '.&nbsp;'
@@ -58,7 +61,6 @@ const onBlur = () => {
 }
 
 const onInput = () => {
-  hasValue.value = !!input.value && input.value.value !== ''
   emits('input', input.value?.value ?? null)
 }
 
@@ -109,6 +111,10 @@ watch(
     }
   },
 )
+
+watch(model, () => {
+  hasValue.value = !!model.value
+})
 </script>
 
 <template>

package/elements/textarea/u-textarea.vue

@@ -10,6 +10,7 @@ interface Props extends FormFieldBase {
 }
 
 const {
+  placeholder = '',
   required = false,
   disabled = false,
   readonly = false,

package/elements/toggle-switch/u-toggle-switch.vue

@@ -14,6 +14,7 @@ export interface ToggleSwitch {
 }
 
 const {
+  label = '',
   variant = 'big',
   labelPosition = 'right',
   disabled = false,

package/layout/index.js

@@ -1,5 +1,6 @@
 export { default as UPortalLayout } from './portal/u-portal.vue'
+export { default as UPortalMain } from './portal-main/u-portal-main.vue'
+export { default as UPortalContentAside } from './portal-content-aside/u-portal-content-aside.vue'
 export { default as UTileGrid } from './tile-grid/u-tile-grid.vue'
 export { default as UTileItem } from './tile-grid/u-tile-item.vue'
 export { default as UResponsiveContainer } from './responsive-container/u-responsive-container.vue'
-export { default as UPortalContentAside } from './portal-content-aside/u-portal-content-aside.vue'

package/layout/portal/portal.scss

@@ -2,62 +2,46 @@
 @use '../../layout/container/container' as c;
 
 .portal {
-  --side-nav-width: 80px;
-}
+  width: 100%;
+  display: grid;
+  grid:
+    'nav body' 1fr
+    / auto 1fr;
 
-.portal__side-navigation {
-  position: fixed;
-  height: 100vh;
-  display: flex;
-}
-
-.portal__top-navigation {
-  display: none;
+  @include a.bp(lg) {
+    grid-template-areas: none;
+    grid-template-columns: 1fr;
+    grid-template-rows: 56px auto;
+    min-height: 100vh;
+  }
 }
 
-.portal__sub-navigation {
+.portal__side-navigation {
+  grid-area: nav;
   position: sticky;
   top: 0;
-  z-index: 10;
-  background-color: var(--e-c-mono-00);
-}
-
-.portal__main {
-  display: flex;
-  flex-direction: column;
-  padding-left: var(--side-nav-width);
-  min-height: 100vh;
-}
-
-.portal__content-container {
-  padding-top: var(--e-space-10);
-  padding-bottom: var(--e-space-10);
-
-  @include c.portal-content-container;
+  height: 100vh;
+  z-index: 1;
 
   @include a.bp(lg) {
-    padding-top: var(--e-space-8);
-  }
-
-  @include a.bp(m) {
-    padding-top: var(--e-space-6);
+    display: none;
   }
 }
 
-.portal__footer {
-  margin-top: auto;
-}
+.portal__top-navigation {
+  display: none;
+  position: relative;
+  z-index: 20;
 
-@include a.bp(lg) {
-  .portal__top-navigation {
+  @include a.bp(lg) {
     display: block;
   }
+}
 
-  .portal__side-navigation {
-    display: none;
-  }
+.portal__body {
+  grid-area: body;
 
-  .portal__sub-navigation {
-    background-color: var(--e-c-mono-50);
+  @include a.bp(lg) {
+    grid-area: auto;
   }
 }

package/layout/portal/u-portal.vue

@@ -1,49 +1,28 @@
 <script setup lang="ts">
-import { useTemplateRef, onMounted, ref } from 'vue'
+import { provide } from 'vue'
 
-const sideNavObserver = new ResizeObserver((entries) => {
-  for (const entry of entries) {
-    if (entry.target === sideNavEl.value) {
-      sideNavWidth.value = entry.contentBoxSize[0].inlineSize
-    }
-  }
-})
+const slots = defineSlots<{
+  default()
+  sideNavigation()
+  topNavigation()
+  footer()
+}>()
 
-const sideNavEl = useTemplateRef('sideNavigation')
-const sideNavWidth = ref(0)
-
-onMounted(() => {
-  sideNavObserver.observe(sideNavEl.value)
-})
+provide('portal-footer-slot', slots.footer)
 </script>
 
 <template>
-  <div
-    class="portal"
-    :style="{
-      '--side-nav-width': `${sideNavWidth}px`,
-    }"
-  >
+  <div class="portal">
     <div ref="sideNavigation" class="portal__side-navigation">
-      <slot name="side-navigation"></slot>
+      <slot name="sideNavigation"></slot>
     </div>
 
     <div class="portal__top-navigation">
-      <slot name="top-navigation"></slot>
+      <slot name="topNavigation"></slot>
     </div>
 
-    <div class="portal__main">
-      <div class="portal__sub-navigation">
-        <slot name="sub-navigation"></slot>
-      </div>
-
-      <div class="portal__content-container">
-        <slot></slot>
-      </div>
-
-      <div class="portal__footer">
-        <slot name="footer"></slot>
-      </div>
+    <div class="portal__body">
+      <slot></slot>
     </div>
   </div>
 </template>