feat(root-layout): DLT-1878 add scrollbar directive to root layout

dialpad · Oct 24, 2024 · 6b804f7 · 6b804f7
1 parent 00b6143
commit 6b804f7
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 38 deletions.
diff --git a/apps/dialtone-documentation/docs/.vuepress/theme/layouts/Layout.vue b/apps/dialtone-documentation/docs/.vuepress/theme/layouts/Layout.vue
@@ -1,7 +1,6 @@
 <template>
   <dt-root-layout
-    :fixed="false"
-    :header-sticky="true"
+    :fixed="true"
     header-class="d-ol-none"
     sidebar-class="dialtone-sidebar lg:d-d-none d-ol-none"
     footer-class="d-text-right d-ol-none"

diff --git a/packages/dialtone-vue2/components/root_layout/root_layout.vue b/packages/dialtone-vue2/components/root_layout/root_layout.vue
@@ -19,24 +19,28 @@
         if you want a fixed height. -->
       <slot name="header" />
     </header>
-    <aside
-      ref="root-layout-sidebar"
-      tabindex="0"
-      :class="['d-root-layout__sidebar', sidebarClass]"
-      data-qa="dt-root-layout-sidebar"
-    >
-      <!-- @slot Slot for sidebar content, be sure to set a width on the element within this. -->
-      <slot name="sidebar" />
-    </aside>
-    <main
-      ref="root-layout-content"
-      :class="['d-root-layout__content', contentClass]"
-      data-qa="dt-root-layout-content"
-      tabindex="0"
-    >
-      <!-- @slot Slot for the main content -->
-      <slot />
-    </main>
+    <div v-dt-scrollbar>
+      <aside
+        ref="root-layout-sidebar"
+        tabindex="0"
+        :class="['d-root-layout__sidebar', sidebarClass]"
+        data-qa="dt-root-layout-sidebar"
+      >
+        <!-- @slot Slot for sidebar content, be sure to set a width on the element within this. -->
+        <slot name="sidebar" />
+      </aside>
+    </div>
+    <div v-dt-scrollbar>
+      <main
+        ref="root-layout-content"
+        :class="['d-root-layout__content', contentClass]"
+        data-qa="dt-root-layout-content"
+        tabindex="0"
+      >
+        <!-- @slot Slot for the main content -->
+        <slot />
+      </main>
+    </div>
     <footer
       :class="['d-root-layout__footer', footerClass]"
       data-qa="dt-root-layout-footer"

diff --git a/packages/dialtone-vue3/components/root_layout/root_layout.vue b/packages/dialtone-vue3/components/root_layout/root_layout.vue
@@ -19,24 +19,28 @@
         if you want a fixed height. -->
       <slot name="header" />
     </header>
-    <aside
-      ref="root-layout-sidebar"
-      tabindex="0"
-      :class="['d-root-layout__sidebar', sidebarClass]"
-      data-qa="dt-root-layout-sidebar"
-    >
-      <!-- @slot Slot for sidebar content, be sure to set a width on the element within this. -->
-      <slot name="sidebar" />
-    </aside>
-    <main
-      ref="root-layout-content"
-      :class="['d-root-layout__content', contentClass]"
-      data-qa="dt-root-layout-content"
-      tabindex="0"
-    >
-      <!-- @slot Slot for the main content -->
-      <slot />
-    </main>
+    <div v-dt-scrollbar>
+      <aside
+        ref="root-layout-sidebar"
+        tabindex="0"
+        :class="['d-root-layout__sidebar', sidebarClass]"
+        data-qa="dt-root-layout-sidebar"
+      >
+        <!-- @slot Slot for sidebar content, be sure to set a width on the element within this. -->
+        <slot name="sidebar" />
+      </aside>
+    </div>
+    <div v-dt-scrollbar>
+      <main
+        ref="root-layout-content"
+        :class="['d-root-layout__content', contentClass]"
+        data-qa="dt-root-layout-content"
+        tabindex="0"
+      >
+        <!-- @slot Slot for the main content -->
+        <slot />
+      </main>
+    </div>
     <footer
       :class="['d-root-layout__footer', footerClass]"
       data-qa="dt-root-layout-footer"