@autoafleveren/ui 1.3.2 → 1.4.0

package/src/modules/icons/LocationMarkerIcon.vue

@@ -0,0 +1,33 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    fill="none"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      stroke="white"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M17.657 16.6567L13.414 20.8997C13.2284 21.0854 13.0081 21.2328 12.7656 21.3333C12.523 21.4339 12.2631
+        21.4856 12.0005 21.4856C11.738 21.4856 11.478 21.4339 11.2354 21.3333C10.9929 21.2328 10.7726 21.0854 10.587
+        20.8997L6.343 16.6567C5.22422 15.5379 4.46234 14.1124 4.15369 12.5606C3.84504 11.0087 4.00349 9.40022 4.60901
+        7.93844C5.21452 6.47665 6.2399 5.22725 7.55548 4.34821C8.87107 3.46918 10.4178 3 12 3C13.5822 3 15.1289 3.46918
+        16.4445 4.34821C17.7601 5.22725 18.7855 6.47665 19.391 7.93844C19.9965 9.40022 20.155 11.0087 19.8463
+        12.5606C19.5377 14.1124 18.7758 15.5379 17.657 16.6567V16.6567Z"
+    ></path>
+
+    <path
+      stroke="white"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M15 10.9998C15 11.7954 14.6839 12.5585 14.1213 13.1211C13.5587 13.6837 12.7956 13.9998 12 13.9998C11.2044
+        13.9998 10.4413 13.6837 9.87868 13.1211C9.31607 12.5585 9 11.7954 9 10.9998C9 10.2041 9.31607 9.44104 9.87868
+        8.87844C10.4413 8.31583 11.2044 7.99976 12 7.99976C12.7956 7.99976 13.5587 8.31583 14.1213 8.87844C14.6839
+        9.44104 15 10.2041 15 10.9998V10.9998Z"
+    ></path>
+  </svg>
+</template>

package/src/modules/icons/PartyPopperIcon.vue

