@appscode/design-system 2.2.33 → 2.2.35

package/package.json

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

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

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { computed, defineAsyncComponent, ref } from "vue";
+
+interface Props {
+  currentApp: "console" | "db" | "platform" | "billing" | "selfhost" | "learn" | "grafana";
+  baseUrl: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  currentApp: "platform",
+  baseUrl: "https://appscode.com",
+});
+
+const NavbarItem = defineAsyncComponent(() => import("./NavbarItem.vue"));
+const NavbarItemContent = defineAsyncComponent(() => import("./NavbarItemContent.vue"));
+const showDrawer = ref(false);
+
+function handleIsActiveChange(isActive: string) {
+  showDrawer.value = !!isActive?.length;
+}
+
+const getUrl = (products: Props["currentApp"]) => {
+  return `${props.baseUrl}/${products}`;
+};
+
+const appList = [
+  {
+    name: "console",
+    url: getUrl("console"),
+    icon_url: "https://cdn.appscode.com/images/products/console/console_512x512.svg",
+    title: "Console",
+    sub_title: "Manage your kubernetes clusters",
+  },
+  {
+    name: "db",
+    url: getUrl("db"),
+    icon_url: "https://cdn.appscode.com/images/products/kubedb/kubedb-512x512_1.svg",
+    title: "KubeDB",
+    sub_title: "Manage your databases",
+  },
+  {
+    name: "grafana",
+    url: getUrl("grafana"),
+    icon_url: "https://cdn.appscode.com/images/products/others/logos/grafana.svg",
+    title: "Grafana",
+    sub_title: "Analyze your activities",
+  },
+  {
+    name: "selfhost",
+    url: getUrl("selfhost"),
+    icon_url: "https://cdn.appscode.com/images/products/selfhost/logos/selfhost.svg",
+    title: "SelfHost",
+    sub_title: "Host AppsCode on your own cluster",
+  },
+  {
+    name: "billing",
+    url: getUrl("billing"),
+    icon_url: "https://cdn.appscode.com/images/products/billing/logos/billing.svg",
+    title: "Billing",
+    sub_title: "Manage your contracts, licenses & billings",
+  },
+  {
+    name: "learn",
+    url: getUrl("learn"),
+    icon_url: "https://cdn.appscode.com/images/products/learn/logos/learn.svg",
+    title: "Learn",
+    sub_title: "Be an Expert in Cloud Native technologies",
+  },
+];
+
+const isSelfHosted = computed(() => {
+  const list = ["https://appscode.ninja", "https://appscode.com", "http://bb.test:8080"];
+  return list.includes(props.baseUrl);
+});
+
+const filteredAppList = appList.filter((element) => {
+  // remove own app from dropdown
+  if (element.name === props.currentApp) return false;
+
+  // remove billing selfhost & learn from selfhost mode
+  let selfHostList = ["billing", "selfhost", "learn"];
+  if (isSelfHosted.value && selfHostList.includes(element.name)) return false;
+
+  return true;
+});
+</script>
+
+<template>
+  <navbar-item @on-is-active-change="handleIsActiveChange">
+    <template #navbar-item>
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <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>
+    </template>
+    <template #navbar-content>
+      <transition>
+        <div v-if="showDrawer">
+          <navbar-item-content class="navbar-dropdown-wrapper" style="right: -30px">
+            <ul class="ac-scrollbar p-0 app-drawer">
+              <li v-for="app in filteredAppList" :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>
+                  </article>
+                </a>
+              </li>
+            </ul>
+          </navbar-item-content>
+        </div>
+      </transition>
+    </template>
+  </navbar-item>
+</template>
+
+<style scoped>
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>

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

@@ -151,13 +151,13 @@ function handleIsActiveChange(isActive: string) {
                   </a>
                 </li>
                 <li key="settings-platform" v-else>
-                  <NuxtLink v-if="user.isPersonalAccount" data-testid="user-settings-link" :to="`/id/user/settings/`">
+                  <NuxtLink v-if="user.isPersonalAccount" data-testid="user-settings-link" to="/user/settings/">
                     <span class="icon">
                       <HeroiconsCog6Tooth />
                     </span>
                     <span>Settings</span>
                   </NuxtLink>
-                  <NuxtLink v-else data-testid="user-settings-link" :to="`/id/${user.username}/settings`">
+                  <NuxtLink v-else data-testid="user-settings-link" :to="`/${user.username}/settings`">
                     <span class="icon"> <HeroiconsCog6Tooth /> </span><span>Settings</span>
                   </NuxtLink>
                 </li>