ketekny-ui-kit 1.0.86 → 1.0.88

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.86",
+  "version": "1.0.88",
   "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

@@ -1,6 +1,10 @@
 <template>
   <div class="space-y-1.5">
-    <div v-for="item in items" :key="item.key" class="space-y-1.5">
+    <div
+      v-for="item in items"
+      :key="item.key"
+      class="space-y-1.5"
+    >
       <div
         class="flex items-stretch"
         :class="item.hasChildren ? 'gap-2' : 'gap-0'"
@@ -15,16 +19,25 @@
           <span
             class="flex h-5 w-5 shrink-0 items-center justify-center text-[#eef2f7] transition-colors duration-150"
           >
-            <kIcon :name="item.icon" size="18" color="#eef2f7" />
+            <kIcon
+              v-if="showFullIcon(item)"
+              :name="item.icon"
+              size="18"
+              color="#eef2f7"
+            />
+            <span
+              v-else
+              class="h-1.5 w-1.5 rounded-full bg-current opacity-80"
+            />
           </span>
           <span class="min-w-0 flex-1">
-            <span class="block truncate text-[15px] font-medium leading-5">
+            <span class="block truncate font-medium" :class="itemLabelClasses">
               {{ item.label }}
             </span>
             <span
               v-if="item.description"
-              class="mt-1 block truncate text-[12px] leading-4"
-              :class="item.active ? 'text-[#9fa6b5]' : 'text-[#6f7786]'"
+              class="mt-1 block truncate"
+              :class="[itemDescriptionClasses, item.active ? 'text-[#9fa6b5]' : 'text-[#6f7786]']"
             >
               {{ item.description }}
             </span>
@@ -34,28 +47,29 @@
         <button
           v-if="item.hasChildren"
           type="button"
-          class="flex w-8 shrink-0 appearance-none items-center justify-center border-0 bg-transparent text-[#eef2f7] outline-none transition hover:bg-white/6 hover:text-white"
+          class="flex w-8 shrink-0 appearance-none items-center justify-center border-0 bg-transparent text-[#6f7786] outline-none transition hover:bg-white/6 hover:text-[#cbd5e1]"
           :aria-expanded="isExpanded(item)"
           :aria-label="`${isExpanded(item) ? 'Collapse' : 'Expand'} ${item.label}`"
           @click.stop="toggle(item.key)"
         >
           <kIcon
-            name="ChevronDown"
+            name="ChevronRight"
             size="15"
-            color="#eef2f7"
-            class="transition-transform duration-200"
-            :class="isExpanded(item) ? 'rotate-180' : ''"
+            color="currentColor"
+            class="!text-[#6f7786] transition-transform duration-200"
+            :class="isExpanded(item) ? 'rotate-90' : ''"
           />
         </button>
       </div>
 
       <div
         v-if="item.hasChildren && isExpanded(item)"
-        class="ml-2 border-l border-[#242834] pl-4"
+        class="ml-2 pl-4"
       >
         <TwoColSidebarMenuList
           :items="item.children"
           :expanded-state="expandedState"
+          :level="level + 1"
           @item-click="$emit('item-click', $event)"
           @toggle-branch="$emit('toggle-branch', $event)"
         />
@@ -77,8 +91,26 @@ export default {
   props: {
     items: { type: Array, default: () => [] },
     expandedState: { type: Object, required: true },
+    level: { type: Number, default: 0 },
   },
   emits: ["item-click", "toggle-branch"],
+  computed: {
+    itemLabelClasses() {
+      return this.level === 0
+        ? "text-[15px] leading-5"
+        : "text-[14px] leading-5";
+    },
+    itemDescriptionClasses() {
+      return this.level === 0
+        ? "text-[12px] leading-4"
+        : "text-[11px] leading-4";
+    },
+    activeIndicatorClasses() {
+      return this.level === 0
+        ? "before:left-0"
+        : "before:-left-4";
+    },
+  },
   methods: {
     menuItemComponent(item) {
       if (item?.isLink) return RouterLink;
@@ -99,9 +131,12 @@ export default {
     isExpanded(item) {
       return Boolean(this.expandedState[item.key]);
     },
+    showFullIcon(item) {
+      return this.level === 0 && Boolean(item?.icon);
+    },
     itemRowClasses(item) {
       return item.active
-        ? "relative rounded-xl bg-[#242424] text-white before:absolute before:bottom-2 before:left-0 before:top-2 before:w-[3px] before:rounded-r-full before:bg-[#2491ff]"
+        ? `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";
     },
     toggle(key) {