@appscode/design-system 1.1.0 → 2.0.0

package/vue-components/v3/navbar/Appdrawer.vue

@@ -1,63 +1,210 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+interface app {
+  url: string;
+  icon_url: string;
+  title: string;
+  sub_title: string;
+}
+
+interface Props {
+  apps?: Array<app>;
+}
+
+withDefaults(defineProps<Props>(), {
+  apps: () => [],
+});
+
+const NavbarItem = defineAsyncComponent(() => import("./NavbarItem.vue"));
+const NavbarItemContent = defineAsyncComponent(
+  () => import("./NavbarItemContent.vue")
+);
+</script>
+
 <template>
-  <div class="app-drawer-wrapper is-flex">
-    <div
-      class="drawer-icon  is-flex is-justify-content-center is-align-items-center"
-    >
+  <navbar-item>
+    <template #navbar-item>
       <svg
-        class="gb_We"
-        focusable="false"
-        viewBox="0 0 24 24"
-        style="width: 22px;margin-top: 2px;"
-        :style="{ fill: 'white' }"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"
-        ></path>
+          d="M6.66667 2H2V6.66667H6.66667V2Z"
+          stroke="#061B2D"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M14 2H9.33337V6.66667H14V2Z"
+          stroke="#061B2D"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M14 9.33334H9.33337V14H14V9.33334Z"
+          stroke="#061B2D"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M6.66667 9.33334H2V14H6.66667V9.33334Z"
+          stroke="#061B2D"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
       </svg>
-    </div>
-    <!-- dropdown start -->
-    <div class="ac-menu-content app-drawer-dropdown is-active">
-      <ul>
-        <li v-for="app in apps" :key="app.url">
-          <a :href="app.url">
-            <article class="media">
-              <figure class="media-left">
-                <p class="image">
-                  <img :src="app.icon_url" />
-                </p>
-              </figure>
-              <div class="media-content">
-                <div class="content">
-                  <p>
-                    <strong>{{ app.title }}</strong>
-                    <span>{{ app.sub_title }}</span>
+    </template>
+    <template #navbar-content>
+      <navbar-item-content class="navbar-dropdown-wrapper" style="right: -30px">
+        <ul class="ac-scrollbar p-0">
+          <li v-for="app in apps" :key="app.url">
+            <a :href="app.url">
+              <article class="media">
+                <figure class="media-left">
+                  <p class="image">
+                    <img :src="app.icon_url" />
                   </p>
+                </figure>
+                <div class="media-content">
+                  <div class="content">
+                    <p>
+                      <strong>{{ app.title }}</strong>
+                      <span>{{ app.sub_title }}</span>
+                    </p>
+                  </div>
                 </div>
-              </div>
-            </article>
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
+              </article>
+            </a>
+          </li>
+        </ul>
+      </navbar-item-content>
+    </template>
+  </navbar-item>
 </template>
 
