From ac4e36060a63d6118544e7ff967458b73d9b970b Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Wed, 19 Apr 2023 13:56:47 +0300
Subject: [PATCH 1/9] raw: layout

---
 .../components/va-layout/VaLayout.demo.vue    | 65 ++++++++++++++++
 .../ui/src/components/va-layout/VaLayout.vue  | 74 +++++++++++++++++++
 packages/ui/src/components/va-layout/index.ts |  0
 3 files changed, 139 insertions(+)
 create mode 100644 packages/ui/src/components/va-layout/VaLayout.demo.vue
 create mode 100644 packages/ui/src/components/va-layout/VaLayout.vue
 create mode 100644 packages/ui/src/components/va-layout/index.ts

diff --git a/packages/ui/src/components/va-layout/VaLayout.demo.vue b/packages/ui/src/components/va-layout/VaLayout.demo.vue
new file mode 100644
index 0000000000..ea3041bcf6
--- /dev/null
+++ b/packages/ui/src/components/va-layout/VaLayout.demo.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import VaLayout from './VaLayout.vue'
+
+const state = reactive({
+  doShowSidebar: false,
+})
+</script>
+
+<template>
+  <VbDemo>
+    <VbCard title="All slots">
+      <VaLayout style="background-color: var(--va-primary); width: 300px; height: 300px;">
+        <template #content>
+          <div style="background-color: #ff00ff; height: 100%;">
+            Content
+          </div>
+        </template>
+        <template #left>
+          <div style="background-color: var(--va-secondary); height: 100%;">
+            Leftbar
+          </div>
+        </template>
+        <template #right>
+          <div style="background-color: var(--va-secondary); height: 100%;">
+            Rightbar
+          </div>
+        </template>
+
+        <template #top>
+          <div style="background-color: var(--va-primary);">
+            Header
+          </div>
+        </template>
+
+        <template #bottom>
+          <div style="background-color: var(--va-danger);">
+            Footer
+          </div>
+        </template>
+      </VaLayout>
+    </VbCard>
+
+    <VbCard title="Top, left, content slots">
+      <VaLayout style="background-color: var(--va-primary); width: 300px; height: 300px;">
+        <template #content>
+          <div style="background-color: #ff00ff; height: 100%;">
+            Content
+          </div>
+        </template>
+        <template #left>
+          <div style="background-color: var(--va-secondary); height: 100%;">
+            Leftbar
+          </div>
+        </template>
+
+        <template #top>
+          <div style="background-color: var(--va-primary);">
+            Header
+          </div>
+        </template>
+      </VaLayout>
+    </VbCard>
+  </VbDemo>
+</template>
diff --git a/packages/ui/src/components/va-layout/VaLayout.vue b/packages/ui/src/components/va-layout/VaLayout.vue
new file mode 100644
index 0000000000..673da68b03
--- /dev/null
+++ b/packages/ui/src/components/va-layout/VaLayout.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="va-layout">
+    <slot name="top" />
+    <main class="va-layout__main">
+      <div class="va-layout__sidebar va-layout__child">
+        <slot name="left" />
+      </div>
+      <div class="va-layout__content va-layout__child">
+        <slot name="content" />
+      </div>
+      <div class="va-layout__sidebar va-layout__child">
+        <slot name="right" />
+      </div>
+    </main>
+    <slot name="bottom" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue'
+
+export default defineComponent({
+  name: 'VaLayout',
+  setup (props, { slots }) {
+    return {
+      verticalTemplate: computed(() => {
+        return [
+          slots.top && 'min-content',
+          '1fr',
+          slots.bottom && 'min-content',
+        ].filter(Boolean).join(' ')
+      }),
+      horizontalTemplate: computed(() => {
+        return [
+          slots.left && 'min-content',
+          '1fr',
+          slots.right && 'min-content',
+        ].filter(Boolean).join(' ')
+      }),
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.va-layout {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: v-bind(verticalTemplate);
+  gap: 0;
+  height: 100%;
+  width: 100%;
+
+  &__main {
+    display: grid;
+    grid-template-columns: v-bind(horizontalTemplate);
+    grid-template-rows: 1fr;
+    height: 100%;
+
+    & > .va-layout__child {
+      height: 100%;
+      overflow: hidden;
+
+      &:empty {
+        display: none;
+      }
+    }
+
+    .va-layout__content {
+      overflow: auto;
+    }
+  }
+}
+</style>
diff --git a/packages/ui/src/components/va-layout/index.ts b/packages/ui/src/components/va-layout/index.ts
new file mode 100644
index 0000000000..e69de29bb2

From 0a4b1ff7ce9c793fe7969479916b93e89e159c76 Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Fri, 28 Apr 2023 08:19:03 +0300
Subject: [PATCH 2/9] raw: template grid areas

---
 packages/docs/page-config/navigationRoutes.ts |  9 +-
 .../ui-elements/layout/examples/Default.vue   | 38 +++++++++
 .../page-config/ui-elements/layout/index.ts   |  7 ++
 .../ui-elements/layout/translations/en.json   |  3 +
 packages/nuxt/src/config/components.ts        |  1 +
 packages/ui/src/components/index.ts           |  1 +
 .../ui/src/components/va-layout/VaLayout.vue  | 82 +++++++++++++++----
 .../va-layout/hooks/useGridTemplateArea.ts    | 64 +++++++++++++++
 packages/ui/src/components/va-layout/index.ts |  4 +
 .../ui/src/services/vue-plugin/components.ts  |  1 +
 10 files changed, 191 insertions(+), 19 deletions(-)
 create mode 100644 packages/docs/page-config/ui-elements/layout/examples/Default.vue
 create mode 100644 packages/docs/page-config/ui-elements/layout/index.ts
 create mode 100644 packages/docs/page-config/ui-elements/layout/translations/en.json
 create mode 100644 packages/ui/src/components/va-layout/hooks/useGridTemplateArea.ts

diff --git a/packages/docs/page-config/navigationRoutes.ts b/packages/docs/page-config/navigationRoutes.ts
index 5f5f0f8135..52a29da2b9 100644
--- a/packages/docs/page-config/navigationRoutes.ts
+++ b/packages/docs/page-config/navigationRoutes.ts
@@ -277,9 +277,16 @@ export const navigationRoutes: NavigationRoute[] = [
         name: "color-input",
         displayName: "menu.colorInput",
       },
-  
+      
       {
         category: 'menu.categories.layout',
+        name: 'layout',
+        displayName: 'menu.layout',
+        meta: {
+          badge: 'new',
+        }
+      },
+      {
         name: 'aspect-ratio',
         displayName: 'menu.aspectRatio',
         meta: {
diff --git a/packages/docs/page-config/ui-elements/layout/examples/Default.vue b/packages/docs/page-config/ui-elements/layout/examples/Default.vue
new file mode 100644
index 0000000000..fe5d528abf
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/layout/examples/Default.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+  const showSidebar = ref(false)
+</script>
+
+<template>
+  <VaLayout style="height: 500px">
+    <template #top>
+      <VaNavbar color="primary">
+        <template #left>
+          <VaButton @click="showSidebar = !showSidebar" :icon="showSidebar ? 'menu_open' : 'menu'" />
+        </template>
+        Hello!
+      </VaNavbar>
+    </template>
+
+    <template #left>
+      <VaSidebar v-model="showSidebar">
+        <VaSidebarItem>
+          <VaSidebarItemContent>
+            <VaIcon name="home" /> Home
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+        <VaSidebarItem>
+          <VaSidebarItemContent>
+            <VaIcon name="phone" /> About
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+      </VaSidebar>
+    </template>
+
+    <template #content>
+      <div class="p-4">
+        <h1>Content</h1>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
+      </div>
+    </template>
+  </VaLayout>
+</template>
\ No newline at end of file
diff --git a/packages/docs/page-config/ui-elements/layout/index.ts b/packages/docs/page-config/ui-elements/layout/index.ts
new file mode 100644
index 0000000000..6ff1209906
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/layout/index.ts
@@ -0,0 +1,7 @@
+export default definePageConfig({
+  blocks: [
+    block.title('Layout.title'),
+
+    block.example('Default')
+  ]
+})
\ No newline at end of file
diff --git a/packages/docs/page-config/ui-elements/layout/translations/en.json b/packages/docs/page-config/ui-elements/layout/translations/en.json
new file mode 100644
index 0000000000..03553211af
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/layout/translations/en.json
@@ -0,0 +1,3 @@
+{
+  "title": "Layout"
+}
\ No newline at end of file
diff --git a/packages/nuxt/src/config/components.ts b/packages/nuxt/src/config/components.ts
index afbb1b11d8..00ab8c3fa5 100644
--- a/packages/nuxt/src/config/components.ts
+++ b/packages/nuxt/src/config/components.ts
@@ -43,6 +43,7 @@ export default [
   'VaInfiniteScroll',
   'VaInnerLoading',
   'VaInput',
+  'VaLayout',
   'VaList',
   'VaListItem',
   'VaListItemLabel',
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 0b5b94091f..a48a501aea 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -47,6 +47,7 @@ export * from './va-image'
 export * from './va-infinite-scroll'
 export * from './va-inner-loading'
 export * from './va-input'
+export * from './va-layout'
 export * from './va-list'
 export * from './va-modal'
 export * from './va-navbar'
diff --git a/packages/ui/src/components/va-layout/VaLayout.vue b/packages/ui/src/components/va-layout/VaLayout.vue
index 673da68b03..7cbfa1e2bc 100644
--- a/packages/ui/src/components/va-layout/VaLayout.vue
+++ b/packages/ui/src/components/va-layout/VaLayout.vue
@@ -1,6 +1,23 @@
 <template>
+  {{  templateArea }}
   <div class="va-layout">
-    <slot name="top" />
+    <div class="va-layout__top">
+      <slot name="top" />
+    </div>
+    <div class="va-layout__left">
+      <slot name="left" />
+    </div>
+    <div class="va-layout__right">
+      <slot name="right" />
+    </div>
+    <div class="va-layout__bottom">
+      <slot name="bottom" />
+    </div>
+
+    <div class="va-layout__content">
+      <slot name="content" />
+    </div>
+    <!-- <slot name="top" />
     <main class="va-layout__main">
       <div class="va-layout__sidebar va-layout__child">
         <slot name="left" />
@@ -12,17 +29,24 @@
         <slot name="right" />
       </div>
     </main>
-    <slot name="bottom" />
+    <slot name="bottom" /> -->
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
+import { useGridTemplateArea, useGridTemplateAreaProps } from './hooks/useGridTemplateArea'
 
 export default defineComponent({
   name: 'VaLayout',
+
+  props: {
+    ...useGridTemplateAreaProps,
+  },
+
   setup (props, { slots }) {
     return {
+      templateArea: useGridTemplateArea(props),
       verticalTemplate: computed(() => {
         return [
           slots.top && 'min-content',
@@ -46,29 +70,51 @@ export default defineComponent({
 .va-layout {
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: v-bind(verticalTemplate);
+  grid-template-rows: 1fr;
+  grid-template-areas: v-bind(templateArea);
   gap: 0;
   height: 100%;
   width: 100%;
 
-  &__main {
-    display: grid;
-    grid-template-columns: v-bind(horizontalTemplate);
-    grid-template-rows: 1fr;
-    height: 100%;
+  &__top {
+    grid-area: top;
+  }
 
-    & > .va-layout__child {
-      height: 100%;
-      overflow: hidden;
+  &__left {
+    grid-area: left;
+  }
 
-      &:empty {
-        display: none;
-      }
-    }
+  &__right {
+    grid-area: right;
+  }
 
-    .va-layout__content {
-      overflow: auto;
-    }
+  &__bottom {
+    grid-area: bottom;
+  }
+
+  &__content {
+    grid: content;
+    overflow: auto;
   }
+
+  // &__main {
+  //   display: grid;
+  //   grid-template-columns: v-bind(horizontalTemplate);
+  //   grid-template-rows: 1fr;
+  //   height: 100%;
+
+  //   & > .va-layout__child {
+  //     height: 100%;
+  //     overflow: hidden;
+
+  //     &:empty {
+  //       display: none;
+  //     }
+  //   }
+
+  //   .va-layout__content {
+  //     overflow: auto;
+  //   }
+  // }
 }
 </style>
diff --git a/packages/ui/src/components/va-layout/hooks/useGridTemplateArea.ts b/packages/ui/src/components/va-layout/hooks/useGridTemplateArea.ts
new file mode 100644
index 0000000000..0a682f931b
--- /dev/null
+++ b/packages/ui/src/components/va-layout/hooks/useGridTemplateArea.ts
@@ -0,0 +1,64 @@
+import { ExtractPropTypes, computed } from 'vue'
+
+export const useGridTemplateAreaProps = {
+  topOrder: {
+    type: Number,
+    default: 0,
+  },
+  leftOrder: {
+    type: Number,
+    default: 0,
+  },
+  rightOrder: {
+    type: Number,
+    default: 0,
+  },
+  bottomOrder: {
+    type: Number,
+    default: 0,
+  },
+}
+
+const areaIndexes = {
+  top: [0, 1, 2],
+  left: [0, 3, 6],
+  right: [2, 5, 8],
+  bottom: [6, 7, 8],
+}
+
+type AreaName = 'top' | 'left' | 'right' | 'bottom'
+const areaElements = (['left', 'right', 'top', 'bottom'] as const)
+
+export const useGridTemplateArea = (props: ExtractPropTypes< typeof useGridTemplateAreaProps>) => {
+  const sort = () => {
+    return [...areaElements].sort((a, b) => {
+      return props[`${a}Order`] - props[`${b}Order`]
+    })
+  }
+
+  const applyTemplate = (template: string[], areaIndexes: number[], areaName: AreaName) => {
+    areaIndexes.forEach((index) => {
+      template[index] = areaName
+    })
+  }
+
+  return computed(() => {
+    const sorted = sort()
+
+    const template = [
+      '.', '.', '.',
+      '.', '.', '.',
+      '.', '.', '.',
+    ].map(() => 'content')
+
+    sorted.forEach((areaName) => {
+      applyTemplate(template, areaIndexes[areaName], areaName)
+    })
+
+    return [
+      '"' + template.slice(0, 3).join(' ') + '"',
+      '"' + template.slice(3, 6).join(' ') + '"',
+      '"' + template.slice(6, 9).join(' ') + '"',
+    ].join(' ')
+  })
+}
diff --git a/packages/ui/src/components/va-layout/index.ts b/packages/ui/src/components/va-layout/index.ts
index e69de29bb2..a3e35bdef3 100644
--- a/packages/ui/src/components/va-layout/index.ts
+++ b/packages/ui/src/components/va-layout/index.ts
@@ -0,0 +1,4 @@
+import { withConfigTransport } from '../../services/config-transport'
+import _VaLayout from './VaLayout.vue'
+
+export const VaLayout = withConfigTransport(_VaLayout)
diff --git a/packages/ui/src/services/vue-plugin/components.ts b/packages/ui/src/services/vue-plugin/components.ts
index dd9113928a..d7f8ae0031 100644
--- a/packages/ui/src/services/vue-plugin/components.ts
+++ b/packages/ui/src/services/vue-plugin/components.ts
@@ -44,6 +44,7 @@ export {
   VaInfiniteScroll,
   VaInnerLoading,
   VaInput,
+  VaLayout,
   VaList,
   VaListItem,
   VaListItemLabel,

From 38577f87c09519714db126194ecc3124234cf00e Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Fri, 28 Apr 2023 12:25:28 +0300
Subject: [PATCH 3/9] feat(layout): area order

---
 .../ui-elements/layout/examples/AllSlots.vue  | 61 +++++++++++++++++
 .../ui-elements/layout/examples/Order.vue     | 67 +++++++++++++++++++
 .../page-config/ui-elements/layout/index.ts   |  4 +-
 .../components/va-layout/VaLayout.demo.vue    | 60 +++++++++++++++++
 .../ui/src/components/va-layout/VaLayout.vue  | 39 +----------
 5 files changed, 193 insertions(+), 38 deletions(-)
 create mode 100644 packages/docs/page-config/ui-elements/layout/examples/AllSlots.vue
 create mode 100644 packages/docs/page-config/ui-elements/layout/examples/Order.vue

diff --git a/packages/docs/page-config/ui-elements/layout/examples/AllSlots.vue b/packages/docs/page-config/ui-elements/layout/examples/AllSlots.vue
new file mode 100644
index 0000000000..fb95d70342
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/layout/examples/AllSlots.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+  const showLeftSidebar = ref(true)
+  const showRightSidebar = ref(true)
+</script>
+
+<template>
+  <VaLayout style="height: 500px">
+    <template #top>
+      <VaNavbar color="primary">
+        <template #left>
+          <VaButton @click="showLeftSidebar = !showLeftSidebar" :icon="showLeftSidebar ? 'menu_open' : 'menu'" />
+        </template>
+        Hello!
+        <template #right>
+          <VaButton @click="showRightSidebar = !showRightSidebar" :icon="showRightSidebar ? 'menu_open' : 'menu'" />
+        </template>
+      </VaNavbar>
+    </template>
+
+    <template #left>
+      <VaSidebar v-model="showLeftSidebar">
+        <VaSidebarItem>
+          <VaSidebarItemContent>
+            <VaIcon name="home" /> Home
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+        <VaSidebarItem>
+          <VaSidebarItemContent>
+            <VaIcon name="phone" /> About
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+      </VaSidebar>
+    </template>
+
+    <template #content>
+      <div class="p-4">
+        <h1>Content</h1>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
+      </div>
+    </template>
+
+    <template #right>
+      <VaSidebar v-model="showRightSidebar">
+        <VaSidebarItem>
+          <VaSidebarItemContent>
+            <VaIcon name="home" /> Home
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+        <VaSidebarItem>
+          <VaSidebarItemContent>
+            <VaIcon name="phone" /> About
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+      </VaSidebar>
+    </template>
+
+    <template #bottom>
+      Footer!
+    </template>
+  </VaLayout>
+</template>
\ No newline at end of file
diff --git a/packages/docs/page-config/ui-elements/layout/examples/Order.vue b/packages/docs/page-config/ui-elements/layout/examples/Order.vue
new file mode 100644
index 0000000000..c3b89d26b7
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/layout/examples/Order.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+  const showLeftSidebar = ref(true)
+  const showRightSidebar = ref(true)
+</script>
+
+<template>
+  <VaLayout 
+    :left-order="1"
+    :top-order="2"
+    style="height: 500px"
+  >
+    <template #top>
+      <VaNavbar color="primary">
+        <template #left>
+          <VaButton @click="showLeftSidebar = !showLeftSidebar" :icon="showLeftSidebar ? 'menu_open' : 'menu'" />
+        </template>
+        Hello!
+        <template #right>
+          <VaButton @click="showRightSidebar = !showRightSidebar" :icon="showRightSidebar ? 'menu_open' : 'menu'" />
+        </template>
+      </VaNavbar>
+    </template>
+
+    <template #left>
+      <VaSidebar v-model="showLeftSidebar">
+        <VaSidebarItem>
+          <VaSidebarItemContent>
+            <VaIcon name="home" /> Home
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+        <VaSidebarItem>
+          <VaSidebarItemContent>
+            <VaIcon name="phone" /> About
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+      </VaSidebar>
+    </template>
+
+    <template #content>
+      <div class="p-4">
+        <h1>Content</h1>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
+      </div>
+    </template>
+
+    <template #right>
+      <VaSidebar v-model="showRightSidebar">
+        <VaSidebarItem>
+          <VaSidebarItemContent>
+            <VaIcon name="home" /> Home
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+        <VaSidebarItem>
+          <VaSidebarItemContent>
+            <VaIcon name="phone" /> About
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+      </VaSidebar>
+    </template>
+
+    <template #bottom>
+      <VaNavbar color="primary">
+        Footer
+      </VaNavbar>
+    </template>
+  </VaLayout>
+</template>
\ No newline at end of file
diff --git a/packages/docs/page-config/ui-elements/layout/index.ts b/packages/docs/page-config/ui-elements/layout/index.ts
index 6ff1209906..7820740ce7 100644
--- a/packages/docs/page-config/ui-elements/layout/index.ts
+++ b/packages/docs/page-config/ui-elements/layout/index.ts
@@ -2,6 +2,8 @@ export default definePageConfig({
   blocks: [
     block.title('Layout.title'),
 
-    block.example('Default')
+    block.example('Default'),
+    block.example('AllSlots'),
+    block.example('Order'),
   ]
 })
\ No newline at end of file
diff --git a/packages/ui/src/components/va-layout/VaLayout.demo.vue b/packages/ui/src/components/va-layout/VaLayout.demo.vue
index ea3041bcf6..3a2bbf80ae 100644
--- a/packages/ui/src/components/va-layout/VaLayout.demo.vue
+++ b/packages/ui/src/components/va-layout/VaLayout.demo.vue
@@ -61,5 +61,65 @@ const state = reactive({
         </template>
       </VaLayout>
     </VbCard>
+
+    <VbCard title="Left order">
+      <VaLayout
+        style="background-color: var(--va-primary); width: 300px; height: 300px;"
+        :left-order="1"
+      >
+        <template #content>
+          <div style="background-color: #ff00ff; height: 100%;">
+            Content
+          </div>
+        </template>
+        <template #left>
+          <div style="background-color: var(--va-secondary); height: 100%;">
+            Leftbar
+          </div>
+        </template>
+
+        <template #top>
+          <div style="background-color: var(--va-primary);">
+            Header
+          </div>
+        </template>
+      </VaLayout>
+    </VbCard>
+
+    <VbCard title="Left order 1, bottom order 2">
+      <VaLayout
+        style="background-color: var(--va-primary); width: 300px; height: 300px;"
+        :left-order="1"
+        :bottom-order="2"
+      >
+        <template #content>
+          <div style="background-color: #ff00ff; height: 100%;">
+            Content
+          </div>
+        </template>
+        <template #left>
+          <div style="background-color: var(--va-secondary); height: 100%;">
+            Leftbar
+          </div>
+        </template>
+        <template #right>
+          <div style="background-color: var(--va-secondary); height: 100%;">
+            Rightbar
+          </div>
+        </template>
+
+        <template #top>
+          <div style="background-color: var(--va-primary);">
+            Header
+          </div>
+        </template>
+
+        <template #bottom>
+          <div style="background-color: var(--va-danger);">
+            Footer
+          </div>
+        </template>
+      </VaLayout>
+    </VbCard>
   </VbDemo>
 </template>
diff --git a/packages/ui/src/components/va-layout/VaLayout.vue b/packages/ui/src/components/va-layout/VaLayout.vue
index 7cbfa1e2bc..0173a01bf7 100644
--- a/packages/ui/src/components/va-layout/VaLayout.vue
+++ b/packages/ui/src/components/va-layout/VaLayout.vue
@@ -1,5 +1,4 @@
 <template>
-  {{  templateArea }}
   <div class="va-layout">
     <div class="va-layout__top">
       <slot name="top" />
@@ -13,23 +12,9 @@
     <div class="va-layout__bottom">
       <slot name="bottom" />
     </div>
-
     <div class="va-layout__content">
       <slot name="content" />
     </div>
-    <!-- <slot name="top" />
-    <main class="va-layout__main">
-      <div class="va-layout__sidebar va-layout__child">
-        <slot name="left" />
-      </div>
-      <div class="va-layout__content va-layout__child">
-        <slot name="content" />
-      </div>
-      <div class="va-layout__sidebar va-layout__child">
-        <slot name="right" />
-      </div>
-    </main>
-    <slot name="bottom" /> -->
   </div>
 </template>
 
@@ -69,8 +54,8 @@ export default defineComponent({
 <style lang="scss" scoped>
 .va-layout {
   display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr;
+  grid-template-columns: v-bind(verticalTemplate);
+  grid-template-rows: v-bind(horizontalTemplate);
   grid-template-areas: v-bind(templateArea);
   gap: 0;
   height: 100%;
@@ -96,25 +81,5 @@ export default defineComponent({
     grid: content;
     overflow: auto;
   }
-
-  // &__main {
-  //   display: grid;
-  //   grid-template-columns: v-bind(horizontalTemplate);
-  //   grid-template-rows: 1fr;
-  //   height: 100%;
-
-  //   & > .va-layout__child {
-  //     height: 100%;
-  //     overflow: hidden;
-
-  //     &:empty {
-  //       display: none;
-  //     }
-  //   }
-
-  //   .va-layout__content {
-  //     overflow: auto;
-  //   }
-  // }
 }
 </style>

From fad92d78e167b2d3b461d1feb8f2059b07da64bb Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Sun, 9 Jul 2023 12:39:23 +0300
Subject: [PATCH 4/9] feat: layout with animations

---
 .../components/va-layout/VaLayout.demo.vue    | 26 +++++++++++++++++++
 .../ui/src/components/va-layout/VaLayout.vue  | 14 +++++-----
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/va-layout/VaLayout.demo.vue b/packages/ui/src/components/va-layout/VaLayout.demo.vue
index 3a2bbf80ae..302d0570b3 100644
--- a/packages/ui/src/components/va-layout/VaLayout.demo.vue
+++ b/packages/ui/src/components/va-layout/VaLayout.demo.vue
@@ -121,5 +121,31 @@ const state = reactive({
         </template>
       </VaLayout>
     </VbCard>
+
+    <VbCard title="With animation">
+      <VaLayout
+        style="background-color: var(--va-primary); width: 300px; height: 300px;"
+      >
+        <template #content>
+          <div style="background-color: #ff00ff; height: 100%; width: 100%;">
+            Content
+          </div>
+        </template>
+        <template #left>
+          <div
+            style="
+              background-color: var(--va-secondary);
+              height: 100%;
+              transition: width 0.3s ease-in-out;
+            "
+            :style="{ width: state.doShowSidebar ? '200px' : '100px' }"
+          >
+            <button @click="state.doShowSidebar = !state.doShowSidebar">
+              Toggle
+            </button>
+          </div>
+        </template>
+      </VaLayout>
+    </VbCard>
   </VbDemo>
 </template>
diff --git a/packages/ui/src/components/va-layout/VaLayout.vue b/packages/ui/src/components/va-layout/VaLayout.vue
index 0173a01bf7..06d3531581 100644
--- a/packages/ui/src/components/va-layout/VaLayout.vue
+++ b/packages/ui/src/components/va-layout/VaLayout.vue
@@ -34,16 +34,16 @@ export default defineComponent({
       templateArea: useGridTemplateArea(props),
       verticalTemplate: computed(() => {
         return [
-          slots.top && 'min-content',
+          slots.top ? 'min-content' : '0fr',
           '1fr',
-          slots.bottom && 'min-content',
+          slots.bottom ? 'min-content' : '0fr',
         ].filter(Boolean).join(' ')
       }),
       horizontalTemplate: computed(() => {
         return [
-          slots.left && 'min-content',
+          slots.left ? 'min-content' : '0fr',
           '1fr',
-          slots.right && 'min-content',
+          slots.right ? 'min-content' : '0fr',
         ].filter(Boolean).join(' ')
       }),
     }
@@ -54,8 +54,8 @@ export default defineComponent({
 <style lang="scss" scoped>
 .va-layout {
   display: grid;
-  grid-template-columns: v-bind(verticalTemplate);
-  grid-template-rows: v-bind(horizontalTemplate);
+  grid-template-columns:  v-bind(horizontalTemplate);
+  grid-template-rows: v-bind(verticalTemplate);
   grid-template-areas: v-bind(templateArea);
   gap: 0;
   height: 100%;
@@ -78,7 +78,7 @@ export default defineComponent({
   }
 
   &__content {
-    grid: content;
+    grid-area: content;
     overflow: auto;
   }
 }

From 7f50c6db2bcd4c8f0ac69a63cf6ab24b83cb9018 Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Sun, 9 Jul 2023 12:55:27 +0300
Subject: [PATCH 5/9] feat: layout with absolute drawers

---
 .../components/va-layout/VaLayout.demo.vue    | 125 +++++++++++++++++-
 .../ui/src/components/va-layout/VaLayout.vue  |  47 ++++---
 2 files changed, 151 insertions(+), 21 deletions(-)

diff --git a/packages/ui/src/components/va-layout/VaLayout.demo.vue b/packages/ui/src/components/va-layout/VaLayout.demo.vue
index 302d0570b3..5becd1c229 100644
--- a/packages/ui/src/components/va-layout/VaLayout.demo.vue
+++ b/packages/ui/src/components/va-layout/VaLayout.demo.vue
@@ -3,7 +3,7 @@ import { reactive } from 'vue'
 import VaLayout from './VaLayout.vue'
 
 const state = reactive({
-  doShowSidebar: false,
+  doShowSidebar: true,
 })
 </script>
 
@@ -122,6 +122,65 @@ const state = reactive({
       </VaLayout>
     </VbCard>
 
+    <VbCard title="Right order 1, bottom order 2">
+      <VaLayout
+        style="background-color: var(--va-primary); width: 300px; height: 300px;"
+        :right-order="1"
+        :bottom-order="2"
+      >
+        <template #content>
+          <div style="background-color: #ff00ff; height: 100%;">
+            Content
+          </div>
+        </template>
+        <template #left>
+          <div style="background-color: var(--va-secondary); height: 100%;">
+            Leftbar
+          </div>
+        </template>
+        <template #right>
+          <div style="background-color: var(--va-secondary); height: 100%;">
+            Rightbar
+          </div>
+        </template>
+
+        <template #top>
+          <div style="background-color: var(--va-primary);">
+            Header
+          </div>
+        </template>
+
+        <template #bottom>
+          <div style="background-color: var(--va-danger);">
+            Footer
+          </div>
+        </template>
+      </VaLayout>
+    </VbCard>
+
+    <VbCard title="Right order 1">
+      <VaLayout
+        style="background-color: var(--va-primary); width: 300px; height: 300px;"
+        :right-order="1"
+      >
+        <template #content>
+          <div style="background-color: #ff00ff; height: 100%;">
+            Content
+          </div>
+        </template>
+        <template #right>
+          <div style="background-color: var(--va-secondary); height: 100%; width: 200px;">
+            Rightbar width 200px
+          </div>
+        </template>
+        <template #bottom>
+          <div style="background-color: var(--va-danger);">
+            Footer
+          </div>
+        </template>
+      </VaLayout>
+    </VbCard>
+
     <VbCard title="With animation">
       <VaLayout
         style="background-color: var(--va-primary); width: 300px; height: 300px;"
@@ -147,5 +206,69 @@ const state = reactive({
         </template>
       </VaLayout>
     </VbCard>
+
+    <VbCard title="Absolute">
+      <VaLayout
+        style="background-color: var(--va-primary); width: 300px; height: 300px;"
+        :right-order="1"
+      >
+        <template #top>
+          <div style="background-color: var(--va-primary); color: var(--va-on-primary);">
+            <button @click="state.doShowSidebar = !state.doShowSidebar">
+              Toggle
+            </button>
+          </div>
+        </template>
+        <template #content>
+          <div style="background-color: #ff00ff; height: 100%; width: 100%;">
+            Content
+          </div>
+        </template>
+        <template #left>
+          <div
+            style="
+              background-color: var(--va-secondary);
+              height: 100%;
+              transition: width 0.3s ease-in-out;
+              position: absolute;
+            "
+            :style="{ width: state.doShowSidebar ? '200px' : '0px' }"
+          >
+          </div>
+        </template>
+      </VaLayout>
+
+      <VaLayout
+        style="background-color: var(--va-primary); width: 300px; height: 300px;"
+        :right-order="1"
+      >
+        <template #top>
+          <div style="background-color: var(--va-primary); color: var(--va-on-primary);">
+            <button @click="state.doShowSidebar = !state.doShowSidebar">
+              Toggle
+            </button>
+          </div>
+        </template>
+        <template #content>
+          <div style="background-color: #ff00ff; height: 100%; width: 100%;">
+            Content Order 0
+          </div>
+        </template>
+        <template #right>
+          <div
+            style="
+              background-color: var(--va-secondary);
+              height: 100%;
+              transition: width 0.3s ease-in-out;
+              position: absolute;
+              right: 0;
+            "
+            :style="{ width: state.doShowSidebar ? '200px' : '0px' }"
+          >
+            Order 1
+          </div>
+        </template>
+      </VaLayout>
+    </VbCard>
   </VbDemo>
 </template>
diff --git a/packages/ui/src/components/va-layout/VaLayout.vue b/packages/ui/src/components/va-layout/VaLayout.vue
index 06d3531581..3cdab1fcfb 100644
--- a/packages/ui/src/components/va-layout/VaLayout.vue
+++ b/packages/ui/src/components/va-layout/VaLayout.vue
@@ -1,18 +1,20 @@
 <template>
   <div class="va-layout">
-    <div class="va-layout__top">
+    <div class="va-layout__area va-layout__area--top">
       <slot name="top" />
     </div>
-    <div class="va-layout__left">
+    <div
+      class="va-layout__area va-layout__area--left"
+    >
       <slot name="left" />
     </div>
-    <div class="va-layout__right">
+    <div class="va-layout__area va-layout__area--right">
       <slot name="right" />
     </div>
-    <div class="va-layout__bottom">
+    <div class="va-layout__area va-layout__area--bottom">
       <slot name="bottom" />
     </div>
-    <div class="va-layout__content">
+    <div class="va-layout__area va-layout__area--content">
       <slot name="content" />
     </div>
   </div>
@@ -60,26 +62,31 @@ export default defineComponent({
   gap: 0;
   height: 100%;
   width: 100%;
+  position: relative;
+  overflow: hidden;
 
-  &__top {
-    grid-area: top;
-  }
+  &__area {
+    &--top {
+      grid-area: top;
+    }
 
-  &__left {
-    grid-area: left;
-  }
+    &--left {
+      grid-area: left;
+      position: relative;
+    }
 
-  &__right {
-    grid-area: right;
-  }
+    &--right {
+      grid-area: right;
+    }
 
-  &__bottom {
-    grid-area: bottom;
-  }
+    &--bottom {
+      grid-area: bottom;
+    }
 
-  &__content {
-    grid-area: content;
-    overflow: auto;
+    &--content {
+      grid-area: content;
+      overflow: auto;
+    }
   }
 }
 </style>

From d4496c9a39c70519f4c7a040e30573a8aa3b214f Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Sun, 9 Jul 2023 13:53:42 +0300
Subject: [PATCH 6/9] feat(layout): use better prop config

---
 .../components/va-layout/VaLayout.demo.vue    | 184 +++++++++++++-----
 .../ui/src/components/va-layout/VaLayout.vue  |  69 +++++--
 .../va-layout/hooks/useGridTemplateArea.ts    |  28 +--
 .../components/va-layout/hooks/useLayout.ts   |  30 +++
 4 files changed, 221 insertions(+), 90 deletions(-)
 create mode 100644 packages/ui/src/components/va-layout/hooks/useLayout.ts

diff --git a/packages/ui/src/components/va-layout/VaLayout.demo.vue b/packages/ui/src/components/va-layout/VaLayout.demo.vue
index 5becd1c229..5059e2bf65 100644
--- a/packages/ui/src/components/va-layout/VaLayout.demo.vue
+++ b/packages/ui/src/components/va-layout/VaLayout.demo.vue
@@ -8,33 +8,33 @@ const state = reactive({
 </script>
 
 <template>
-  <VbDemo>
+  <VbDemo class="layout-demo">
     <VbCard title="All slots">
       <VaLayout style="background-color: var(--va-primary); width: 300px; height: 300px;">
         <template #content>
-          <div style="background-color: #ff00ff; height: 100%;">
+          <div>
             Content
           </div>
         </template>
         <template #left>
-          <div style="background-color: var(--va-secondary); height: 100%;">
+          <div style="height: 100%;">
             Leftbar
           </div>
         </template>
         <template #right>
-          <div style="background-color: var(--va-secondary); height: 100%;">
+          <div style="height: 100%;">
             Rightbar
           </div>
         </template>
 
         <template #top>
-          <div style="background-color: var(--va-primary);">
+          <div>
             Header
           </div>
         </template>
 
         <template #bottom>
-          <div style="background-color: var(--va-danger);">
+          <div>
             Footer
           </div>
         </template>
@@ -42,20 +42,20 @@ const state = reactive({
     </VbCard>
 
     <VbCard title="Top, left, content slots">
-      <VaLayout style="background-color: var(--va-primary); width: 300px; height: 300px;">
+      <VaLayout style="width: 300px; height: 300px;">
         <template #content>
-          <div style="background-color: #ff00ff; height: 100%;">
+          <div>
             Content
           </div>
         </template>
         <template #left>
-          <div style="background-color: var(--va-secondary); height: 100%;">
+          <div style="height: 100%;">
             Leftbar
           </div>
         </template>
 
         <template #top>
-          <div style="background-color: var(--va-primary);">
+          <div>
             Header
           </div>
         </template>
@@ -64,22 +64,22 @@ const state = reactive({
 
     <VbCard title="Left order">
       <VaLayout
-        style="background-color: var(--va-primary); width: 300px; height: 300px;"
-        :left-order="1"
+        style="width: 300px; height: 300px;"
+        :left="{ order: 1 }"
       >
         <template #content>
-          <div style="background-color: #ff00ff; height: 100%;">
+          <div>
             Content
           </div>
         </template>
         <template #left>
-          <div style="background-color: var(--va-secondary); height: 100%;">
+          <div style="height: 100%;">
             Leftbar
           </div>
         </template>
 
         <template #top>
-          <div style="background-color: var(--va-primary);">
+          <div>
             Header
           </div>
         </template>
@@ -88,34 +88,34 @@ const state = reactive({
 
     <VbCard title="Left order 1, bottom order 2">
       <VaLayout
-        style="background-color: var(--va-primary); width: 300px; height: 300px;"
-        :left-order="1"
-        :bottom-order="2"
+        style="width: 300px; height: 300px;"
+        :left="{ order: 1 }"
+        :bottom="{ order: 2 }"
       >
         <template #content>
-          <div style="background-color: #ff00ff; height: 100%;">
+          <div>
             Content
           </div>
         </template>
         <template #left>
-          <div style="background-color: var(--va-secondary); height: 100%;">
+          <div style="height: 100%;">
             Leftbar
           </div>
         </template>
         <template #right>
-          <div style="background-color: var(--va-secondary); height: 100%;">
+          <div style="height: 100%;">
             Rightbar
           </div>
         </template>
 
         <template #top>
-          <div style="background-color: var(--va-primary);">
+          <div>
             Header
           </div>
         </template>
 
         <template #bottom>
-          <div style="background-color: var(--va-danger);">
+          <div>
             Footer
           </div>
         </template>
@@ -124,34 +124,34 @@ const state = reactive({
 
     <VbCard title="Right order 1, bottom order 2">
       <VaLayout
-        style="background-color: var(--va-primary); width: 300px; height: 300px;"
-        :right-order="1"
-        :bottom-order="2"
+        style="width: 300px; height: 300px;"
+        :right="{ order: 1 }"
+        :bottom="{ order: 2 }"
       >
         <template #content>
-          <div style="background-color: #ff00ff; height: 100%;">
+          <div>
             Content
           </div>
         </template>
         <template #left>
-          <div style="background-color: var(--va-secondary); height: 100%;">
+          <div style="height: 100%;">
             Leftbar
           </div>
         </template>
         <template #right>
-          <div style="background-color: var(--va-secondary); height: 100%;">
+          <div style="height: 100%;">
             Rightbar
           </div>
         </template>
 
         <template #top>
-          <div style="background-color: var(--va-primary);">
+          <div>
             Header
           </div>
         </template>
 
         <template #bottom>
-          <div style="background-color: var(--va-danger);">
+          <div>
             Footer
           </div>
         </template>
@@ -161,20 +161,20 @@ const state = reactive({
     <VbCard title="Right order 1">
       <VaLayout
         style="background-color: var(--va-primary); width: 300px; height: 300px;"
-        :right-order="1"
+        :right="{ order: 1 }"
       >
         <template #content>
-          <div style="background-color: #ff00ff; height: 100%;">
+          <div>
             Content
           </div>
         </template>
         <template #right>
-          <div style="background-color: var(--va-secondary); height: 100%; width: 200px;">
+          <div style="height: 100%; width: 200px;">
             Rightbar width 200px
           </div>
         </template>
         <template #bottom>
-          <div style="background-color: var(--va-danger);">
+          <div>
             Footer
           </div>
         </template>
@@ -186,14 +186,13 @@ const state = reactive({
         style="background-color: var(--va-primary); width: 300px; height: 300px;"
       >
         <template #content>
-          <div style="background-color: #ff00ff; height: 100%; width: 100%;">
+          <div>
             Content
           </div>
         </template>
         <template #left>
           <div
             style="
-              background-color: var(--va-secondary);
               height: 100%;
               transition: width 0.3s ease-in-out;
             "
@@ -209,25 +208,24 @@ const state = reactive({
 
     <VbCard title="Absolute">
       <VaLayout
-        style="background-color: var(--va-primary); width: 300px; height: 300px;"
-        :right-order="1"
+        style="width: 300px; height: 300px;"
+        :right="{ order: 1 }"
       >
         <template #top>
-          <div style="background-color: var(--va-primary); color: var(--va-on-primary);">
+          <div>
             <button @click="state.doShowSidebar = !state.doShowSidebar">
               Toggle
             </button>
           </div>
         </template>
         <template #content>
-          <div style="background-color: #ff00ff; height: 100%; width: 100%;">
+          <div>
             Content
           </div>
         </template>
         <template #left>
           <div
             style="
-              background-color: var(--va-secondary);
               height: 100%;
               transition: width 0.3s ease-in-out;
               position: absolute;
@@ -239,29 +237,26 @@ const state = reactive({
       </VaLayout>
 
       <VaLayout
-        style="background-color: var(--va-primary); width: 300px; height: 300px;"
-        :right-order="1"
+        style="width: 300px; height: 300px;"
+        :right="{ absolute: true, order: 1 }"
       >
         <template #top>
-          <div style="background-color: var(--va-primary); color: var(--va-on-primary);">
+          <div>
             <button @click="state.doShowSidebar = !state.doShowSidebar">
               Toggle
             </button>
           </div>
         </template>
         <template #content>
-          <div style="background-color: #ff00ff; height: 100%; width: 100%;">
+          <div>
             Content Order 0
           </div>
         </template>
         <template #right>
           <div
             style="
-              background-color: var(--va-secondary);
               height: 100%;
               transition: width 0.3s ease-in-out;
-              position: absolute;
-              right: 0;
             "
             :style="{ width: state.doShowSidebar ? '200px' : '0px' }"
           >
@@ -270,5 +265,96 @@ const state = reactive({
         </template>
       </VaLayout>
     </VbCard>
+
+    <VbCard title="Absolute Right">
+      <VaLayout
+        style="width: 300px; height: 300px;"
+        :right="{ absolute: true }"
+      >
+        <template #top>
+          <div>
+            <button @click="state.doShowSidebar = !state.doShowSidebar">
+              Toggle
+            </button>
+          </div>
+        </template>
+        <template #content>
+          <div>
+            Content
+          </div>
+        </template>
+        <template #right>
+          <div
+            style="
+              height: 100%;
+              transition: width 0.3s ease-in-out;
+            "
+            :style="{ width: state.doShowSidebar ? '200px' : '0px' }"
+          >
+            Order 0
+          </div>
+        </template>
+      </VaLayout>
+
+      <VaLayout
+        style="width: 300px; height: 300px;"
+        :bottom="{ order: 2 }"
+        :right="{ absolute: true, order: 1 }"
+      >
+        <template #top>
+          <div>
+            <button @click="state.doShowSidebar = !state.doShowSidebar">
+              Toggle
+            </button>
+          </div>
+        </template>
+        <template #content>
+          <div>
+            Content Order 0
+          </div>
+        </template>
+        <template #right>
+          <div
+            style="
+              transition: width 0.3s ease-in-out;
+              height: 100%;
+            "
+            :style="{ width: state.doShowSidebar ? '200px' : '0px' }"
+          >
+            Order 1
+          </div>
+        </template>
+        <template #bottom>
+          Order 2
+        </template>
+      </VaLayout>
+    </VbCard>
   </VbDemo>
 </template>
+
+<style lang="scss">
+  .layout-demo {
+    .va-layout {
+      background: linear-gradient(45deg, var(--va-primary), var(--va-success));
+
+      &__area {
+        &--left {
+          background: #3a86ff;
+        }
+
+        &--top {
+          background: #8338ec;
+          color: white;
+        }
+
+        &--right {
+          background: #ff006e;
+        }
+
+        &--bottom {
+          background: #fb5607;
+        }
+      }
+    }
+  }
+</style>
diff --git a/packages/ui/src/components/va-layout/VaLayout.vue b/packages/ui/src/components/va-layout/VaLayout.vue
index 3cdab1fcfb..f1b271b820 100644
--- a/packages/ui/src/components/va-layout/VaLayout.vue
+++ b/packages/ui/src/components/va-layout/VaLayout.vue
@@ -1,52 +1,74 @@
 <template>
   <div class="va-layout">
-    <div class="va-layout__area va-layout__area--top">
-      <slot name="top" />
-    </div>
     <div
-      class="va-layout__area va-layout__area--left"
+      v-for="area in areaNames"
+      :key="area"
+      :class="
+        isAbsolute(area) ?
+        'va-layout__area-wrapper' :
+        `va-layout__area va-layout__area--${area}`
+      "
     >
-      <slot name="left" />
-    </div>
-    <div class="va-layout__area va-layout__area--right">
-      <slot name="right" />
-    </div>
-    <div class="va-layout__area va-layout__area--bottom">
-      <slot name="bottom" />
+      <div v-if="isAbsolute(area)" :class="`va-layout__area va-layout__area--${area}`">
+        <slot :name="area" />
+      </div>
+      <slot v-else :name="area" />
     </div>
+
     <div class="va-layout__area va-layout__area--content">
-      <slot name="content" />
+      <slot>
+        <slot name="content" />
+      </slot>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
-import { useGridTemplateArea, useGridTemplateAreaProps } from './hooks/useGridTemplateArea'
+import { defineComponent, computed, PropType } from 'vue'
+import {
+  useGridTemplateArea,
+  AreaName,
+} from './hooks/useGridTemplateArea'
+import { useLayoutProps } from './hooks/useLayout'
+
+const areaNames: AreaName[] = [
+  'top',
+  'left',
+  'right',
+  'bottom',
+]
 
 export default defineComponent({
   name: 'VaLayout',
 
   props: {
-    ...useGridTemplateAreaProps,
+    ...useLayoutProps,
   },
 
   setup (props, { slots }) {
     return {
+      areaNames,
+      isAbsolute (area: AreaName) {
+        return props[area]?.absolute || false
+      },
       templateArea: useGridTemplateArea(props),
       verticalTemplate: computed(() => {
         return [
           slots.top ? 'min-content' : '0fr',
           '1fr',
           slots.bottom ? 'min-content' : '0fr',
-        ].filter(Boolean).join(' ')
+        ]
+          .filter(Boolean)
+          .join(' ')
       }),
       horizontalTemplate: computed(() => {
         return [
           slots.left ? 'min-content' : '0fr',
           '1fr',
           slots.right ? 'min-content' : '0fr',
-        ].filter(Boolean).join(' ')
+        ]
+          .filter(Boolean)
+          .join(' ')
       }),
     }
   },
@@ -56,7 +78,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .va-layout {
   display: grid;
-  grid-template-columns:  v-bind(horizontalTemplate);
+  grid-template-columns: v-bind(horizontalTemplate);
   grid-template-rows: v-bind(verticalTemplate);
   grid-template-areas: v-bind(templateArea);
   gap: 0;
@@ -88,5 +110,16 @@ export default defineComponent({
       overflow: auto;
     }
   }
+
+  &__area-wrapper {
+    .va-layout__area {
+      position: absolute;
+
+      &--right {
+        right: 0;
+        height: 100%;
+      }
+    }
+  }
 }
 </style>
diff --git a/packages/ui/src/components/va-layout/hooks/useGridTemplateArea.ts b/packages/ui/src/components/va-layout/hooks/useGridTemplateArea.ts
index 0a682f931b..559406ac6b 100644
--- a/packages/ui/src/components/va-layout/hooks/useGridTemplateArea.ts
+++ b/packages/ui/src/components/va-layout/hooks/useGridTemplateArea.ts
@@ -1,23 +1,5 @@
-import { ExtractPropTypes, computed } from 'vue'
-
-export const useGridTemplateAreaProps = {
-  topOrder: {
-    type: Number,
-    default: 0,
-  },
-  leftOrder: {
-    type: Number,
-    default: 0,
-  },
-  rightOrder: {
-    type: Number,
-    default: 0,
-  },
-  bottomOrder: {
-    type: Number,
-    default: 0,
-  },
-}
+import { computed } from 'vue'
+import { type LayoutProps } from './useLayout'
 
 const areaIndexes = {
   top: [0, 1, 2],
@@ -26,13 +8,13 @@ const areaIndexes = {
   bottom: [6, 7, 8],
 }
 
-type AreaName = 'top' | 'left' | 'right' | 'bottom'
+export type AreaName = 'top' | 'left' | 'right' | 'bottom'
 const areaElements = (['left', 'right', 'top', 'bottom'] as const)
 
-export const useGridTemplateArea = (props: ExtractPropTypes< typeof useGridTemplateAreaProps>) => {
+export const useGridTemplateArea = (props: LayoutProps) => {
   const sort = () => {
     return [...areaElements].sort((a, b) => {
-      return props[`${a}Order`] - props[`${b}Order`]
+      return (props[a].order ?? 0) - (props[b].order ?? 0)
     })
   }
 
diff --git a/packages/ui/src/components/va-layout/hooks/useLayout.ts b/packages/ui/src/components/va-layout/hooks/useLayout.ts
new file mode 100644
index 0000000000..92d3882a99
--- /dev/null
+++ b/packages/ui/src/components/va-layout/hooks/useLayout.ts
@@ -0,0 +1,30 @@
+import { ExtractPropTypes, PropType } from 'vue'
+
+// Unwrap type, e.g.: removes name from type alias and returns the type
+type UnwrapType<T> = true extends boolean ? T : never
+
+type AreaConfig = UnwrapType<{
+  absolute?: boolean,
+  order?: number,
+}>
+
+export const useLayoutProps = {
+  top: {
+    type: Object as PropType<AreaConfig>,
+    default: () => ({}),
+  },
+  right: {
+    type: Object as PropType<AreaConfig>,
+    default: () => ({}),
+  },
+  left: {
+    type: Object as PropType<AreaConfig>,
+    default: () => ({}),
+  },
+  bottom: {
+    type: Object as PropType<AreaConfig>,
+    default: () => ({}),
+  },
+}
+
+export type LayoutProps = ExtractPropTypes<typeof useLayoutProps>

From 386483b4a651e3c0e91f79f800edd047a4e8fef3 Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Sun, 9 Jul 2023 14:10:15 +0300
Subject: [PATCH 7/9] chore(layout): improve demo

---
 .../src/components/va-layout/VaLayout.demo.vue | 18 ++++++++++++------
 .../ui/src/components/va-layout/VaLayout.vue   |  8 +++++++-
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/va-layout/VaLayout.demo.vue b/packages/ui/src/components/va-layout/VaLayout.demo.vue
index 5059e2bf65..01901ff843 100644
--- a/packages/ui/src/components/va-layout/VaLayout.demo.vue
+++ b/packages/ui/src/components/va-layout/VaLayout.demo.vue
@@ -208,8 +208,8 @@ const state = reactive({
 
     <VbCard title="Absolute">
       <VaLayout
-        style="width: 300px; height: 300px;"
-        :right="{ order: 1 }"
+        style="width: 300px; height: 300px; margin-bottom: 2rem;"
+        :left="{ absolute: 1 }"
       >
         <template #top>
           <div>
@@ -228,7 +228,6 @@ const state = reactive({
             style="
               height: 100%;
               transition: width 0.3s ease-in-out;
-              position: absolute;
             "
             :style="{ width: state.doShowSidebar ? '200px' : '0px' }"
           >
@@ -238,7 +237,7 @@ const state = reactive({
 
       <VaLayout
         style="width: 300px; height: 300px;"
-        :right="{ absolute: true, order: 1 }"
+        :right="{ absolute: true }"
       >
         <template #top>
           <div>
@@ -266,9 +265,9 @@ const state = reactive({
       </VaLayout>
     </VbCard>
 
-    <VbCard title="Absolute Right">
+    <VbCard title="Absolute with Order">
       <VaLayout
-        style="width: 300px; height: 300px;"
+        style="width: 300px; height: 300px; margin-bottom: 2rem;"
         :right="{ absolute: true }"
       >
         <template #top>
@@ -340,6 +339,7 @@ const state = reactive({
       &__area {
         &--left {
           background: #3a86ff;
+          color: white;
         }
 
         &--top {
@@ -349,10 +349,16 @@ const state = reactive({
 
         &--right {
           background: #ff006e;
+          color: white;
         }
 
         &--bottom {
           background: #fb5607;
+          color: white;
+        }
+
+        &--content {
+          color: white;
         }
       }
     }
diff --git a/packages/ui/src/components/va-layout/VaLayout.vue b/packages/ui/src/components/va-layout/VaLayout.vue
index f1b271b820..7718c4f835 100644
--- a/packages/ui/src/components/va-layout/VaLayout.vue
+++ b/packages/ui/src/components/va-layout/VaLayout.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, PropType } from 'vue'
+import { defineComponent, computed } from 'vue'
 import {
   useGridTemplateArea,
   AreaName,
@@ -111,6 +111,7 @@ export default defineComponent({
     }
   }
 
+  // Wrapper is responsible for positioning correctly absolute areas
   &__area-wrapper {
     .va-layout__area {
       position: absolute;
@@ -119,6 +120,11 @@ export default defineComponent({
         right: 0;
         height: 100%;
       }
+
+      &--left {
+        left: 0;
+        height: 100%;
+      }
     }
   }
 }

From 06df80adc7a559d3defdd2811ac0169dc697d5d6 Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Sun, 9 Jul 2023 15:41:34 +0300
Subject: [PATCH 8/9] fix(layout): improve docs

---
 .../blocks/api/component-parser/index.ts      |  2 +-
 .../ui-elements/layout/examples/Absolute.vue  | 50 ++++++++++++++++
 .../ui-elements/layout/examples/AllSlots.vue  | 57 ++++++++++++++----
 .../ui-elements/layout/examples/Default.vue   | 27 ++++++---
 .../ui-elements/layout/examples/Order.vue     | 35 +++++++----
 .../page-config/ui-elements/layout/index.ts   | 59 +++++++++++++++++--
 .../ui/src/components/va-layout/VaLayout.vue  |  8 ++-
 7 files changed, 198 insertions(+), 40 deletions(-)
 create mode 100644 packages/docs/page-config/ui-elements/layout/examples/Absolute.vue

diff --git a/packages/docs/modules/page-config/blocks/api/component-parser/index.ts b/packages/docs/modules/page-config/blocks/api/component-parser/index.ts
index 69a5fd3cc9..ec9ce173b2 100644
--- a/packages/docs/modules/page-config/blocks/api/component-parser/index.ts
+++ b/packages/docs/modules/page-config/blocks/api/component-parser/index.ts
@@ -107,7 +107,7 @@ function convertComponentPropToApiDocs<T extends string>(propName: T, propOption
     name: propName,
     global: false,
     description: '',
-    type: types.join(' | '),
+    types: types.join(' | '),
     required: !!propOptionsRecord[propName].required,
     default: getDefaultValue(propOptionsRecord[propName], types),
   } as any
diff --git a/packages/docs/page-config/ui-elements/layout/examples/Absolute.vue b/packages/docs/page-config/ui-elements/layout/examples/Absolute.vue
new file mode 100644
index 0000000000..e56fb56e0f
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/layout/examples/Absolute.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+  const showSidebar = ref(true)
+</script>
+
+<template>
+  <VaLayout 
+    style="height: 300px"
+    :left="{ absolute: true}"
+  >
+    <template #top>
+      <VaNavbar color="primary" class="py-2">
+        <template #left>
+          <VaButton @click="showSidebar = !showSidebar" :icon="showSidebar ? 'menu_open' : 'menu'" />
+        </template>
+        <h4>LOGO</h4>
+      </VaNavbar>
+    </template>
+
+    <template #left>
+      <VaSidebar v-model="showSidebar">
+        <VaSidebarItem>
+          <VaSidebarItemContent>
+            <VaIcon name="home" /> 
+            <VaSidebarItemTitle>
+              Home
+            </VaSidebarItemTitle>
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+        <VaSidebarItem>
+          <VaSidebarItemContent>
+            <VaIcon name="phone" />
+            <VaSidebarItemTitle>
+              About
+            </VaSidebarItemTitle>
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+      </VaSidebar>
+    </template>
+
+    <template #content>
+      <main class="p-4">
+        <h3>Page content</h3>
+        <p>Page content must be wrapped in main tag. You must do it manually. Here you can place any blocks you need in your application.</p>
+
+        <p>For example, you can place here your router view, add sidebar with navigation in #left slot.</p>
+        <p>If you're using VaSidebar for page navigation don't forget to wrap it in nav tag.</p>
+      </main>
+    </template>
+  </VaLayout>
+</template>
\ No newline at end of file
diff --git a/packages/docs/page-config/ui-elements/layout/examples/AllSlots.vue b/packages/docs/page-config/ui-elements/layout/examples/AllSlots.vue
index fb95d70342..c5f832a035 100644
--- a/packages/docs/page-config/ui-elements/layout/examples/AllSlots.vue
+++ b/packages/docs/page-config/ui-elements/layout/examples/AllSlots.vue
@@ -4,13 +4,13 @@
 </script>
 
 <template>
-  <VaLayout style="height: 500px">
+  <VaLayout style="height: 300px">
     <template #top>
-      <VaNavbar color="primary">
+      <VaNavbar color="primary" class="py-2">
         <template #left>
           <VaButton @click="showLeftSidebar = !showLeftSidebar" :icon="showLeftSidebar ? 'menu_open' : 'menu'" />
         </template>
-        Hello!
+        <h4>LOGO</h4>
         <template #right>
           <VaButton @click="showRightSidebar = !showRightSidebar" :icon="showRightSidebar ? 'menu_open' : 'menu'" />
         </template>
@@ -21,41 +21,74 @@
       <VaSidebar v-model="showLeftSidebar">
         <VaSidebarItem>
           <VaSidebarItemContent>
-            <VaIcon name="home" /> Home
+            <VaIcon name="home" /> 
+            <VaSidebarItemTitle>
+              Home
+            </VaSidebarItemTitle>
           </VaSidebarItemContent>
         </VaSidebarItem>
         <VaSidebarItem>
           <VaSidebarItemContent>
-            <VaIcon name="phone" /> About
+            <VaIcon name="phone" />
+            <VaSidebarItemTitle>
+              About
+            </VaSidebarItemTitle>
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+        <VaSidebarItem>
+          <VaSidebarItemContent>
+            <VaIcon name="bolt" />
+            <VaSidebarItemTitle>
+              Features
+            </VaSidebarItemTitle>
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+        <VaSidebarItem>
+          <VaSidebarItemContent>
+            <VaIcon name="arrow_upward" />
+            <VaSidebarItemTitle>
+              Scroll back
+            </VaSidebarItemTitle>
           </VaSidebarItemContent>
         </VaSidebarItem>
       </VaSidebar>
     </template>
 
     <template #content>
-      <div class="p-4">
-        <h1>Content</h1>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
-      </div>
+      <main class="p-4">
+        <h3>Page content</h3>
+        <p>Page content must be wrapped in main tag. You must do it manually. Here you can place any blocks you need in your application.</p>
+
+        <p>For example, you can place here your router view, add sidebar with navigation in #left slot.</p>
+        <p>If you're using VaSidebar for page navigation don't forget to wrap it in nav tag.</p>
+      </main>
     </template>
 
     <template #right>
       <VaSidebar v-model="showRightSidebar">
         <VaSidebarItem>
           <VaSidebarItemContent>
-            <VaIcon name="home" /> Home
+            <VaIcon name="favorite" /> 
+            <VaSidebarItemTitle>
+              Favorite components
+            </VaSidebarItemTitle>
           </VaSidebarItemContent>
         </VaSidebarItem>
         <VaSidebarItem>
           <VaSidebarItemContent>
-            <VaIcon name="phone" /> About
+            <VaIcon name="grade" />
+            <VaSidebarItemTitle>
+              Best practices
+            </VaSidebarItemTitle>
           </VaSidebarItemContent>
         </VaSidebarItem>
       </VaSidebar>
     </template>
 
     <template #bottom>
-      Footer!
+      <footer class="p-4 bg-[var(--va-primary)] text-[var(--va-on-primary)] text-right">
+        Footer
+      </footer>
     </template>
   </VaLayout>
 </template>
\ No newline at end of file
diff --git a/packages/docs/page-config/ui-elements/layout/examples/Default.vue b/packages/docs/page-config/ui-elements/layout/examples/Default.vue
index fe5d528abf..bb0af61e9a 100644
--- a/packages/docs/page-config/ui-elements/layout/examples/Default.vue
+++ b/packages/docs/page-config/ui-elements/layout/examples/Default.vue
@@ -3,13 +3,13 @@
 </script>
 
 <template>
-  <VaLayout style="height: 500px">
+  <VaLayout style="height: 300px">
     <template #top>
-      <VaNavbar color="primary">
+      <VaNavbar color="primary" class="py-2">
         <template #left>
           <VaButton @click="showSidebar = !showSidebar" :icon="showSidebar ? 'menu_open' : 'menu'" />
         </template>
-        Hello!
+        <h4>LOGO</h4>
       </VaNavbar>
     </template>
 
@@ -17,22 +17,31 @@
       <VaSidebar v-model="showSidebar">
         <VaSidebarItem>
           <VaSidebarItemContent>
-            <VaIcon name="home" /> Home
+            <VaIcon name="home" /> 
+            <VaSidebarItemTitle>
+              Home
+            </VaSidebarItemTitle>
           </VaSidebarItemContent>
         </VaSidebarItem>
         <VaSidebarItem>
           <VaSidebarItemContent>
-            <VaIcon name="phone" /> About
+            <VaIcon name="phone" />
+            <VaSidebarItemTitle>
+              About
+            </VaSidebarItemTitle>
           </VaSidebarItemContent>
         </VaSidebarItem>
       </VaSidebar>
     </template>
 
     <template #content>
-      <div class="p-4">
-        <h1>Content</h1>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
-      </div>
+      <main class="p-4">
+        <h3>Page content</h3>
+        <p>Page content must be wrapped in main tag. You must do it manually. Here you can place any blocks you need in your application.</p>
+
+        <p>For example, you can place here your router view, add sidebar with navigation in #left slot.</p>
+        <p>If you're using VaSidebar for page navigation don't forget to wrap it in nav tag.</p>
+      </main>
     </template>
   </VaLayout>
 </template>
\ No newline at end of file
diff --git a/packages/docs/page-config/ui-elements/layout/examples/Order.vue b/packages/docs/page-config/ui-elements/layout/examples/Order.vue
index c3b89d26b7..139a8b54c6 100644
--- a/packages/docs/page-config/ui-elements/layout/examples/Order.vue
+++ b/packages/docs/page-config/ui-elements/layout/examples/Order.vue
@@ -5,16 +5,16 @@
 
 <template>
   <VaLayout 
-    :left-order="1"
-    :top-order="2"
-    style="height: 500px"
+    :left="{ order: 1 }"
+    :top="{ order: 2 }"
+    style="height: 300px"
   >
     <template #top>
-      <VaNavbar color="primary">
+      <VaNavbar color="primary" class="py-2">
         <template #left>
           <VaButton @click="showLeftSidebar = !showLeftSidebar" :icon="showLeftSidebar ? 'menu_open' : 'menu'" />
         </template>
-        Hello!
+        <h4>LOGO</h4>
         <template #right>
           <VaButton @click="showRightSidebar = !showRightSidebar" :icon="showRightSidebar ? 'menu_open' : 'menu'" />
         </template>
@@ -25,22 +25,31 @@
       <VaSidebar v-model="showLeftSidebar">
         <VaSidebarItem>
           <VaSidebarItemContent>
-            <VaIcon name="home" /> Home
+            <VaIcon name="home" /> 
+            <VaSidebarItemTitle>
+              Home
+            </VaSidebarItemTitle>
           </VaSidebarItemContent>
         </VaSidebarItem>
         <VaSidebarItem>
           <VaSidebarItemContent>
-            <VaIcon name="phone" /> About
+            <VaIcon name="phone" />
+            <VaSidebarItemTitle>
+              About
+            </VaSidebarItemTitle>
           </VaSidebarItemContent>
         </VaSidebarItem>
       </VaSidebar>
     </template>
 
     <template #content>
-      <div class="p-4">
-        <h1>Content</h1>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
-      </div>
+      <main class="p-4">
+        <h3>Page content</h3>
+        <p>Page content must be wrapped in main tag. You must do it manually. Here you can place any blocks you need in your application.</p>
+
+        <p>For example, you can place here your router view, add sidebar with navigation in #left slot.</p>
+        <p>If you're using VaSidebar for page navigation don't forget to wrap it in nav tag.</p>
+      </main>
     </template>
 
     <template #right>
@@ -59,9 +68,9 @@
     </template>
 
     <template #bottom>
-      <VaNavbar color="primary">
+      <footer class="p-4 bg-[var(--va-primary)] text-[var(--va-on-primary)] text-right">
         Footer
-      </VaNavbar>
+      </footer>
     </template>
   </VaLayout>
 </template>
\ No newline at end of file
diff --git a/packages/docs/page-config/ui-elements/layout/index.ts b/packages/docs/page-config/ui-elements/layout/index.ts
index 7820740ce7..aca4c45c8b 100644
--- a/packages/docs/page-config/ui-elements/layout/index.ts
+++ b/packages/docs/page-config/ui-elements/layout/index.ts
@@ -1,9 +1,60 @@
 export default definePageConfig({
   blocks: [
-    block.title('Layout.title'),
+    block.title('Layout'),
+    block.paragraph('Component is used for building App layout. It is based on CSS Grid and provides a simple API for building complex layouts.'),
 
-    block.example('Default'),
-    block.example('AllSlots'),
-    block.example('Order'),
+    block.example('Default', {
+      title: 'Default usage',
+      description: 'Default usage of Layout component.',
+    }),
+    block.example('AllSlots', {
+      title: 'All slots',
+      description: 'Layout component has 4 slots: top, right, bottom, left, content (or default). You can use them to place your content.',
+    }),
+    block.example('Order', {
+      title: 'Rendering order',
+      description: 'You can use order area attribute to change order of slots. By default, order is 0. If order of one area is higher than another, it will be rendered on top of it.',
+    }),
+    block.example('Absolute', {
+      title: 'Absolute',
+      description: 'You can use absolute area attribute to make area absolute. It will be rendered on top of other areas and overflow them. Absolute respect order prop.',
+    }),
+
+    block.subtitle('Accessibility'),
+    block.paragraph(`
+Layout component is not handling accessibility by default. 
+
+You should always wrap content in slot with \`<div role="region" aria-label="...">\` to make it accessible.
+Make sure you have \`main\` role on your main content in \`content\` slot,
+\`aside\` in \`left\`, \`right\` slots, \`header\` in \`top\` slot and \`footer\` in \`bottom\` slot.
+More about landmarks you can read [here](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/)[[target=_blank]].
+
+Notice that if you're using components like VaSidebar, VaHeader the correct role will be added automatically.
+    `),
+
+    block.api('VaLayout', {
+      props: {
+        top: 'AreaConfig for top slot',
+        right: 'AreaConfig for right slot',
+        bottom: 'AreaConfig for bottom slot',
+        left: 'AreaConfig for left slot',
+      }
+    },
+    {
+      props: {
+        top: {
+          types: `{ absolute?: boolean, order?: number }`
+        },
+        bottom: {
+          types: `{ absolute?: boolean, order?: number }`
+        },
+        left: {
+          types: `{ absolute?: boolean, order?: number }`
+        },
+        right: {
+          types: `{ absolute?: boolean, order?: number }`
+        }
+      }
+    })
   ]
 })
\ No newline at end of file
diff --git a/packages/ui/src/components/va-layout/VaLayout.vue b/packages/ui/src/components/va-layout/VaLayout.vue
index 7718c4f835..1cd960e0d5 100644
--- a/packages/ui/src/components/va-layout/VaLayout.vue
+++ b/packages/ui/src/components/va-layout/VaLayout.vue
@@ -76,6 +76,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import '../../styles/resources';
+
 .va-layout {
   display: grid;
   grid-template-columns: v-bind(horizontalTemplate);
@@ -88,6 +90,11 @@ export default defineComponent({
   overflow: hidden;
 
   &__area {
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    @include va-scroll();
+
     &--top {
       grid-area: top;
     }
@@ -107,7 +114,6 @@ export default defineComponent({
 
     &--content {
       grid-area: content;
-      overflow: auto;
     }
   }
 

From 4dbf6d38e5b44ff449ccb18858ee3cacac49d5ff Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Sun, 9 Jul 2023 19:36:57 +0300
Subject: [PATCH 9/9] feat(layout): improve docs demo

---
 .../ui-elements/layout/examples/Absolute.vue  |  2 +-
 .../ui-elements/layout/examples/AllSlots.vue  |  4 +-
 .../ui-elements/layout/examples/Default.vue   |  2 +-
 .../layout/examples/MobileFriendly.vue        | 52 +++++++++++++++++++
 .../ui-elements/layout/examples/Order.vue     | 24 +++++++--
 .../page-config/ui-elements/layout/index.ts   |  9 +++-
 6 files changed, 84 insertions(+), 9 deletions(-)
 create mode 100644 packages/docs/page-config/ui-elements/layout/examples/MobileFriendly.vue

diff --git a/packages/docs/page-config/ui-elements/layout/examples/Absolute.vue b/packages/docs/page-config/ui-elements/layout/examples/Absolute.vue
index e56fb56e0f..e7b0cb9be4 100644
--- a/packages/docs/page-config/ui-elements/layout/examples/Absolute.vue
+++ b/packages/docs/page-config/ui-elements/layout/examples/Absolute.vue
@@ -4,7 +4,7 @@
 
 <template>
   <VaLayout 
-    style="height: 300px"
+    style="height: 500px"
     :left="{ absolute: true}"
   >
     <template #top>
diff --git a/packages/docs/page-config/ui-elements/layout/examples/AllSlots.vue b/packages/docs/page-config/ui-elements/layout/examples/AllSlots.vue
index c5f832a035..f43b73bd49 100644
--- a/packages/docs/page-config/ui-elements/layout/examples/AllSlots.vue
+++ b/packages/docs/page-config/ui-elements/layout/examples/AllSlots.vue
@@ -4,7 +4,7 @@
 </script>
 
 <template>
-  <VaLayout style="height: 300px">
+  <VaLayout style="height: 500px">
     <template #top>
       <VaNavbar color="primary" class="py-2">
         <template #left>
@@ -86,7 +86,7 @@
     </template>
 
     <template #bottom>
-      <footer class="p-4 bg-[var(--va-primary)] text-[var(--va-on-primary)] text-right">
+      <footer class="p-4 border-[var(--va-background-border)] border-t-2 text-right">
         Footer
       </footer>
     </template>
diff --git a/packages/docs/page-config/ui-elements/layout/examples/Default.vue b/packages/docs/page-config/ui-elements/layout/examples/Default.vue
index bb0af61e9a..1144a6285a 100644
--- a/packages/docs/page-config/ui-elements/layout/examples/Default.vue
+++ b/packages/docs/page-config/ui-elements/layout/examples/Default.vue
@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <VaLayout style="height: 300px">
+  <VaLayout style="height: 500px">
     <template #top>
       <VaNavbar color="primary" class="py-2">
         <template #left>
diff --git a/packages/docs/page-config/ui-elements/layout/examples/MobileFriendly.vue b/packages/docs/page-config/ui-elements/layout/examples/MobileFriendly.vue
new file mode 100644
index 0000000000..934edf5793
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/layout/examples/MobileFriendly.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+  const showSidebar = ref(true)
+
+  const breakpoints = useBreakpoint()
+</script>
+
+<template>
+  <VaLayout 
+    style="height: 500px"
+    :left="{ absolute: breakpoints.smDown }"
+  >
+    <template #top>
+      <VaNavbar color="primary" class="py-2">
+        <template #left>
+          <VaButton @click="showSidebar = !showSidebar" :icon="showSidebar ? 'menu_open' : 'menu'" />
+        </template>
+        <h4>LOGO</h4>
+      </VaNavbar>
+    </template>
+
+    <template #left>
+      <VaSidebar v-model="showSidebar">
+        <VaSidebarItem>
+          <VaSidebarItemContent>
+            <VaIcon name="home" /> 
+            <VaSidebarItemTitle>
+              Home
+            </VaSidebarItemTitle>
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+        <VaSidebarItem>
+          <VaSidebarItemContent>
+            <VaIcon name="phone" />
+            <VaSidebarItemTitle>
+              About
+            </VaSidebarItemTitle>
+          </VaSidebarItemContent>
+        </VaSidebarItem>
+      </VaSidebar>
+    </template>
+
+    <template #content>
+      <main class="p-4">
+        <h3>Page content</h3>
+        <p>Page content must be wrapped in main tag. You must do it manually. Here you can place any blocks you need in your application.</p>
+
+        <p>For example, you can place here your router view, add sidebar with navigation in #left slot.</p>
+        <p>If you're using VaSidebar for page navigation don't forget to wrap it in nav tag.</p>
+      </main>
+    </template>
+  </VaLayout>
+</template>
\ No newline at end of file
diff --git a/packages/docs/page-config/ui-elements/layout/examples/Order.vue b/packages/docs/page-config/ui-elements/layout/examples/Order.vue
index 139a8b54c6..9e03351ff0 100644
--- a/packages/docs/page-config/ui-elements/layout/examples/Order.vue
+++ b/packages/docs/page-config/ui-elements/layout/examples/Order.vue
@@ -1,13 +1,29 @@
 <script setup lang="ts">
   const showLeftSidebar = ref(true)
   const showRightSidebar = ref(true)
+
+  const orders = reactive({
+    left: 2,
+    top: 1,
+    right: 2,
+    bottom: 1,
+  })
 </script>
 
 <template>
+  <div class="mb-4 flex gap-2 justify-between flex-wrap">
+    <VaCounter v-model="orders.top" label="top" />
+    <VaCounter v-model="orders.left" label="left" />
+    <VaCounter v-model="orders.right" label="right" />
+    <VaCounter v-model="orders.bottom" label="bottom" />
+  </div>
+
   <VaLayout 
-    :left="{ order: 1 }"
-    :top="{ order: 2 }"
-    style="height: 300px"
+    :left="{ order: orders.left }"
+    :top="{ order: orders.top }"
+    :right="{ order: orders.right }"
+    :bottom="{ order: orders.bottom }"
+    style="height: 500px"
   >
     <template #top>
       <VaNavbar color="primary" class="py-2">
@@ -68,7 +84,7 @@
     </template>
 
     <template #bottom>
-      <footer class="p-4 bg-[var(--va-primary)] text-[var(--va-on-primary)] text-right">
+      <footer class="p-4 border-[var(--va-background-border)] border-t-2 text-right">
         Footer
       </footer>
     </template>
diff --git a/packages/docs/page-config/ui-elements/layout/index.ts b/packages/docs/page-config/ui-elements/layout/index.ts
index aca4c45c8b..65e37edcc2 100644
--- a/packages/docs/page-config/ui-elements/layout/index.ts
+++ b/packages/docs/page-config/ui-elements/layout/index.ts
@@ -2,6 +2,9 @@ export default definePageConfig({
   blocks: [
     block.title('Layout'),
     block.paragraph('Component is used for building App layout. It is based on CSS Grid and provides a simple API for building complex layouts.'),
+    block.paragraph(`
+VaLayout component is used in pair with [VaSidebar](/ui-elements/sidebar)[[target=_blank]], [VaNavbar](/ui-elements/navbar)[[target=_blank]], VaFooter components.
+    `),
 
     block.example('Default', {
       title: 'Default usage',
@@ -13,12 +16,16 @@ export default definePageConfig({
     }),
     block.example('Order', {
       title: 'Rendering order',
-      description: 'You can use order area attribute to change order of slots. By default, order is 0. If order of one area is higher than another, it will be rendered on top of it.',
+      description: 'You can use order area attribute to change order of slots. By default, order is 0. If order of one area is higher than another, it will be rendered on top of it. For example, if you set `top` order to `0` and `left` to `1`, left will take area from `top`. It is easier to play with it in example bellow.',
     }),
     block.example('Absolute', {
       title: 'Absolute',
       description: 'You can use absolute area attribute to make area absolute. It will be rendered on top of other areas and overflow them. Absolute respect order prop.',
     }),
+    block.example('MobileFriendly', {
+      title: 'Mobile friendly',
+      description: 'It is recommended to make `left` and `right` areas absolute on mobile devices. You can use `absolute` prop to do it in pair with [useBreakpoint](http://localhost:3000/services/breakpoints)[[target=_blank]] composable.',
+    }),
 
     block.subtitle('Accessibility'),
     block.paragraph(`