@appscode/design-system 2.1.7 → 2.1.8

package/package.json

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

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { useRoute } from "vue-router";
+import { ref, watch } from "vue";
 import { onClickOutside } from "@vueuse/core";
 
 interface Props {
@@ -10,7 +11,7 @@ withDefaults(defineProps<Props>(), {
   modifierClasses: "",
 });
 
-const emit = defineEmits(["isActive"]);
+const emit = defineEmits(["isActive", "onRouteChange"]);
 
 const navbarItem = ref(null);
 
@@ -21,6 +22,14 @@ function clickEvent() {
   emit("isActive", isActive.value);
 }
 
+const route = useRoute();
+watch(
+  () => route.fullPath,
+  (n) => {
+    isActive.value = "";
+    emit("onRouteChange");
+  }
+);
 onClickOutside(navbarItem, () => (isActive.value = ""));
 </script>
 

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

@@ -3,7 +3,6 @@ import { defineAsyncComponent, ref, watch, computed, nextTick } from "vue";
 import HeroiconsCog6Tooth from "~icons/heroicons/cog-6-tooth";
 import HeroiconsWrenchScrewdriver from "~icons/heroicons/wrench-screwdriver";
 import HeroiconsUserGroup from "~icons/heroicons/user-group";
-import HeroiconsChartPie from "~icons/heroicons/chart-pie";
 import HeroiconsPower from "~icons/heroicons/power";
 import HeroiconsCheck from "~icons/heroicons/check";
 
@@ -39,8 +38,6 @@ const emit = defineEmits(["set:theme", "on-logout", "activeorg$set"]);
 const NavbarItem = defineAsyncComponent(() => import("../navbar/NavbarItem.vue"));
 const NavbarItemContent = defineAsyncComponent(() => import("../navbar/NavbarItemContent.vue"));
 
-const ThemeMode = defineAsyncComponent(() => import("../navbar/ThemeMode.vue"));
-
 const dropDownStatus = ref("close");
 const dropDownSectionHeight = ref<string | null>(null);
 const dropdownItems = ref(null as { $el: HTMLElement } | null);
@@ -73,14 +70,6 @@ const onOrganizationClick = (orgName: string) => {
   emit("activeorg$set", orgName);
 };
 
-const onMouseLeave = () => {
-  dropDownStatus.value = "close";
-};
-
-const setTheme = (val: string) => {
-  emit("set:theme", val);
-};
-
 const locationOrigin = window.location.origin;
 const isDocsUi = window.location.pathname.startsWith("/docs/");
 
@@ -94,10 +83,14 @@ watch(dropDownStatus, (n) => {
     dropDownSectionHeight.value = null;
   }
 });
+
+function closeDropdown() {
+  dropDownStatus.value = "close";
+}
 </script>
 
 <template>
-  <navbar-item :modifierClasses="'ac-profile-button'">
+  <navbar-item :modifierClasses="'ac-profile-button'" @on-route-change="closeDropdown">
     <template #navbar-item>
       <div class="ac-user-profile mr-8">
         <img :src="user.avatar_url" alt="User Photo" />