@@ -0,0 +1,146 @@
+<template>
+  <svg
+    enable-background="new 0 0 128 128"
+    viewBox="0 0 128 128"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <linearGradient
+      id="a"
+      gradientUnits="userSpaceOnUse"
+      x1="74.3843"
+      x2="44.617"
+      y1="61.8385"
+      y2="79.6989"
+    ><stop
+       offset=".0235"
+       stop-color="#8f4700"
+     ></stop>
+
+      <stop
+        offset="1"
+        stop-color="#703e2d"
+      ></stop></linearGradient>
+
+    <path
+      d="m7.45 123.27c2.27 2.46 11.62-1.83 19-5.27 5.53-2.57 27.66-11.65 38.66-16.36 2.97-1.27 7.29-2.93 10.4-7.02 2.76-3.64
+        10.08-19.1-4.66-34.76-14.96-15.9-30.37-11.51-36.13-7.43-3.39 2.4-6.15 7.81-7.39 10.56-5.24 11.62-12.71 32.91-15.75 41.28-2.23
+        6.17-6.38 16.56-4.13 19z"
+      fill="#ffc107"
+    ></path>
+
+    <g fill="#ff8f00">
+      <path
+        d="m25.85 66.49c.14 1.74.49 4.57 1.69 10.02.82 3.74 2.16 7.66 3.25 10.25 3.27 7.79 7.86 10.93 12.51 13.45 7.9 4.28 13.27 5.08 13.27
+          5.08l-6.44 2.63s-3.9-.81-9.22-3.43c-5.07-2.5-10.35-6.73-14.21-15.01-1.67-3.59-2.64-7.07-3.2-9.83-.69-3.42-.8-5.36-.8-5.36z"
+      ></path>
+
+      <path
+        d="m17.94 86.77s.8 6.49 6.16 14.68c6.28 9.58 15.05 11.15 15.05 11.15l-5.83
+          2.4s-6.51-1.99-12.7-10.44c-3.86-5.27-4.94-11.57-4.94-11.57z"
+      ></path>
+
+      <path
+        d="m12.39 102.15s1.46 5.6 4.66 9.78c3.81 4.99 8.66 6.44 8.66 6.44l-4.47 1.98s-3.39-.71-7.1-5.41c-2.82-3.57-3.62-7.67-3.62-7.67z"
+      ></path>
+    </g>
+
+    <path
+      d="m9.96 116.37c-.2-.45-.2-.96.01-1.4l25.47-52.82 4.19 15.75-26.8 38.71c-.72 1.08-2.34.94-2.87-.24z"
+      fill="#fffde7"
+      opacity=".44"
+    ></path>
+
+    <path
+      d="m41.65 83.19c11.9 13.92 25.45 12.18 29.96 8.66 4.52-3.53
+        8.09-15.66-3.76-29.35-12.42-14.34-26.48-10.25-29.73-7.15s-7.39 15.07 3.53 27.84z"
+      fill="url(#a)"
+    ></path>
+
+    <path
+      d="m82.52 88.92c-4.34-3.64-6.65-2.99-9.75-1.7-4 1.66-10.29 2.89-18.83 0l2.57-6.19c5.07 1.71 8.74.88 11.91-.99 4.08-2.4 9.66-5.69 18.34
+        1.6 3.62 3.04 7.33 5.06 10.05 4.14 1.98-.66 3.03-3.61 3.56-5.96.05-.21.13-.81.19-1.34.48-3.67 1.28-11.59 7.18-15.64 6.31-4.33
+        12.94-4.33 12.94-4.33l1.2 11.92c-3.05-.45-5.17.17-6.96 1.16-6.74 3.75-.87 18.15-11.36 22.99-10.09 4.69-18.34-3.4-21.04-5.66z"
+      fill="#03a9f4"
+    ></path>
+
+    <path
+      d="m45.4 73.72-4.34-3.89c7.97-8.9 5.87-15.44
+        4.34-20.2-.31-.96-.6-1.87-.79-2.74-.68-3.08-.82-5.76-.61-8.1-3.06-3.81-4.41-7.8-4.5-8.07-1.86-5.63-.46-11.12
+        2.75-16.27 6.49-10.45 18.24-10.45 18.24-10.45l3.92 10.49c-2.98-.12-12.75.03-15.75 4.76-3.79 5.96-1.3 9.64-1.12
+        10.06.73-.95 1.47-1.71 2.13-2.3 4.79-4.25 8.95-4.86 11.6-4.62 2.98.27 5.68 1.77 7.61 4.23 2.11 2.7 2.98 6.21 2.31
+        9.4-.65 3.11-2.72 5.74-5.83 7.41-5.43 2.92-9.95 2.52-12.98 1.51.02.07.03.15.05.22.11.5.33 1.2.59 2.01 1.77 5.48 5.06 14.18-7.62
+        26.55zm7.35-37.53c.58.42 1.19.77 1.82 1.02 2.1.84 4.39.56 6.99-.84 1.53-.82 1.71-1.7
+        1.77-1.99.18-.87-.12-1.98-.77-2.81-.57-.73-1.23-1.11-2.02-1.19-1.5-.13-3.53.82-5.56 2.63-.97.87-1.71 1.94-2.23 3.18z"
+      fill="#f44336"
+    ></path>
+
+    <path
+      d="m62.77 75.35-6.21-.17s2.95-16.66 12.5-19.46c1.79-.52 3.75-1.05 5.72-1.34 1.17-.18 3.02-.45
+        3.93-.79.21-1.57-.45-3.57-1.19-5.84-.58-1.76-1.18-3.57-1.5-5.55-.62-3.86.41-7.27 2.9-9.62 3.04-2.85 7.95-3.76 13.49-2.5 3.16.72 5.49
+        2.27 7.54 3.63 2.93 1.95 4.64 2.94 8.22.53 4.33-2.92-1.33-14.35-4.34-20.95l11.23-4.68c1.51 3.3 8.8 20.28 3.99 29.97-1.62 3.26-4.41
+        5.42-8.07 6.23-7.96 1.78-12.62-1.32-16.02-3.58-1.61-1.07-3.02-1.91-4.55-2.35-10.63-3.03 4.21 12.61-2.74 19.64-4.17 4.21-14.36
+        5.32-15.02 5.48-6.56 1.58-9.88 11.35-9.88 11.35z"
+      fill="#f48fb1"
+    ></path>
+
+    <path
+      d="m43.99 38.79c-.19 2.2-.28 3.51.29 6.37 2.75 2.02 8.74 2.02 8.74
+        2.02-.26-.81-.49-1.51-.59-2.01-.02-.07-.03-.15-.05-.22-6.09-3.04-8.39-6.16-8.39-6.16z"
+      fill="#c92b27"
+    ></path>
+
+    <path
+      d="m31.53 48.64-10.34-5.07 5.15-7.44 8.11 5.37z"
+      fill="#ffc107"
+    ></path>
+
+    <path
+      d="m16.29 34.6c-5.28-.71-10.66-5.19-11.25-5.7l5.19-6.09c1.57 1.33 4.9 3.56 7.13 3.86z"
+      fill="#fb8c00"
+    ></path>
+
+    <path
+      d="m25.61 21.27-7.6-2.49c.87-2.66 1.1-5.53.65-8.3l7.9-1.27c.65 4.02.32 8.19-.95 12.06z"
+      fill="#03a9f4"
+    ></path>
+
+    <path
+      d="m74.11 14.35h8v10.56h-8z"
+      fill="#fb8c00"
+      transform="matrix(.9769 -.2137 .2137 .9769 -2.3917 17.1437)"
+    ></path>
+
+    <path
+      d="m92.46 17.77-5.5-5.81c2.88-2.73 3.54-6.3 3.54-6.34l7.9 1.29c-.1.63-1.11 6.29-5.94 10.86z"
+      fill="#ffc107"
+    ></path>
+
+    <path
+      d="m96.54 47.3h7.32v8h-7.32z"
+      fill="#fb8c00"
+      transform="matrix(.9545 -.2983 .2983 .9545 -10.7408 32.2313)"
+    ></path>
+
+    <path
+      d="m97.55 113.03-7.95-.94c.34-2.83-1.77-6.3-2.35-7.07l6.4-4.8c.48.63 4.65 6.4 3.9 12.81z"
+      fill="#f44336"
+    ></path>
+
+    <path
+      d="m120.37 102.89c-2.99-.45-6.05-.63-9.07-.52l-.27-8c3.51-.12 7.06.08 10.53.61z"
+      fill="#fb8c00"
+    ></path>
+
+    <path
+      d="m112.29 109.43h8v10.87h-8z"
+      fill="#f48fb1"
+      transform="matrix(.7026 -.7116 .7116 .7026 -47.1516 116.922)"
+    ></path>
+
+    <path
+      d="m88.29 65.14h8.78v8.78h-8.78z"
+      fill="#f44336"
+      transform="matrix(.6583 .7527 -.7527 .6583 84.0086 -46.0064)"
+    ></path></svg>
+</template>

