@appscode/design-system 2.6.22-alpha-0.0.10 → 2.6.22-alpha-0.0.12

package/main.scss

@@ -29,5 +29,6 @@
 @import "@/components/vue-components/styles/components/ui-builder/ui-builder";
 @import "@/components/vue-components/styles/components/dropdown";
 @import "@/components/vue-components/styles/components/badge-tags";
+@import "@/components/vue-components/styles/components/platform-design";
 
 // @import "@/components/vue-components/styles/theme/appscode.scss";

package/package.json

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

package/vue-components/styles/components/_all.scss

@@ -32,10 +32,12 @@
 @import "tfa";
 @import "transitions";
 @import "steps";
+@import "platform-design";
 
 // @import "pricing-table";
 // @import "overview-info";
 // @import "overview-page"
 // @import "nested-list";
+
 @import "ui-builder/ui-builder";
 @import "ui-builder/vue-open-api";

package/vue-components/styles/components/_platform-design.scss

@@ -0,0 +1,149 @@
+.profile-banner {
+  // background-color: #e3f0ea;
+  background-image: url("../../images/banners/banner-background.png");
+  padding-top: 16px;
+  min-height: 120px;
+  position: relative;
+  z-index: 1;
+  border-bottom: 1px solid $color-border;
+  overflow: hidden;
+
+  &::after {
+    position: absolute;
+    content: "";
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #ddd;
+    background-image: url("../../images/banners/banner-overlay.png");
+    background-color: lightgray;
+    background-position: 0% 0%;
+    backdrop-filter: blur(142px);
+    z-index: -1;
+  }
+}
+
+.solid-tab {
+  li {
+    a {
+      padding: 16px 0px !important;
+      margin-right: 32px;
+      transition: 0.3s ease-in-out;
+    }
+
+    &.is-active,
+    &:hover {
+      a {
+        border-bottom-color: transparent !important;
+        position: relative;
+
+        &::after {
+          position: absolute;
+          content: "";
+          left: 0;
+          bottom: 5px;
+          width: 100%;
+          height: 4px;
+          border-radius: 4px 4px 0 0;
+          z-index: 1;
+          background-color: $ac-primary;
+        }
+      }
+    }
+  }
+}
+
+.body-bottom {
+  .cluster {
+    background-color: $primary-light-gray;
+  }
+}
+
+.filterable-searchbar {
+  width: 100%;
+  position: relative;
+
+  .search-filter {
+    border: 1px solid $color-border;
+    background-color: #fff;
+    position: absolute;
+    z-index: 9;
+    right: 8px;
+    height: 36px;
+    top: 8px;
+    padding: 8px 16px;
+    border-radius: 4px;
+  }
+
+  .searchbar {
+    width: 100%;
+  }
+
+  .ac-single-input {
+    input {
+      background-color: $primary-light-gray;
+      height: 52px;
+    }
+
+    label {
+      top: 16px;
+    }
+  }
+}
+
+// sidebar items
+.sidebar-style-2 {
+  border: 1px solid $color-border;
+  border-radius: 4px;
+  box-shadow: 8px 4px 14px 0px rgba(0, 0, 0, 0.05);
+
+  .left-sidebar {
+    width: 250px;
+  }
+
+  .sidebar-items {
+    display: flex;
+    flex-direction: column;
+
+    .sidebar-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: $color-text;
+      padding: 8px 16px;
+      transition: 0.1s ease-in-out;
+
+      &:last-child {
+        margin-bottom: 8px;
+      }
+
+      &:hover {
+        background-color: $primary-light-gray;
+      }
+
+      &.is-active {
+        background-color: $ac-primary;
+        color: $white-100;
+      }
+    }
+
+    label {
+      padding: 8px 16px;
+      border-bottom: 1px solid $color-border;
+      text-transform: uppercase;
+      font-weight: 400;
+      color: #616161;
+    }
+  }
+}
+
+.section-card {
+  border: 1px solid $color-border;
+  border-radius: 4px;
+  .section-heading {
+    border-bottom: 1px solid $color-border;
+    background-color: $secondary-light-grey;
+    padding: 8px 16px;
+  }
+}

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

@@ -1,34 +1,141 @@
-<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>
-
-        <!-- 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 }">
-            <span class="icon"><component :is="item.icon || CogIcon" /></span>
-            <span>{{ item.text }}</span>
-          </a>
+      <div class="sidebar-items" v-for="(section, sIdx) in updatedItems" :key="section.id">
+        <label class="label">{{ section.name }}</label>
+
+        <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">
+              <img :src="entry.icon || CogIcon" alt="icon" />
+            </span>
+            <span>{{ entry.name }}</span>
+          </router-link>
         </slot>
       </div>
     </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.sidebar-style-2 {
+  border: 1px solid $color-border;
+  border-radius: 4px;
+  box-shadow: 8px 4px 14px 0px rgba(0, 0, 0, 0.05);
+
+  .left-sidebar {
+    width: 250px;
+  }
+
+  .sidebar-items {
+    display: flex;
+    flex-direction: column;
+
+    .sidebar-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: $color-text;
+      padding: 8px 16px;
+      transition: 0.1s ease-in-out;
+
+      &:last-child {
+        margin-bottom: 8px;
+      }
+
+      &:hover {
+        background-color: $primary-light-gray;
+      }
+
+      &.is-active {
+        background-color: $ac-primary;
+        color: $white-100;
+      }
+    }
+
+    label {
+      padding: 8px 16px;
+      border-bottom: 1px solid $color-border;
+      text-transform: uppercase;
+      font-weight: 400;
+      color: #616161;
+    }
+  }
+}
+</style>