@energie360/ui-library 0.1.9 → 0.1.10

package/components/tooltip/popover.ts

@@ -5,9 +5,17 @@ export type Placement =
   | 'top-right'
   | 'top-left'
   | 'top-center'
+  | 'top-full'
   | 'bottom-right'
   | 'bottom-left'
   | 'bottom-center'
+  | 'bottom-full'
+  | 'right-top'
+  | 'right-center'
+  | 'right-bottom'
+  | 'left-top'
+  | 'left-center'
+  | 'left-bottom'
 export interface PopoverPositionParams {
   placement?: Placement
   offset?: number
@@ -52,6 +60,7 @@ export const getPopoverPosition = (
 
   let top = 0
   let left = 0
+  let right: number | string = ''
   const { vpWidth } = getViewportDimensions()
   const docHeight = document.documentElement.scrollHeight
   const scrollY = window.scrollY
@@ -64,32 +73,85 @@ export const getPopoverPosition = (
     popoverEl.style.display = ''
   }
 
+  const topPosition = offsetTop - popoverRect.height - options.offset
+  const bottomPosition = offsetTop + refRect.height + options.offset
+  const leftAligned = offsetLeft
+  const rightAligned = offsetLeft + refRect.width - popoverRect.width
+  const centerAligned = offsetLeft + refRect.width / 2 - popoverRect.width / 2
+
+  const rightPosition = offsetLeft + refRect.width + options.offset
+  const leftPosition = offsetLeft - popoverRect.width - options.offset
+  const topVAligned = offsetTop
+  const centerVAligned = offsetTop - popoverRect.height / 2 + refRect.height / 2
+  const bottomVAligned = offsetTop - popoverRect.height + refRect.height
+
   switch (options.placement) {
     case 'top-right':
-      top = offsetTop - popoverRect.height - options.offset
-      left = offsetLeft + refRect.width - popoverRect.width
+      top = topPosition
+      left = rightAligned
+      break
+
+    case 'top-center':
+      top = topPosition
+      left = centerAligned
       break
 
     case 'top-left':
-      top = offsetTop - popoverRect.height - options.offset
-      left = offsetLeft
+      top = topPosition
+      left = leftAligned
+      break
+
+    case 'top-full':
+      top = topPosition
+      left = options.viewportPadding
+      right = options.viewportPadding
       break
 
     case 'bottom-right':
-      top = offsetTop + refRect.height + options.offset
-      left = offsetLeft + refRect.width - popoverRect.width
+      top = bottomPosition
+      left = rightAligned
+      break
+
+    case 'bottom-center':
+      top = bottomPosition
+      left = centerAligned
       break
 
     case 'bottom-left':
-      top = offsetTop + refRect.height + options.offset
-      left = offsetLeft
+      top = bottomPosition
+      left = leftAligned
       break
 
-    // TODO: add remaining placement options
-    case 'bottom-center':
+    case 'bottom-full':
+      top = bottomPosition
+      left = options.viewportPadding
+      right = options.viewportPadding
       break
 
-    case 'top-center':
+    case 'right-top':
+      top = topVAligned
+      left = rightPosition
+      break
+    case 'right-center':
+      top = centerVAligned
+      left = rightPosition
+      break
+    case 'right-bottom':
+      top = bottomVAligned
+      left = rightPosition
+      break
+
+    case 'left-top':
+      top = topVAligned
+      left = leftPosition
+      break
+    case 'left-center':
+      top = centerVAligned
+      left = leftPosition
+      break
+    case 'left-bottom':
+      top = bottomVAligned
+      left = leftPosition
   }
 
   // Add corrections to position if necessary
@@ -114,7 +176,7 @@ export const getPopoverPosition = (
     top = offsetTop - popoverRect.height - options.offset
   }
 
-  return { top, left }
+  return { top, left, right }
 }
 
 /**

package/dist/base-style.css

@@ -92,6 +92,7 @@ fieldset {
   border: 0;
 }
 
+/* easeOutCubic */
 /* prettier-ignore */
 input,
 textarea,

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/_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;;;ADwBJ;AAAA;EAEE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AErDF;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;;;AAIA;EAEE;EACA;;;AEpDJ;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;ACTF;EACE;EACA;EACA;EACA;EACA;;;ACAF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;ARQF;AACA;AACA;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA,KACE;;AS3CJ;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;;;AV7MA;AAAA;AAAA;AAAA;EACE","file":"base-style.css"}
+{"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;;;ADwBJ;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;;;AAIA;EAEE;EACA;;;AEpDJ;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"}

package/dist/elements/text-link.css

@@ -1,3 +1,4 @@
+/* easeOutCubic */
 /* prettier-ignore */
 .text-link {
   font-size: var(--e-type-size-200);

package/dist/elements/text-link.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../base/abstracts/_functions.scss","../../elements/text-link/text-link.scss","../../base/abstracts/_mixins.scss"],"names":[],"mappings":"AAKA;ACyCA;ECHE;EACA;EAGE;EAMA;EAKE;EACA;EDtDJ;EACA;EACA;EACA,YACE;;AAGF;EACE;;AAGF;EACE;;AAgCF;EA3BA;;AAEA;EACE;;AAGF;EACE;;AAwBF;EAnBA;EACA;;AAEA;EACE;;AAGF;EACE","file":"text-link.css"}
+{"version":3,"sourceRoot":"","sources":["../../base/abstracts/_variables.scss","../../base/abstracts/_functions.scss","../../elements/text-link/text-link.scss","../../base/abstracts/_mixins.scss"],"names":[],"mappings":"AAqCiF;AChCjF;ACyCA;ECHE;EACA;EAGE;EAMA;EAKE;EACA;EDtDJ;EACA;EACA;EACA,YACE;;AAGF;EACE;;AAGF;EACE;;AAgCF;EA3BA;;AAEA;EACE;;AAGF;EACE;;AAwBF;EAnBA;EACA;;AAEA;EACE;;AAGF;EACE","file":"text-link.css"}

package/dist/layout/split.css

@@ -1,3 +1,4 @@
+/* easeOutCubic */
 /* prettier-ignore */
 .container {
   margin: 0 auto;

package/dist/layout/split.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../base/abstracts/_functions.scss","../../layout/container/container.scss","../../base/abstracts/_mixins.scss","../../layout/split/split.scss"],"names":[],"mappings":"AAKA;ACsBA;EAtBE;EACA;EACA;EACA;EACA;;ACYA;EDMF;IAfI;IACA;;;ACQF;EDMF;IAVI;IACA;;;ACGF;EDMF;IALI;IACA;;;;AEjBJ;EACE;EACA;EACA;EACA;EACA;;ADUA;ECfF;IAQI;IACA;IACA;IACA;IACA;IACA,qBACE;;;ADCJ;ECfF;IAmBI;IACA;;;;AAIJ;EACE;EACA;;ADXA;ECSF;IAKI;IACA;;;ADfF;ECSF;IAUI;IACA;IACA;;;;AAIJ;EACE;;AD1BA;ECyBF;IAII;IACA;;;AD9BF;ECyBF;IASI;;;;AAIJ;EACE;EACA;EACA;EACA;;AD1CA;ECsCF;IAOI;IAIA;IACA;;;ADlDF;ECsCF;IAgBI;IACA;IACA;IACA;IACA;IACA;;;AD3DF;ECsCF;IAyBI;IACA;IACA;;;;AAIJ;EACE;;ADtEA;ECqEF;IAII;;;ADzEF;ECqEF;IAQI","file":"split.css"}
+{"version":3,"sourceRoot":"","sources":["../../base/abstracts/_variables.scss","../../base/abstracts/_functions.scss","../../layout/container/container.scss","../../base/abstracts/_mixins.scss","../../layout/split/split.scss"],"names":[],"mappings":"AAqCiF;AChCjF;ACsBA;EAtBE;EACA;EACA;EACA;EACA;;ACYA;EDMF;IAfI;IACA;;;ACQF;EDMF;IAVI;IACA;;;ACGF;EDMF;IALI;IACA;;;;AEjBJ;EACE;EACA;EACA;EACA;EACA;;ADUA;ECfF;IAQI;IACA;IACA;IACA;IACA;IACA,qBACE;;;ADCJ;ECfF;IAmBI;IACA;;;;AAIJ;EACE;EACA;;ADXA;ECSF;IAKI;IACA;;;ADfF;ECSF;IAUI;IACA;IACA;;;;AAIJ;EACE;;AD1BA;ECyBF;IAII;IACA;;;AD9BF;ECyBF;IASI;;;;AAIJ;EACE;EACA;EACA;EACA;;AD1CA;ECsCF;IAOI;IAIA;IACA;;;ADlDF;ECsCF;IAgBI;IACA;IACA;IACA;IACA;IACA;;;AD3DF;ECsCF;IAyBI;IACA;IACA;;;;AAIJ;EACE;;ADtEA;ECqEF;IAII;;;ADzEF;ECqEF;IAQI","file":"split.css"}

package/elements/button-chip/button-chip.scss

@@ -63,6 +63,8 @@
     background-color a.$trs-default,
     color a.$trs-default;
 
+  @include button-chip-normal;
+
   .icon {
     margin-left: a.rem(-10);
   }
@@ -71,8 +73,6 @@
     @include button-chip-minified;
   }
 
-  @include button-chip-normal;
-
   &.inverted {
     @include button-chip-inverted;
   }

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

@@ -26,6 +26,11 @@ const {
 
 const slots = useSlots()
 const model = defineModel<string>()
+const emits = defineEmits<{
+  input: [value: string | null]
+  focus: [target: FocusEvent['target']]
+  focusout: [target: FocusEvent['target']]
+}>()
 
 const input = useTemplateRef('input')
 
@@ -39,12 +44,13 @@ const spacer = '.&nbsp;'
 // In some cases we need to change the input type within the component (for example for the password-show behaviour)
 const _inputType = ref(type)
 
-const onFocus = () => {
+const onFocus = (event: FocusEvent) => {
   if (readonly || disabled) {
     return
   }
 
   isFocused.value = true
+  emits('focus', event.target)
 }
 
 const onBlur = () => {
@@ -53,6 +59,7 @@ const onBlur = () => {
 
 const onInput = () => {
   hasValue.value = !!input.value && input.value.value !== ''
+  emits('input', input.value?.value ?? null)
 }
 
 const onHover = () => {
@@ -140,6 +147,7 @@ watch(
             :required
             @input="onInput"
             @focus="onFocus"
+            @focusout="$emit('focusout', $event.target)"
             @blur="onBlur"
         /></slot>
 

package/i18n/i18n.ts

@@ -11,6 +11,8 @@ const translations = {
     passwordRequirements: 'Anforderungen an das Passwort',
     edit: 'Bearbeiten',
     cancel: 'Abbrechen',
+    openMenu: 'Menu öffnen',
+    closeMenu: 'Menu schliessen',
   },
   FR: {
     yes: 'Ja',
@@ -24,6 +26,8 @@ const translations = {
     passwordRequirements: 'Exigences relatives au mot de passe',
     edit: 'Modifier',
     cancel: 'Annuler',
+    openMenu: 'Ouvrir le menu',
+    closeMenu: 'Fermer le menu',
   },
   IT: {
     yes: 'Ja',
@@ -37,6 +41,8 @@ const translations = {
     passwordRequirements: 'Requisiti per la password',
     edit: 'modificare',
     cancel: 'cancellare',
+    openMenu: 'Apri il menu',
+    closeMenu: 'Chiudi menù',
   },
   EN: {
     yes: 'Ja',
@@ -50,6 +56,8 @@ const translations = {
     passwordRequirements: 'Password requirements',
     edit: 'Edit',
     cancel: 'Cancel',
+    openMenu: 'Open menu',
+    closeMenu: 'Close menu',
   },
 }
 

package/modules/index.js

@@ -1,3 +1,5 @@
 export { default as UFeedback } from './feedback/u-feedback.vue'
 export { default as UFooter } from './footer/u-footer.vue'
 export { default as UInlineEditGroup } from './inline-edit-group/u-inline-edit-group.vue'
+export { default as UNavigationToolbarTop } from './navigation-toolbar-top/u-navigation-toolbar-top.vue'
+export { default as UNavigationToolbarSide } from './navigation-toolbar-side/u-navigation-toolbar-side.vue'

package/modules/navigation-toolbar-side/navigation-toolbar-side.scss

@@ -0,0 +1,89 @@
+@use '../../base/abstracts/' as a;
+
+.navigation-toolbar-side {
+  --nav-width-expanded: #{a.rem(280)};
+  --transition-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */
+
+  display: flex;
+  flex-direction: column;
+  padding: var(--e-space-6);
+  width: var(--nav-width-expanded);
+  height: 100%;
+  background-color: var(--e-c-secondary-01-1000);
+
+  &.collapsed {
+    width: a.rem(88);
+
+    .navigation-toolbar-side__logo {
+      width: a.rem(40);
+    }
+
+    .navigation-toolbar-side__nav-links,
+    .navigation-toolbar-side__menu-cta {
+      padding: 0 var(--e-space-0_5);
+    }
+  }
+}
+
+.navigation-toolbar-side__logo {
+  width: a.rem(196);
+  height: a.rem(40);
+  margin-bottom: var(--e-space-12);
+}
+
+.navigation-toolbar-side__nav-links {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--e-space-2);
+}
+
+.navigation-toolbar-side__menu-ctas {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--e-space-2);
+  margin-top: auto;
+}
+
+.navigation-toolbar-side__menu-cta {
+  display: block;
+  width: 100%;
+}
+
+.navigation-toolbar-side__top-bar-logo {
+  img {
+    height: a.rem(24);
+  }
+}
+
+.navigation-toolbar-side__top-bar-ctas {
+  display: flex;
+  column-gap: var(--e-space-4);
+}
+
+// Animation
+.navigation-toolbar-side {
+  &.is-collapsing {
+    will-change: width;
+    transition: width var(--e-trs-duration-faster) var(--transition-ease-out);
+    width: a.rem(88);
+    overflow: hidden;
+
+    .navigation-toolbar-side__nav-links,
+    .navigation-toolbar-side__menu-ctas {
+      transition: padding var(--e-trs-duration-faster) var(--transition-ease-out);
+      padding: 0 var(--e-space-0_5);
+    }
+  }
+
+  &.is-expanding {
+    will-change: width;
+    transition: all var(--e-trs-duration-faster) var(--transition-ease-out);
+    width: var(--nav-width-expanded);
+
+    .navigation-toolbar-side__nav-links,
+    .navigation-toolbar-side__menu-ctas {
+      transition: padding var(--e-trs-duration-faster) var(--transition-ease-out);
+      padding: 0;
+    }
+  }
+}

package/modules/navigation-toolbar-side/u-navigation-toolbar-side.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { UNavigationToolbarLink } from '../../components'
+import { UContextMenu } from '../../components'
+import { Image } from '../../elements/types'
+import { ref, watch, useTemplateRef } from 'vue'
+
+interface MenuButton {
+  icon: string
+  label: string
+}
+
+interface Props {
+  logoLink: {
+    href: string
+    target: string
+  }
+  menuButton: MenuButton
+  collapsed?: boolean
+  logoImage: Image
+  logoMinifiedImage: Image
+}
+
+const { collapsed = false } = defineProps<Props>()
+
+const el = useTemplateRef('el')
+const isCollapsed = ref(collapsed)
+const isCollapsing = ref(false)
+const isExpanding = ref(false)
+
+const onTransitionEnd = () => {
+  el.value?.removeEventListener('transitionend', onTransitionEnd)
+  isCollapsed.value = !isCollapsed.value
+
+  isCollapsing.value = false
+  isExpanding.value = false
+}
+
+watch(
+  () => collapsed,
+  (newV) => {
+    el.value?.addEventListener('transitionend', onTransitionEnd)
+
+    if (newV) {
+      isCollapsing.value = true
+    } else {
+      isExpanding.value = true
+    }
+  },
+)
+</script>
+
+<template>
+  <div
+    ref="el"
+    :class="[
+      'navigation-toolbar-side',
+      {
+        collapsed: isCollapsed,
+        'is-collapsing': isCollapsing,
+        'is-expanding': isExpanding,
+      },
+    ]"
+  >
+    <a class="navigation-toolbar-side__logo" :href="logoLink.href" :target="logoLink.target">
+      <img
+        v-if="isCollapsed || isExpanding"
+        :src="logoMinifiedImage.src"
+        :alt="logoMinifiedImage.alt"
+      />
+      <img v-else :src="logoImage.src" :alt="logoImage.alt" />
+    </a>
+
+    <nav ref="mobile-panel" class="navigation-toolbar-side__nav-panel">
+      <div class="navigation-toolbar-side__nav-links">
+        <slot name="navLinks"></slot>
+      </div>
+    </nav>
+
+    <div class="navigation-toolbar-side__menu-ctas">
+      <UContextMenu placement="right-bottom">
+        <template #trigger>
+          <button class="navigation-toolbar-side__menu-cta" type="button">
+            <UNavigationToolbarLink v-bind="menuButton" :collapsed />
+          </button>
+        </template>
+
+        <slot name="contextMenuLinks"></slot>
+      </UContextMenu>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" src="./navigation-toolbar-side.scss" scoped></style>

package/modules/navigation-toolbar-top/navigation-toolbar-top.scss

@@ -0,0 +1,89 @@
+@use '../../base/abstracts/' as a;
+
+.navigation-toolbar-top {
+  --transition-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */
+
+  display: block;
+  width: 100%;
+  padding: 0 var(--e-space-5);
+  height: a.rem(56);
+  background-color: var(--e-c-secondary-01-1000);
+}
+
+.navigation-toolbar-top__top-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.navigation-toolbar-top__nav-panel-logo {
+  display: block;
+  height: a.rem(48);
+  padding-bottom: a.rem(24);
+  margin-bottom: var(--e-space-14);
+
+  img {
+    height: 100%;
+  }
+}
+
+.navigation-toolbar-top__nav-panel-close {
+  display: block;
+  position: absolute;
+  top: var(--e-space-4);
+  right: var(--e-space-5);
+  z-index: 1;
+}
+
+.navigation-toolbar-top__nav-panel {
+  position: fixed;
+  padding: var(--e-space-4) var(--e-space-5);
+  top: 0;
+  left: 0;
+  background-color: var(--e-c-secondary-01-1000);
+  width: 100%;
+  height: 100%;
+  transform: translate3d(100%, 0, 0);
+
+  .navigation-toolbar-mobile-open & {
+    transform: translate3d(0, 0, 0);
+  }
+
+  // Animation
+  &.is-opening {
+    transition: transform var(--e-trs-duration-faster) var(--transition-ease-out);
+    transform: translate3d(0, 0, 0);
+  }
+
+  &.is-closing {
+    transition: transform var(--e-trs-duration-faster) var(--transition-ease-out);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+.navigation-toolbar-top__nav-links {
+  row-gap: var(--e-space-4);
+}
+
+.navigation-toolbar-top__nav-links {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--e-space-2);
+}
+
+.navigation-toolbar-top__top-bar-logo {
+  img {
+    height: a.rem(24);
+  }
+}
+
+.navigation-toolbar-top__top-bar-ctas {
+  display: flex;
+  column-gap: var(--e-space-4);
+}
+
+// Global
+.navigation-toolbar-mobile-open {
+  overflow: hidden;
+}

package/modules/navigation-toolbar-top/u-navigation-toolbar-top.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { UNavigationToolbarLink } from '../../components'
+import { UIconButton } from '../../elements'
+import { UContextMenu } from '../../components'
+import { Image } from '../../elements/types'
+import { getTranslation } from '../../utils/translations/translate'
+import { ref, watch, useTemplateRef } from 'vue'
+
+interface MenuButton {
+  icon: string
+  label: string
+}
+
+interface Props {
+  logoLink: {
+    href: string
+    target: string
+  }
+  menuButton: MenuButton
+  logoImage: Image
+  logoMinifiedImage: Image
+}
+
+defineProps<Props>()
+
+const mobilePanelEl = useTemplateRef('mobile-panel')
+const mobileOpen = ref(false)
+const isMobilePanelOpening = ref(false)
+const isMobilePanelClosing = ref(false)
+
+const onToggleMenu = () => {
+  mobilePanelEl.value?.addEventListener('transitionend', onMobilePanelTransitionEnd)
+
+  document.documentElement.classList.toggle('navigation-toolbar-mobile-open', true)
+  isMobilePanelOpening.value = true
+}
+
+const onNavClose = () => {
+  mobilePanelEl.value?.addEventListener('transitionend', onMobilePanelTransitionEnd)
+
+  isMobilePanelClosing.value = true
+}
+
+const onMobilePanelTransitionEnd = (e) => {
+  if (e.target !== mobilePanelEl.value) {
+    return
+  }
+
+  mobilePanelEl.value?.removeEventListener('transitionend', onMobilePanelTransitionEnd)
+
+  mobileOpen.value = !mobileOpen.value
+  isMobilePanelOpening.value = false
+  isMobilePanelClosing.value = false
+
+  document.documentElement.classList.toggle('navigation-toolbar-mobile-open', !mobileOpen.value)
+}
+
+watch(mobileOpen, (newV) => {
+  document.documentElement.classList.toggle('navigation-toolbar-mobile-open', newV)
+})
+</script>
+
+<template>
+  <div
+    ref="el"
+    :class="[
+      'navigation-toolbar-top',
+      {
+        'mobile-open': mobileOpen,
+      },
+    ]"
+  >
+    <div class="navigation-toolbar-top__top-bar">
+      <a
+        class="navigation-toolbar-top__top-bar-logo"
+        :href="logoLink.href"
+        :target="logoLink.target"
+      >
+        <img :src="logoImage.src" :alt="logoImage.alt" />
+      </a>
+
+      <div class="navigation-toolbar-top__top-bar-ctas">
+        <UContextMenu placement="bottom-full">
+          <template #trigger>
+            <UNavigationToolbarLink v-bind="menuButton" collapsed label-hidden />
+          </template>
+
+          <slot name="contextMenuLinks"></slot>
+        </UContextMenu>
+
+        <UNavigationToolbarLink
+          icon="menu"
+          :label="getTranslation('openMenu')"
+          collapsed
+          label-hidden
+          @click="onToggleMenu"
+        />
+      </div>
+    </div>
+
+    <nav
+      ref="mobile-panel"
+      class="navigation-toolbar-top__nav-panel"
+      :class="{ 'is-opening': isMobilePanelOpening, 'is-closing': isMobilePanelClosing }"
+    >
+      <a
+        class="navigation-toolbar-top__nav-panel-logo"
+        :href="logoLink.href"
+        :target="logoLink.target"
+      >
+        <img :src="logoImage.src" :alt="logoImage.alt" />
+      </a>
+
+      <div class="navigation-toolbar-top__nav-panel-close">
+        <UIconButton
+          icon="close"
+          variant="outlined-inverted"
+          :label="getTranslation('closeMenu')"
+          @click="onNavClose"
+        />
+      </div>
+
+      <div class="navigation-toolbar-top__nav-links">
+        <slot name="navLinks"></slot>
+      </div>
+    </nav>
+  </div>
+</template>
+
+<style lang="scss" src="./navigation-toolbar-top.scss" scoped></style>