package/src/modules/icons/index.ts

@@ -0,0 +1,32 @@
+// Custom icons
+export { default as HeroGirlIcon } from './HeroGirlIcon.vue';
+export { default as HeroPersonIcon } from './HeroPersonIcon.vue';
+export { default as HeroPersonWithBgIcon } from './HeroPersonWithBgIcon.vue';
+export { default as LocationMarkerIcon } from './LocationMarkerIcon.vue';
+export { default as BuildingCircleCheck } from './BuildingCircleCheck.vue';
+export { default as BuildingCircleXmark } from './BuildingCircleXmark.vue';
+export { default as PartyPopperIcon } from './PartyPopperIcon.vue';
+export { default as CarsIcon } from './CarsIcon.vue';
+export { default as CompanyIcon } from './CompanyIcon.vue';
+export { default as HeroPersonRoundedIcon } from './HeroPersonRoundedIcon.vue';
+export { default as ChatPersonRoundedIcon } from './ChatPersonRoundedIcon.vue';
+
+// Status icons
+export * from './status';
+
+// Hero Icons solid
+export {
+  UserIcon as UserSolidIcon,
+  BellIcon as BellSolidIcon,
+  KeyIcon as KeySolidIcon,
+  BugAntIcon as BugAntSolidIcon,
+  BuildingOfficeIcon as BuildingOfficeSolidIcon,
+  ArrowUpTrayIcon as ArrowUpTraySolidIcon,
+} from '@heroicons/vue/24/solid/index.js';
+
+// Hero Icons outline
+export * from '@heroicons/vue/24/outline/index.js';
+
+// FontAwesome
+export { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+export { byPrefixAndName, all } from '@awesome.me/kit-6a64244790/icons';

package/src/modules/icons/status/ErrorIcon.vue

@@ -0,0 +1,24 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    fill="none"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      r="10"
+      cy="12"
+      cx="12.0269"
+      fill="#DC2626"
+    ></circle>
+
+    <path
+      stroke="white"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M12.0269 7V12.549M12.0269 16.9882H12.0372V17H12.0269V16.9882Z"
+    ></path>
+  </svg>
+</template>

package/src/modules/icons/status/SuccessIcon.vue

@@ -0,0 +1,24 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    fill="none"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      r="10"
+      cy="12"
+      cx="12.0269"
+      fill="#22C55E"
+    ></circle>
+
+    <path
+      stroke="white"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M8 12.8571L10.5714 15.4286L17 9"
+    ></path>
+  </svg>
+</template>

package/src/modules/icons/status/WarningIcon.vue

@@ -0,0 +1,27 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    fill="none"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill="#EAB308"
+      stroke="#EAB308"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M2.31804 17.4787C1.41423 19.0442 2.54451 21 4.35109 21H19.7033C21.5089 21 22.6391 19.0442
+        21.7364 17.4787L14.0613 4.17412C13.1575 2.60863 10.8969 2.60863 9.99311 4.17412L2.31804 17.4787Z"
+    ></path>
+
+    <path
+      stroke="white"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M12 8V13.549M12 17.9882H12.0104V18H12V17.9882Z"
+    ></path>
+  </svg>
+</template>

package/src/modules/icons/status/index.ts

@@ -0,0 +1,3 @@
+export { default as SuccessIcon } from './SuccessIcon.vue';
+export { default as WarningIcon } from './WarningIcon.vue';
+export { default as ErrorIcon } from './ErrorIcon.vue';

package/src/modules/index.ts

@@ -0,0 +1,8 @@
+import { plugin } from './plugins';
+
+export * from './components';
+export * from './composables';
+export * from './layouts';
+export * from './plugins';
+
+export default plugin;

package/src/modules/layouts/Auth/Auth.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+  import { AppNavigationMenu } from '~components';
+  import { useLayout } from '~composables';
+
+  const { layoutImage } = useLayout();
+</script>
+
+<template>
+  <div class="flex min-h-screen flex-col md:flex-row md:bg-secondary">
+    <AppNavigationMenu />
+
+    <div
+      class="flex h-full grow flex-col bg-white md:h-auto md:w-1/2 md:grow-0 md:rounded-l-2xl"
+      data-test-main-wrapper
+    >
+      <slot name="secondaryNavBar"></slot>
+
+      <main class="flex grow justify-center p-10 transition-all md:items-center md:px-24">
+        <div class="mx-auto md:max-w-lg">
+          <slot></slot>
+        </div>
+      </main>
+    </div>
+
+    <div
+      class="hidden w-1/2 md:block"
+      data-test-layout-image-wrapper
+    >
+      <img
+        v-if="layoutImage"
+        :src="layoutImage"
+        class="h-screen w-full object-fill"
+      >
+    </div>
+  </div>
+</template>

package/src/modules/layouts/Auth/__tests__/auth.spec.ts

@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import { useLayout } from '~/modules/composables';
+import Auth from '../Auth.vue';
+import { AppNavigationMenu } from '~/modules/components';
+
+const layout = useLayout();
+
+describe('the Auth Layout component', () => {
+  it('should render AppNavigationMenu', () => {
+    const wrapper = shallowMount(Auth);
+
+    const navigationMenu = wrapper.findComponent(AppNavigationMenu);
+    expect(navigationMenu.exists()).toBe(true);
+  });
+
+  it('should render the default slot', () => {
+    const wrapper = shallowMount(Auth, {
+      slots: {
+        default: 'default slot',
+      },
+    });
+
+    const mainWrapper = wrapper.find('main');
+    expect(mainWrapper.exists()).toBe(true);
+    expect(mainWrapper.text()).toBe('default slot');
+  });
+
+  it('should not render the layout image when null', () => {
+    const wrapper = shallowMount(Auth);
+
+    const layoutImageWrapper = wrapper.find('[data-test-layout-image-wrapper]');
+    expect(layoutImageWrapper.exists()).toBe(true);
+
+    const layoutImage = layoutImageWrapper.find('img');
+    expect(layoutImage.exists()).toBe(false);
+  });
+
+  it('should render the layout image when provided', () => {
+    layout.setLayoutImage('/images/image.png');
+
+    const wrapper = shallowMount(Auth);
+
+    const layoutImageWrapper = wrapper.find('[data-test-layout-image-wrapper]');
+    expect(layoutImageWrapper.exists()).toBe(true);
+
+    const layoutImage = layoutImageWrapper.find('img');
+    expect(layoutImage.exists()).toBe(true);
+    expect(layoutImage.attributes('src')).toBe('/images/image.png');
+  });
+
+  it('can have a secondary navbar', () => {
+    const wrapper = shallowMount(Auth, {
+      slots: {
+        secondaryNavBar: 'secondary nav bar',
+      },
+    });
+
+    const mainWrapper = wrapper.find('[data-test-main-wrapper]');
+    expect(mainWrapper.exists()).toBe(true);
+    expect(mainWrapper.text()).toBe('secondary nav bar');
+  });
+});

package/src/modules/layouts/Base/Base.vue

@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+  import { onMounted, onUnmounted, ref, provide } from 'vue';
+  import { AppNavigationMenu, AppActionBar } from '~components';
+
+  const sidebarLeft = ref<HTMLDivElement | null>(null);
+  const sidebarLeftHasContent = ref(true);
+  const observer = new MutationObserver(calculateSidebarProperties);
+
+  onMounted(() => {
+    if (sidebarLeft.value) {
+      observer.observe(sidebarLeft.value, {
+        childList: true,
+        subtree: true,
+      });
+
+      calculateSidebarProperties();
+    }
+  });
+  onUnmounted(() => {
+    observer.disconnect();
+  });
+
+  function calculateSidebarProperties(): void {
+    const sidebarLeftWrapper = document.getElementById('sidebar-left-wrapper');
+
+    sidebarLeftHasContent.value = !!sidebarLeftWrapper?.innerHTML;
+  }
+
+  provide('sidebarLeftHasContent', sidebarLeftHasContent);
+</script>
+
+<template>
+  <div class="flex h-screen w-screen flex-col bg-zinc-100 md:flex-row md:overflow-hidden">
+    <AppNavigationMenu class="z-50 order-1" />
+
+    <div
+      id="sidebar-left-wrapper"
+      ref="sidebarLeft"
+      class="order-2 flex shrink-0 grow-0 flex-col overflow-y-auto bg-white p-4 transition-all
+        empty:-ml-96 empty:whitespace-nowrap empty:p-0
+        md:sticky md:top-0 md:mb-4 md:max-h-screen md:w-96 md:px-6 md:pt-8"
+      data-test-layout-sidebar-left-wrapper
+    >
+      <slot name="sidebarLeft"></slot>
+    </div>
+
+    <main
+      class="relative order-4 flex shrink-0 grow flex-col overflow-y-auto overflow-x-hidden bg-zinc-100 transition-all
+        duration-300 md:order-3 md:-mt-0 md:h-screen md:basis-0 md:overflow-y-auto md:overflow-x-hidden"
+    >
+      <AppActionBar />
+
+      <div class="w-full px-4 py-8 md:px-6 md:py-12">
+        <slot></slot>
+      </div>
+    </main>
+
+    <div
+      id="sidebar-wrapper"
+      class="order-3 flex w-full max-w-full shrink-0 grow-0 flex-col overflow-x-hidden bg-zinc-100 px-4 pt-8
+        transition-all empty:-mr-96 empty:ml-0 empty:whitespace-nowrap empty:p-0
+        md:sticky md:top-0 md:order-4 md:max-h-screen md:w-96 md:overflow-hidden md:rounded-l-3xl md:bg-white
+        md:p-12 xl:w-110 xl:empty:-mr-110 2xl:w-141 2xl:empty:-mr-141"
+      data-test-layout-sidebar-wrapper
+    >
+      <slot name="sidebar"></slot>
+    </div>
+  </div>
+</template>

package/src/modules/layouts/Base/__tests__/base.spec.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import Base from '../Base.vue';
+import { AppNavigationMenu, AppActionBar } from '~/modules/components';
+
+describe('the Base Layout component', () => {
+  it('should render AppNavigationMenu', () => {
+    const wrapper = shallowMount(Base);
+
+    const navigationMenu = wrapper.findComponent(AppNavigationMenu);
+    expect(navigationMenu.exists()).toBe(true);
+  });
+
+  it('should render the default slot', () => {
+    const wrapper = shallowMount(Base, {
+      slots: {
+        default: 'default slot',
+      },
+    });
+
+    const mainWrapper = wrapper.find('main');
+    expect(mainWrapper.exists()).toBe(true);
+    expect(mainWrapper.text()).toBe('default slot');
+  });
+
+  it('should render the sidebar slot', () => {
+    const wrapper = shallowMount(Base, {
+      slots: {
+        sidebar: 'sidebar slot',
+      },
+    });
+
+    const layoutSidebarWrapper = wrapper.find('[data-test-layout-sidebar-wrapper]');
+    expect(layoutSidebarWrapper.exists()).toBe(true);
+    expect(layoutSidebarWrapper.text()).toBe('sidebar slot');
+  });
+
+  it('should render the left sidebar slot', () => {
+    const wrapper = shallowMount(Base, {
+      slots: {
+        sidebarLeft: 'sidebar slot',
+      },
+    });
+
+    const layoutLeftSidebarWrapper = wrapper.find('[data-test-layout-sidebar-left-wrapper]');
+    expect(layoutLeftSidebarWrapper.exists()).toBe(true);
+    expect(layoutLeftSidebarWrapper.text()).toBe('sidebar slot');
+  });
+
+  it('should render the AppActionBar', () => {
+    const wrapper = shallowMount(Base);
+
+    const actionBar = wrapper.findComponent(AppActionBar);
+    expect(actionBar.exists()).toBe(true);
+  });
+});

package/src/modules/layouts/Platform/Platform.vue

@@ -0,0 +1,96 @@
+<script lang="ts" setup>
+  import { onMounted, onUnmounted, ref, provide, useTemplateRef } from 'vue';
+  import { AppNavigationMenu, AppActionBar } from '~components';
+
+  const sidebarLeft = useTemplateRef<HTMLDivElement | null>('sidebarLeftWrapper');
+  const sidebarRight = useTemplateRef<HTMLDivElement | null>('sidebarRightWrapper');
+  const sidebarLeftHasContent = ref(true);
+  const rightSidebarHasContent = ref(true);
+  const observer = new MutationObserver(calculateSidebarProperties);
+  const observer2 = new MutationObserver(calculateSidebarRightProperties);
+
+  onMounted(() => {
+    if (sidebarLeft.value) {
+      observer.observe(sidebarLeft.value, {
+        childList: true,
+        subtree: true,
+      });
+
+      calculateSidebarProperties();
+    }
+
+    if (sidebarRight.value) {
+      observer2.observe(sidebarRight.value, {
+        childList: true,
+        subtree: true,
+      });
+
+      calculateSidebarRightProperties();
+    }
+  });
+  onUnmounted(() => {
+    observer.disconnect();
+    observer2.disconnect();
+  });
+
+  function calculateSidebarProperties(): void {
+    const sidebarLeftWrapper = document.getElementById('sidebar-left-wrapper');
+
+    sidebarLeftHasContent.value = !!sidebarLeftWrapper?.innerHTML;
+  }
+
+  function calculateSidebarRightProperties(): void {
+    const sidebarRightWrapper = document.getElementById('sidebar-wrapper');
+
+    const clientWidth = sidebarRightWrapper?.children?.[0]?.clientWidth;
+
+    rightSidebarHasContent.value = !!(clientWidth && clientWidth > 0);
+  }
+
+  provide('sidebarLeftHasContent', sidebarLeftHasContent);
+</script>
+
+<template>
+  <div class="flex h-screen w-screen flex-col bg-zinc-100 md:flex-row md:overflow-hidden">
+    <AppNavigationMenu class="z-50 order-1" />
+
+    <div
+      id="sidebar-left-wrapper"
+      ref="sidebarLeftWrapper"
+      :class="{ 'z-200': sidebarLeftHasContent }"
+      class="relative order-2 flex shrink-0 grow-0 flex-col overflow-y-auto rounded-l-2xl bg-white p-4 transition-all
+        empty:-ml-72 empty:whitespace-nowrap empty:p-0
+        md:sticky md:top-0 md:max-h-screen md:w-72 md:px-6 md:pt-8"
+      data-test-layout-sidebar-left-wrapper
+    >
+      <slot name="sidebarLeft"></slot>
+    </div>
+
+    <main
+      class="relative order-4 flex min-h-[calc(100vh-5rem)] shrink-0 flex-col overflow-y-auto overflow-x-hidden
+        bg-zinc-100 transition-all duration-300 context-menu-open:overflow-y-hidden justify-self-start
+        md:order-3 md:-mt-0 md:h-screen md:grow md:basis-0 md:overflow-y-auto md:overflow-x-hidden"
+    >
+      <AppActionBar />
+
+      <div class="w-full px-4 py-8 md:px-8 md:py-12">
+        <slot></slot>
+      </div>
+    </main>
+
+    <div
+      id="sidebar-wrapper"
+      ref="sidebarRightWrapper"
+      :data-has-content="rightSidebarHasContent"
+      class="@container order-5 flex w-full max-w-full shrink-0 grow-0 flex-col overflow-x-hidden bg-zinc-100 px-4 py-8 transition-all
+        empty:ml-0 empty:mr-[-400px] empty:whitespace-nowrap empty:p-0
+        md:sticky md:top-0 md:order-4 md:max-h-screen md:w-[400px] md:overflow-hidden md:rounded-l-3xl md:bg-white
+        md:px-6 md:pb-6 md:pt-12 xl:w-[580px] xl:empty:mr-[-580px]
+        data-[has-content=false]:ml-0 data-[has-content=false]:mr-[-400px] data-[has-content=false]:whitespace-nowrap
+        data-[has-content=false]:p-0 xl:data-[has-content=false]:mr-[-580px]"
+      data-test-layout-sidebar-wrapper
+    >
+      <slot name="sidebar"></slot>
+    </div>
+  </div>
+</template>