@appscode/design-system 1.1.0-alpha.9 → 1.1.0-beta.2

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

@@ -0,0 +1,271 @@
+<script setup lang="ts">
+interface Props {
+  type: string;
+  isCollapsible: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  type: "cluster-main",
+  isCollapsible: false,
+});
+</script>
+
+<template>
+  <div class="ac-system-left-sidebar">
+    <!-- is-collapsed -->
+    <div
+      class="ac-left-sidebar-wrapper is-collapsed"
+      :class="{ 'style-2': isCollapsible }"
+    >
+      <div class="ac-left-sidebar-inner">
+        <aside class="ac-left-sidebar">
+          <!-- sidebar header start  -->
+          <slot name="sidebar-header" />
+          <!-- sidebar header end  -->
+
+          <!-- sidebar components start -->
+          <slot name="sidebar-body" />
+          <!-- sidebar components end -->
+
+          <!-- sidebar footer  -->
+          <slot name="sidebar-footer" />
+          <!-- sidebar footer  -->
+        </aside>
+        <!-- sidebar top end -->
+      </div>
+      <!-- left-sidebar menu end -->
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.ac-left-sidebar-wrapper {
+  position: fixed;
+  top: 0px;
+  z-index: 9999;
+  background-color: $primary-20;
+  width: 250px;
+  transition: 0.3s ease-in-out;
+}
+
+.ac-left-sidebar {
+  .menu-list {
+    &.ac-menu-list {
+      height: calc(100vh - 80px);
+      overflow-y: auto;
+      padding-top: 4px;
+      scrollbar-color: $white-100-light transparent;
+
+      /* width */
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      li {
+        &.is-open {
+          a {
+            &.ac-dropdown-button {
+              .ac-arrow-down {
+                transform: rotate(-180deg);
+                transform-origin: 5px;
+              }
+            }
+          }
+
+          ul {
+            li {
+              a {
+                strong {
+                  font-weight: 500;
+                }
+              }
+            }
+          }
+        }
+
+        a {
+          font-style: normal;
+          font-weight: 500;
+          font-size: 13px;
+          line-height: 16px;
+          color: $primary-97;
+          position: relative;
+          z-index: 1;
+          padding: 10px 15px 10px 24px;
+          transition: 0.3s ease-in-out;
+          display: flex;
+          align-items: center;
+
+          &:after {
+            position: absolute;
+            content: "";
+            left: 10px;
+            top: 0;
+            width: calc(100% - 20px);
+            height: 100%;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 4px;
+            z-index: -1;
+            transition: 0.3s ease-in-out;
+            opacity: 0;
+            visibility: hidden;
+          }
+
+          strong {
+            max-width: calc(100% - 65px);
+            // line-break: anywhere;
+            white-space: break-spaces;
+            display: flex;
+            align-items: center;
+            overflow: hidden;
+            font-weight: 500;
+            transition: 0.3s ease-in-out;
+          }
+
+          &.ac-dropdown-button {
+            user-select: none;
+
+            .ac-arrow-down {
+              position: absolute;
+              margin-right: 0;
+              right: 20px;
+              transition: transform 0.3s;
+              transform-origin: 4px;
+              color: $black-70;
+            }
+          }
+
+          &:hover {
+            background-color: transparent;
+
+            &:after {
+              color: $primary;
+              opacity: 0.5;
+              visibility: visible;
+            }
+
+            span {
+              color: $primary-97;
+
+              img {
+                filter: brightness(10);
+              }
+            }
+          }
+
+          span {
+            margin-right: 12px;
+            width: 16px;
+            height: 16px;
+            color: $black-30;
+            font-size: 16px;
+
+            img {
+              width: 100%;
+              filter: brightness(10);
+              transition: 0.3s ease-in-out;
+            }
+          }
+        }
+
+        ul {
+          max-height: 0;
+          transition: max-height 0.2s ease-out;
+          margin: 0;
+          padding: 0;
+          border-left: none;
+          overflow: hidden;
+
+          li {
+            a {
+              padding-left: 52px;
+              font-size: 12px;
+              padding-top: 10px;
+              padding-bottom: 10px;
+            }
+          }
+        }
+      }
+    }
+    a {
+      &.is-active {
+        background-color: transparent;
+        &::after {
+          opacity: 1 !important;
+          visibility: visible !important;
+        }
+      }
+    }
+  }
+
+  // .ac-options.is-right {
+  //   .option-dots {
+  //     transition: 0.3s;
+
+  //     i.fa {
+  //       &.fa-angle-left {
+  //         font-size: 18px;
+  //       }
+  //     }
+
+  //     &:active {
+  //       i.fa {
+  //         background-color: $white-100-lighter;
+  //         width: 25px;
+  //         height: 25px;
+  //         text-align: center;
+  //         line-height: 25px;
+  //         border-radius: 50%;
+  //       }
+  //     }
+
+  //     &:hover {
+  //       color: $primary !important;
+  //       transform: scale(1.2);
+  //     }
+  //   }
+  // }
+}
+
+.sidebar-collapsed {
+  .ac-left-sidebar-wrapper {
+    width: 60px;
+    .ac-left-sidebar {
+      .menu-list {
+        &.ac-menu-list {
+          li {
+            a {
+              padding: 10px 15px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+
+              span {
+                margin: 0;
+              }
+              strong {
+                opacity: 0;
+                visibility: hidden;
+              }
+            }
+            ul {
+              li {
+                a {
+                  padding-left: 15px;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/vue-components/v3/sidebar/SidebarBody.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <ul class="menu-list ac-menu-list">
+    <slot />
+  </ul>
+</template>

package/vue-components/v3/sidebar/SidebarFooter.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+interface Props {
+  isColorpickerEnabled: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  isColorpickerEnabled: false,
+});
+
+const AccentColorPicker = defineAsyncComponent(
+  () => import("./AccentColorPicker.vue")
+);
+</script>
+
+<template>
+  <div class="sidebar-footer">
+    <!-- back button  -->
+    <button class="back-button is-transparent">
+      <svg
+        width="18"
+        height="18"
+        viewBox="0 0 18 18"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M11.25 13.5L6.75 9L11.25 4.5"
+          stroke="white"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M16 14V4"
+          stroke="white"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </button>
+    <!-- back button  -->
+
+    <!-- color control  -->
+    <div v-if="isColorpickerEnabled" class="accent-color-picker">
+      <accent-color-picker />
+    </div>
+    <!-- color control  -->
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.sidebar-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 30px;
+  border-top: 1px solid #3d5e7c;
+
+  .back-button {
+    display: flex;
+    padding: 5px 16px;
+    cursor: pointer;
+    justify-content: flex-start;
+    width: 50%;
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+}
+.sidebar-collapsed .ac-left-sidebar-wrapper {
+  .accent-color-picker {
+    display: none;
+  }
+  .sidebar-footer .back-button {
+    width: 100%;
+  }
+}
+</style>

package/vue-components/v3/sidebar/SidebarHeader.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+defineEmits(["toggleSidebar"]);
+
+interface Props {
+  brandLogo: string;
+  brandLogoAlt?: string;
+  url?: string;
+  modifierClasses?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  brandLogo: "https://via.placeholder.com/150x35/dddddd/808080",
+  brandLogoAlt: "",
+  url: "/",
+  modifierClasses: "",
+});
+</script>
+<template>
+  <div class="sidebar-header" @click="$emit('toggleSidebar')">
+    <!-- hamburger icon  -->
+    <div class="icon hamburger-icon mr-16">
+      <svg
+        width="18"
+        height="18"
+        viewBox="0 0 18 18"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M3 13.5L10.5 13.5"
+          stroke="white"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M3 9L15 9"
+          stroke="white"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M3 4.5L7.5 4.5"
+          stroke="white"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+    <!-- hamburger icon  -->
+
+    <!-- brand logo  -->
+    <router-link class="is-flex brand-logo" :to="url">
+      <img :src="brandLogo" alt="brand-logo" :class="modifierClasses" />
+    </router-link>
+    <!-- brand logo  -->
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.sidebar-collapsed .ac-left-sidebar-wrapper {
+  .brand-logo {
+    display: none !important;
+  }
+  .sidebar-header {
+    justify-content: center;
+    padding: 10px;
+    .hamburger-icon {
+      margin-right: 0 !important;
+    }
+  }
+}
+
+.sidebar-header {
+  background-color: transparent;
+  border-bottom: 1px solid #2f5473;
+  height: 50px;
+  display: flex;
+  // justify-content: space-between;
+  padding: 8px 20px;
+  align-items: center;
+
+  .hamburger-icon {
+    cursor: pointer;
+    position: relative;
+    z-index: 1;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    &::after {
+      position: absolute;
+      content: "";
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background-color: rgba(255, 255, 255, 0.1);
+      opacity: 0;
+      visibility: hidden;
+      transition: 0.3s ease-in-out;
+    }
+
+    &:hover {
+      &::after {
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+  }
+  .brand-logo {
+    display: flex;
+    align-items: center;
+    img {
+      height: 30px;
+    }
+  }
+}
+</style>

package/vue-components/v3/sidebar/SidebarItem.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { nextTick, watch, ref } from "vue";
+
+interface Props {
+  id?: string;
+  title?: string;
+  url?: string;
+  isActive?: boolean;
+  icon?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  id: "sidebar-id",
+  title: "sidebar-title",
+  url: "/",
+  isActive: false,
+  icon: "@/assets/images/icons/basic.svg",
+});
+
+const sidebarItem = ref<HTMLElement | null>(null);
+
+watch(
+  () => props.isActive,
+  (n) => {
+    if (n) {
+      nextTick(() => {
+        setTimeout(() => {
+          const top =
+            (sidebarItem.value &&
+              sidebarItem.value.getBoundingClientRect().top) ||
+            0;
+          // preventing scroll to options that are already visible
+          if (top > window.innerHeight - 200) {
+            // scroll to selected option item
+            sidebarItem.value?.scrollIntoView({
+              behavior: "smooth",
+              block: "center",
+            });
+          }
+        }, 500);
+      });
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <li ref="sidebarItem">
+    <router-link
+      :id="id"
+      :title="title"
+      :to="url"
+      :class="{ 'is-active': isActive }"
+    >
+      <span>
+        <img :src="icon" alt="icon" />
+      </span>
+      <strong>{{ title }}</strong>
+    </router-link>
+  </li>
+</template>