-<script>
-import { defineComponent, defineAsyncComponent } from "vue";
+<style lang="scss" scoped>
+.ac-menu-content.app-drawer-dropdown {
+  li {
+    border-bottom: 1px solid $primary-90;
+  }
+}
+
+.ac-menu-content {
+  ul {
+    border-radius: 4px;
+    overflow: hidden;
+    background-color: $white-100;
+    border: 1px solid $primary-90;
+    // box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.16);
+    max-height: calc(100vh - 100px);
+    overflow-y: auto;
+
+    li {
+      display: block;
+      font-size: 13px;
+      a {
+        display: block;
+        color: $primary-10 !important;
+        padding: 10px 20px !important;
+        font-size: 13px !important;
+        transition: 0.2s;
+        border-bottom: 1px solid $primary-90;
+
+        &:hover {
+          background-color: $primary-97 !important;
+        }
+
+        span {
+          margin-top: -3px;
+        }
 
-export default defineComponent({
-  props: {
-    apps: {
-      type: Array,
-      default: () => []
+        &:hover {
+          .media-content {
+            .content {
+              p {
+                color: $primary-20;
+              }
+            }
+          }
+        }
+
+        .media {
+          .media-left {
+            .image {
+              img {
+                height: 24px;
+                width: auto;
+              }
+            }
+          }
+
+          .media-content {
+            overflow: hidden;
+
+            .content {
+              p {
+                vertical-align: middle;
+                line-height: 1;
+                transition: 0.3s;
+
+                strong {
+                  font-weight: 600;
+                  font-size: 14px;
+                  // font-family: $font-heading;
+                }
+
+                span {
+                  display: block;
+                  font-size: 13px;
+                  margin-top: 4px;
+                  line-height: 150%;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      &:hover {
+        > a {
+          background-color: $white-100;
+        }
+      }
+
+      &:first-child {
+        &:hover {
+          > a {
+            border-radius: 4px 4px 0 0;
+          }
+        }
+      }
+
+      &:last-child {
+        &:hover {
+          > a {
+            border-radius: 0 0 4px 4px;
+          }
+        }
+      }
     }
-  },
-  components: {
-    NavbarItemContent: defineAsyncComponent(() =>
-      import("../../v2/navbar/NavbarItemContent.vue").then(
-        module => module.default
-      )
-    )
   }
-});
-</script>
+
+  position: absolute;
+  z-index: 99;
+  right: -154px;
+  top: 50px;
+  display: block;
+  transition: all 0.3s ease-in-out;
+
+  hr {
+    margin: 0;
+  }
+}
+</style>

package/vue-components/v3/navbar/Navbar.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+interface Props {
+  modifierClasses?: string;
+  fullWidth?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  modifierClasses: "",
+  fullWidth: false,
+});
+</script>
+
+<template>
+  <div
+    class="ac-navbar-area"
+    id="header"
+    :class="[modifierClasses, { 'is-full': fullWidth }]"
+  >
+    <div class="ac-navbar-inner">
+      <!-- navbar start  -->
+      <nav class="ac-navbar">
+        <!-- navbar logo start  -->
+        <div class="ac-navbar-brand" v-if="fullWidth">
+          <slot name="navbar-brand-logo" />
+        </div>
+        <!-- navbar logo end -->
+
+        <!-- navbar cluster-switcher area start  -->
+        <div class="ac-navbar-cluster-switcher">
+          <slot name="navbar-cluster-switcher" />
+        </div>
+        <!-- navbar cluster-switcher area end -->
+
+        <!-- navbar menus start  -->
+        <div class="ac-navbar-menu">
+          <!-- single navbar menu item start  -->
+          <slot />
+          <!-- single navbar menu item end  -->
+        </div>
+        <!-- navbar menus end -->
+      </nav>
+      <!-- navbar end -->
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.ac-navbar-area {
+  position: fixed;
+  margin-left: 250px;
+  width: 100%;
+  top: 0;
+  z-index: 999;
+  background-color: $primary-97;
+  border-bottom: 1px solid $primary-90;
+
+  &.is-full {
+    margin-left: 0;
+
+    .ac-navbar {
+      grid-template-columns: 250px auto auto;
+      width: 100%;
+      gap: 20px;
+      .ac-navbar-brand {
+        padding-left: 15px;
+      }
+    }
+  }
+
+  .ac-navbar {
+    display: inline-grid;
+    grid-template-columns: auto auto;
+    // margin-left: 255px;
+    grid-gap: 0px;
+    align-items: center;
+    width: calc(100% - 255px);
+    height: 50px;
+    // padding: 0 15px;
+
+    .ac-navbar-brand {
+      display: flex;
+      align-items: center;
+      .logo {
+        font-size: 20px;
+        font-weight: 600;
+        color: $white-100;
+      }
+
+      img {
+        height: 30px;
+      }
+    }
+    .ac-navbar-cluster-switcher {
+      max-width: 350px;
+    }
+    .ac-navbar-menu {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      .ac-menu-item {
+        position: relative;
+        z-index: 1;
+      }
+    }
+  }
+}
+// for sidebar-collapsed
+.sidebar-collapsed {
+  .ac-navbar {
+    .ac-navbar-brand {
+      padding-left: 70px !important;
+    }
+  }
+}
+
+/****************************************
+Responsive Classes
+*****************************************/
+// Extra small devices (portrait phones, less than 576px)
+@media (max-width: 575.98px) {
+}
+
+// Small devices (landscape phones, 576px and up)
+@media (min-width: 576px) and (max-width: 767.98px) {
+}
+
+// Medium devices (tablets, 768px and up)
+@media (min-width: 768px) and (max-width: 991.98px) {
+}
+
+// Large devices (desktops, 992px and up)
+@media (min-width: 992px) and (max-width: 1199.98px) {
+}
+
+// Extra large devices (large desktops, 1200px and up)
+@media (min-width: 1200px) {
+}
+</style>

package/vue-components/v3/navbar/NavbarItem.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { onClickOutside } from "@vueuse/core";
+
+interface Props {
+  modifierClasses?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  modifierClasses: "",
+});
+
+const emit = defineEmits(["isActive"]);
+
+const navbarItem = ref(null);
+
+const isActive = ref("");
+function clickEvent() {
+  if (isActive.value) isActive.value = "";
+  else isActive.value = " is-active";
+  emit("isActive", isActive.value);
+}
+
+onClickOutside(navbarItem, () => (isActive.value = ""));
+</script>
+
+<template>
+  <div
+    ref="navbarItem"
+    class="ac-menu-item"
+    :class="modifierClasses + isActive"
+  >
+    <button class="button ac-nav-button" @click="clickEvent()">
+      <slot name="navbar-item" />
+    </button>
+    <slot name="navbar-content" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.ac-menu-item {
+  margin-left: 8px;
+  position: relative;
+
+  &.is-active {
+    .ac-nav-button {
+      &::after {
+        background-color: $primary-90;
+      }
+    }
+  }
+
+  &:first-child {
+    margin-left: 0;
+  }
+  &.ac-profile-button {
+    button.button.ac-nav-button {
+      width: 100%;
+      background-color: transparent;
+      border-radius: 0;
+      font-weight: 500;
+      border: none;
+      &::after {
+        border-radius: 0;
+        border: none;
+        background-color: transparent;
+      }
+    }
+  }
+  .ac-nav-button {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    padding: 5px;
+    transition: all 0.3s ease-in-out;
+    position: relative;
+    z-index: 99;
+    user-select: none;
+    border: 1px solid $primary-80;
+    cursor: pointer;
+    &:after {
+      position: absolute;
+      content: "";
+      left: 0;
+      top: 0;
+      opacity: 1;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      transition: 0.3s ease-in-out;
+    }
+    &:focus {
+      box-shadow: none;
+    }
+    &:hover {
+      &:after {
+        background-color: $primary-90;
+      }
+    }
+  }
+}
+</style>