ketekny-ui-kit 1.0.87 → 1.0.89

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.87",
+  "version": "1.0.89",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [

package/src/layout/twoColLayout.vue

@@ -52,6 +52,7 @@
         @signup="handleSignup"
         @signout="handleSignout"
         @edit-profile="handleEditProfile"
+        @item-click="handleItemClick"
       >
         <template #sidebar-header>
           <slot name="sidebar-header" />
@@ -103,7 +104,7 @@
               :show-menu-search="showMenuSearch"
               :menu-search-placeholder="menuSearchPlaceholder"
               @logo-click="handleLogoClick"
-              @item-click="closeMobileMenu"
+              @item-click="handleItemClick"
               @signin="handleSignin"
               @signup="handleSignup"
               @signout="handleSignout"
@@ -141,7 +142,7 @@ export default {
     kIcon,
     SidebarPanel,
   },
-  emits: ["logo-click", "signin", "signup", "signout", "edit-profile"],
+  emits: ["logo-click", "signin", "signup", "signout", "edit-profile", "item-click"],
   props: {
     title: { type: String, default: "" },
     collapsedLogoSrc: {
@@ -275,6 +276,10 @@ export default {
       this.closeMobileMenu();
       this.$emit("edit-profile");
     },
+    handleItemClick(item) {
+      this.closeMobileMenu();
+      this.$emit("item-click", item);
+    },
     persistSidebarState() {
       if (typeof window === "undefined") return;
 

package/src/layout/twoColSidebarMenuList.vue

@@ -12,18 +12,19 @@
         <component
           :is="menuItemComponent(item)"
           v-bind="item.bindings"
-          class="flex min-w-0 flex-1 appearance-none items-center gap-3 border-0 bg-transparent px-2 py-1.5 text-left outline-none transition-all duration-150"
+          class="sidebar-menu-item flex min-w-0 flex-1 appearance-none items-center gap-3 rounded-r-xl border-l-2 border-transparent bg-transparent px-3 py-2 text-left outline-none transition-all duration-150"
           :class="itemRowClasses(item)"
           @click="handleItemClick(item, $event)"
         >
           <span
-            class="flex h-5 w-5 shrink-0 items-center justify-center text-[#eef2f7] transition-colors duration-150"
+            class="flex h-5 w-5 shrink-0 items-center justify-center transition-colors duration-150"
+            :class="item.active ? 'text-[#eef2f7]' : 'text-gray-500'"
           >
             <kIcon
               v-if="showFullIcon(item)"
               :name="item.icon"
               size="18"
-              color="#eef2f7"
+              :color="item.active ? '#eef2f7' : '#9ca3af'"
             />
             <span
               v-else
@@ -37,7 +38,7 @@
             <span
               v-if="item.description"
               class="mt-1 block truncate"
-              :class="[itemDescriptionClasses, item.active ? 'text-[#9fa6b5]' : 'text-[#6f7786]']"
+              :class="[itemDescriptionClasses, item.active ? 'text-[#9fa6b5]' : 'sidebar-menu-item-description text-[#6f7786]']"
             >
               {{ item.description }}
             </span>
@@ -105,11 +106,6 @@ export default {
         ? "text-[12px] leading-4"
         : "text-[11px] leading-4";
     },
-    activeIndicatorClasses() {
-      return this.level === 0
-        ? "before:left-0"
-        : "before:-left-4";
-    },
   },
   methods: {
     menuItemComponent(item) {
@@ -135,9 +131,11 @@ export default {
       return this.level === 0 && Boolean(item?.icon);
     },
     itemRowClasses(item) {
-      return item.active
-        ? `relative rounded-xl bg-[#1f232b] text-white before:absolute before:bottom-2 before:top-2 before:w-[3px] before:rounded-r-full before:bg-[#2491ff] ${this.activeIndicatorClasses}`
-        : "rounded-xl text-[#e5e7eb] hover:bg-[#242424] hover:text-white";
+      if (item.active) {
+        return "sidebar-menu-item--active text-white border-l-[#2491ff] bg-[#141922]";
+      }
+
+      return "text-[#e5e7eb] hover:text-white";
     },
     toggle(key) {
       this.$emit("toggle-branch", key);
@@ -145,3 +143,13 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.sidebar-menu-item--active {
+  box-shadow: inset 0 0 0 1px rgba(36, 145, 255, 0.1);
+}
+
+.sidebar-menu-item:hover .sidebar-menu-item-description {
+  color: #ffffff;
+}
+</style>