@appscode/design-system 2.6.22-alpha-0.0.9 → 2.6.22-alpha-0.0.11

package/package.json

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

package/vue-components/v3/sidebar/basic-sidebar/Sidebar.vue

@@ -1,42 +1,99 @@
-<script setup>
+<script setup lang="ts">
+import { nextTick, watch, ref, computed } from "vue";
+import { useRoute } from "vue-router";
 import CogIcon from "../../icons/CogIcon.vue";
 
-// Define the props to accept the data structure
-const props = defineProps({
-  label: {
-    type: String,
-    default: "Default Label", // Optional default value
-  },
-  items: {
-    type: Array,
-    default: () => [],
-  },
+interface SidebarEntry {
+  id: string;
+  name: string;
+  icon?: any;
+  url: string;
+}
+
+interface SidebarSection {
+  id: string;
+  name: string;
+  icon?: any;
+  entries: SidebarEntry[];
+}
+
+interface Props {
+  items: SidebarSection[];
+  isActive: boolean;
+}
+
+// Props
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  isActive: false
 });
+
+const sidebarItem = ref<HTMLElement | null>(null);
+
+const route = useRoute();
+
+const updatedItems = computed(() => {
+  return props.items.map((section) => {
+    const updatedEntries = section.entries.map((entry) => ({
+      ...entry,
+      isActive: route.path === entry.url,
+    }));
+    return { ...section, entries: updatedEntries };
+  });
+});
+
+// Scroll active item into view
+watch(
+  () => props.isActive,
+  (n) => {
+    if (n) {
+      nextTick(() => {
+        setTimeout(() => {
+          const top = (sidebarItem.value && sidebarItem.value.getBoundingClientRect().top) || 0;
+          if (top > window.innerHeight - 200) {
+            sidebarItem.value?.scrollIntoView({
+              behavior: "smooth",
+              block: "center",
+            });
+          }
+        }, 300);
+      });
+    }
+  },
+  { immediate: true },
+);
 </script>
 
 <template>
   <div class="sidebar-style-2">
     <div class="left-sidebar">
-      <!-- Iterate through each section (based on your sidebar JSON structure) -->
-      <div class="sidebar-items" v-for="(data, idx) in props.items" :key="idx">
-        <label class="label">{{ data.label }}</label>
+      <div class="sidebar-items" v-for="(section, sIdx) in updatedItems" :key="section.id">
+        <label class="label">{{ section.name }}</label>
 
-        <!-- Iterate through the items inside each section -->
-        <slot name="sidebar-item" v-for="(item, idx) in data.items" :key="idx" :item="item">
-          <a :href="item.link || '#'" class="sidebar-item" :class="{ 'is-active': item.isActive }">
+        <slot
+          name="sidebar-item"
+          v-for="(entry, iIdx) in section.entries"
+          :key="entry.id"
+          :item="entry"
+        >
+          <router-link
+            :to="entry.url"
+            class="sidebar-item"
+            :class="{ 'is-active': entry.isActive }"
+            :ref="entry.isActive ? sidebarItem : null"
+          >
             <span class="icon">
-              <component :is="item.icon || CogIcon" />
+              <img :src="entry.icon || CogIcon" alt="icon" />
             </span>
-            <span>{{ item.text }}</span>
-          </a>
+            <span>{{ entry.name }}</span>
+          </router-link>
         </slot>
       </div>
     </div>
   </div>
 </template>
 
-<style lang="scss">
-// sidebar items
+<style lang="scss" scoped>
 .sidebar-style-2 {
   border: 1px solid $color-border;
   border-radius: 4px;