@appscode/design-system 2.17.82 → 2.17.83-alpha-2

package/main.scss

@@ -21,6 +21,7 @@
 @import "@/components/vue-components/styles/components/avatar";
 @import "@/components/vue-components/styles/components/terminal";
 @import "@/components/vue-components/styles/components/steps";
+@import "@/components/vue-components/styles/components/sidebar-tabs/sidebar-tabs";
 @import "@/components/vue-components/styles/components/code-preview/all";
 @import "@/components/vue-components/styles/components/form-fields/input";
 @import "@/components/vue-components/styles/components/form-fields/check-radio-switch";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.17.82",
+  "version": "2.17.83-alpha-2",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/composables/element-offset.ts

@@ -0,0 +1,21 @@
+import { computed, onMounted, ref } from "vue";
+import { useElementSize, useMutationObserver } from "@vueuse/core";
+
+export function useElementsOffset(selectors: string[]) {
+  const elRefs = selectors.map(() => ref<HTMLElement | null>(null));
+  const sizes = elRefs.map((el) => useElementSize(el));
+
+  const resolveElements = () => {
+    selectors.forEach((selector, i) => {
+      elRefs[i].value = document.querySelector<HTMLElement>(selector);
+    });
+  };
+
+  onMounted(resolveElements);
+  useMutationObserver(document.body, resolveElements, {
+    childList: true,
+    subtree: true,
+  });
+
+  return computed(() => sizes.reduce((total, { height }) => total + height.value, 0));
+}

package/vue-components/styles/components/sidebar-tabs/_sidebar-tabs.scss

@@ -2,7 +2,7 @@
   width: 220px;
   border-right: 1px solid $color-border;
   padding: 8px;
-  height: calc(100vh - 50px);
+  height: calc(100vh - var(--sidebar-tabs-offset, 50px));
   overflow-y: auto;
   ul {
     li {

package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabs.vue

@@ -1,6 +1,18 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useElementsOffset } from "../../../composables/element-offset";
+
+export interface Props {
+  offsetSelectors?: string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  offsetSelectors: () => [".ac-navbar-area", ".inner-header", ".footer-area"],
+});
+
+const sidebarOffset = useElementsOffset(props.offsetSelectors);
+</script>
 <template>
-  <div class="sidebar-tabs">
+  <div class="sidebar-tabs" :style="{ '--sidebar-tabs-offset': sidebarOffset + 'px' }">
     <slot />
   </div>
 </template>