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

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

@@ -1,63 +1,208 @@
+<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>
+          <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);
+
+    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,296 @@
+<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-menu {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      // .ac-organizations {
+      //   margin: 0;
+
+      //   .ac-nav-button {
+      //     border: none;
+      //     margin: 0;
+      //     padding: 0;
+      //     margin-right: 15px;
+      //     width: 26px;
+      //     height: 26px;
+      //     border-radius: 50%;
+      //     overflow: hidden;
+      //     border: 2px solid $white-100;
+
+      //     &:last-child {
+      //       margin-right: 0;
+      //       position: relative;
+      //       z-index: 1;
+
+      //       .more-items {
+      //         text-align: center;
+      //         color: $white-100;
+      //         z-index: 99;
+      //         position: absolute;
+      //         font-size: 11px;
+      //         font-weight: 500;
+      //       }
+
+      //       &::after {
+      //         position: absolute;
+      //         content: "";
+      //         left: 0;
+      //         top: 0;
+      //         width: 100%;
+      //         height: 100%;
+      //         background-color: $primary-5;
+      //         opacity: 0.2;
+      //         z-index: 1;
+      //       }
+      //     }
+      //   }
+      // }
+
+      .ac-menu-item {
+        position: relative;
+        z-index: 1;
+
+        // width: 30px;
+        // height: 30px;
+        // border-radius: 50%;
+        // .ac-nav-button:not(.ac-profile-button) {
+        //   &:after {
+        //     content: "";
+        //     border-radius: 50%;
+        //     width: 30px;
+        //     height: 30px;
+        //     position: absolute;
+        //     z-index: -1;
+        //     left: 50%;
+        //     transition: 0.3s ease-in-out;
+        //     margin-left: -15px;
+        //   }
+
+        //   &:hover {
+        //     &:after {
+        //       background-color: rgba(255, 255, 255, 0.2) !important;
+        //     }
+        //   }
+        // }
+      }
+    }
+  }
+}
+// for sidebar-collapsed
+.sidebar-collapsed {
+  .ac-navbar {
+    .ac-navbar-brand {
+      padding-left: 70px !important;
+    }
+  }
+}
+// start dark theme
+.is-dark-theme {
+  body {
+    .ac-navbar-area {
+      background-color: var(--dark-bg-light);
+      --ac-white: #ffffff;
+      --ac-white-lighter: #f1f1f1;
+
+      .ac-navbar {
+        .search-item {
+          background-color: rgba(0, 0, 0, 0.2);
+        }
+
+        .ac-navbar-menu {
+          .ac-menu-item {
+            .quick-access {
+              --ac-white: var(--dark-bg-light);
+            }
+
+            .ac-menu-content {
+              // &.theme-choice {
+              //   background-color: var(--dark-bg-light);
+              // }
+
+              background-color: var(--dark-bg-light);
+
+              ul {
+                background-color: var(--dark-bg-light);
+              }
+
+              &::after {
+                --ac-white: var(--dark-bg-light);
+              }
+
+              .user-profile-wrapper {
+                --ac-white: var(--dark-bg-light);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// end dark theme code
+
+/****************************************
+Responsive Classes
+*****************************************/
+// Extra small devices (portrait phones, less than 576px)
+@media (max-width: 575.98px) {
+  // .ac-navbar-area {
+  //   .ac-navbar {
+  //     grid-template-columns: 60px 30px auto;
+
+  //     .ac-navbar-brand {
+  //       max-width: 40px;
+
+  //       a {
+  //         display: block;
+  //       }
+  //     }
+
+  //     .search-item {
+  //       display: inline-block;
+
+  //       input {
+  //         display: none;
+  //       }
+  //     }
+
+  //     .ac-navbar-menu {
+  //       .ac-menu-item {
+  //         .ac-nav-button {
+  //           margin-left: 0px;
+
+  //           &.ac-profile-button {
+  //             margin-left: 0px;
+
+  //             strong {
+  //               display: none;
+  //             }
+  //           }
+  //         }
+  //       }
+  //     }
+  //   }
+  // }
+}
+
+// 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) {
+  // .ac-navbar-area {
+  //   .ac-navbar {
+  //     grid-template-columns: 250px auto auto;
+  //   }
+  // }
+}
+
+// Large devices (desktops, 992px and up)
+@media (min-width: 992px) and (max-width: 1199.98px) {
+  // .ac-navbar-area {
+  //   .ac-navbar {
+  //     grid-template-columns: 270px auto auto;
+  //   }
+  // }
+}
+
+// Extra large devices (large desktops, 1200px and up)
+@media (min-width: 1200px) {
+}
+</style>

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

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+interface Props {
+  modifierClasses?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  modifierClasses: "",
+});
+</script>
+
+<template>
+  <div class="ac-menu-item" :class="modifierClasses">
+    <button class="button ac-nav-button">
+      <slot name="navbar-item" />
+    </button>
+    <slot name="navbar-content" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.ac-menu-item {
+  margin-left: 12px;
+  position: relative;
+
+  &: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;
+      // .ac-user-profile {
+      //   img {
+      //     border-radius: 50%;
+      //     width: 32px;
+      //     height: 32px;
+      //   }
+      // }
+      &::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;
+    cursor: pointer;
+    &:after {
+      position: absolute;
+      content: "";
+      left: 0;
+      top: 0;
+
+      background-color: $primary-80;
+      opacity: 0.2;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      transition: 0.3s ease-in-out;
+    }
+
+    &:hover {
+      &:after {
+        background-color: $primary-70;
+        opacity: 0.4;
+      }
+    }
+  }
+}
+</style>