ketekny-ui-kit 1.0.84 → 1.0.85

package/package.json

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

package/src/layout/twoColLayout.vue

@@ -1,13 +1,13 @@
 <template>
   <div
-    class="relative flex min-h-screen flex-col bg-[#edf4fb] lg:h-screen lg:flex-row lg:overflow-hidden"
+    class="relative flex min-h-screen flex-col bg-[#edf4fb] lg:h-screen lg:flex-row lg:overflow-visible"
   >
     <button
       v-show="isDesktopViewport && isSidebarCollapsed"
       type="button"
       :aria-label="expandLabel"
       v-tooltip.right="expandLabel"
-      class="fixed top-0 z-[70] hidden h-10 w-10 items-center justify-center rounded-r-full border-white/15 bg-[#121b2e] text-white shadow-2xl shadow-black/50 transition-all duration-300 hover:bg-[#1a2640] lg:left-[42px] lg:translate-x-full lg:flex"
+      class="fixed top-0 z-[70] hidden h-10 w-10 items-center justify-center rounded-r-full border-white/15 bg-[#0b0c0f] text-white shadow-2xl shadow-black/50 transition-all duration-300 hover:bg-[#14161b] lg:left-[42px] lg:translate-x-full lg:flex"
       @click="toggleSidebar"
     >
       <slot name="collapsed-toggle-icon">
@@ -20,7 +20,7 @@
       type="button"
       :aria-label="collapseLabel"
       v-tooltip.left="collapseLabel"
-      class="fixed top-0 z-[70] hidden h-10 w-10 items-center justify-center rounded-r-full border-white/15 bg-[#121b2e] text-white shadow-2xl shadow-black/50 transition-all duration-300 hover:bg-[#1a2640] lg:left-[326px] lg:translate-x-full lg:flex"
+      class="fixed top-0 z-[70] hidden h-10 w-10 items-center justify-center rounded-r-full border-white/15 bg-[#0b0c0f] text-white shadow-2xl shadow-black/50 transition-all duration-300 hover:bg-[#14161b] lg:left-[326px] lg:translate-x-full lg:flex"
       @click.stop="toggleSidebar"
     >
       <slot name="toggle-icon">
@@ -45,6 +45,8 @@
         :contact-email="contactEmail"
         :help-url="helpUrl"
         :collapsed="isSidebarCollapsed"
+        :show-menu-search="showMenuSearch"
+        :menu-search-placeholder="menuSearchPlaceholder"
         @logo-click="handleLogoClick"
         @signin="handleSignin"
         @signup="handleSignup"
@@ -60,7 +62,7 @@
     <button
       v-if="!isDesktopViewport && !mobileMenuOpen"
       type="button"
-      class="fixed bottom-4 left-4 z-[80] flex h-14 w-14 items-center justify-center rounded-full bg-[#121b2e] text-white shadow-2xl shadow-black/40 transition-transform duration-200 hover:scale-105 hover:bg-[#1a2640] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70"
+      class="fixed bottom-4 left-4 z-[80] flex h-14 w-14 items-center justify-center rounded-full bg-[#0b0c0f] text-white shadow-2xl shadow-black/40 transition-transform duration-200 hover:scale-105 hover:bg-[#14161b] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70"
       aria-label="Open menu"
       @click="mobileMenuOpen = true"
     >
@@ -98,6 +100,8 @@
               :contact-email="contactEmail"
               :help-url="helpUrl"
               :collapsed="false"
+              :show-menu-search="showMenuSearch"
+              :menu-search-placeholder="menuSearchPlaceholder"
               @logo-click="handleLogoClick"
               @item-click="closeMobileMenu"
               @signin="handleSignin"
@@ -158,6 +162,11 @@ export default {
     account: { type: Object, default: null },
     contactEmail: { type: String, default: "grammateia@ketekny.gr" },
     helpUrl: { type: String, default: "" },
+    showMenuSearch: { type: Boolean, default: false },
+    menuSearchPlaceholder: {
+      type: String,
+      default: "Αναζήτηση...",
+    },
   },
   data() {
     return {
@@ -281,17 +290,34 @@ export default {
   },
   computed: {
     normalizedMainMenu() {
-      return this.mainMenu.map((item, index) => {
+      const normalizeItem = (item, index, parentKey = "menu") => {
         const isExternal = Boolean(item?.href);
         const isLink = Boolean(item?.to);
+        const children = Array.isArray(item?.children)
+          ? item.children.map((child, childIndex) =>
+              normalizeItem(
+                child,
+                childIndex,
+                item?.key || item?.label || `${parentKey}-${index}`
+              )
+            )
+          : [];
+        const hasActiveChild = children.some(
+          child => child.active || child.hasActiveChild
+        );
         const active = Boolean(item?.active);
+        const key = item?.key || item?.label || `${parentKey}-${index}`;
 
         return {
-          key: item?.key || item?.label || index,
+          key,
           label: item?.label || "",
           description: item?.description || "",
           icon: item?.icon || "Dot",
           active,
+          hasActiveChild,
+          hasChildren: children.length > 0,
+          children,
+          defaultExpanded: Boolean(item?.defaultExpanded),
           isExternal,
           isLink,
           bindings: isLink
@@ -311,11 +337,11 @@ export default {
                 type: "button",
                 title: item.title || item.label,
               },
-          classes: active
-            ? "border-white/70 bg-white/90 text-slate-950 shadow-lg shadow-black/20"
-            : "border-white/10 bg-white/5 text-white hover:border-cyan-400/40 hover:bg-white/10",
+          classes: "",
         };
-      });
+      };
+
+      return this.mainMenu.map((item, index) => normalizeItem(item, index));
     },
   },
 };

package/src/layout/twoColSidebarMenuList.vue

@@ -0,0 +1,112 @@
+<template>
+  <div 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'"
+      >
+        <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="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"
+          >
+            <kIcon :name="item.icon" size="18" color="#eef2f7" />
+          </span>
+          <span class="min-w-0 flex-1">
+            <span class="block truncate text-[15px] font-medium leading-5">
+              {{ item.label }}
+            </span>
+            <span
+              v-if="item.description"
+              class="mt-1 block truncate text-[12px] leading-4"
+              :class="item.active ? 'text-[#9fa6b5]' : 'text-[#6f7786]'"
+            >
+              {{ item.description }}
+            </span>
+          </span>
+        </component>
+
+        <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"
+          :aria-expanded="isExpanded(item)"
+          :aria-label="`${isExpanded(item) ? 'Collapse' : 'Expand'} ${item.label}`"
+          @click.stop="toggle(item.key)"
+        >
+          <kIcon
+            name="ChevronDown"
+            size="15"
+            color="#eef2f7"
+            class="transition-transform duration-200"
+            :class="isExpanded(item) ? 'rotate-180' : ''"
+          />
+        </button>
+      </div>
+
+      <div
+        v-if="item.hasChildren && isExpanded(item)"
+        class="ml-2 border-l border-[#242834] pl-4"
+      >
+        <TwoColSidebarMenuList
+          :items="item.children"
+          :expanded-state="expandedState"
+          @item-click="$emit('item-click', $event)"
+          @toggle-branch="$emit('toggle-branch', $event)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { RouterLink } from "vue-router";
+import kIcon from "../ui/kIcon.vue";
+
+export default {
+  name: "TwoColSidebarMenuList",
+  components: {
+    RouterLink,
+    kIcon,
+  },
+  props: {
+    items: { type: Array, default: () => [] },
+    expandedState: { type: Object, required: true },
+  },
+  emits: ["item-click", "toggle-branch"],
+  methods: {
+    menuItemComponent(item) {
+      if (item?.isLink) return RouterLink;
+      if (item?.isExternal) return "a";
+      return "button";
+    },
+    handleItemClick(item, event) {
+      event?.stopPropagation?.();
+
+      if (item?.hasChildren) {
+        event?.preventDefault?.();
+        this.toggle(item.key);
+        return;
+      }
+
+      this.$emit("item-click", item);
+    },
+    isExpanded(item) {
+      return Boolean(this.expandedState[item.key]);
+    },
+    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]"
+        : "rounded-xl text-[#e5e7eb] hover:bg-[#242424] hover:text-white";
+    },
+    toggle(key) {
+      this.$emit("toggle-branch", key);
+    },
+  },
+};
+</script>

package/src/layout/twoColSidebarPanel.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex h-full w-full flex-col overflow-x-hidden bg-[radial-gradient(circle_at_0_0,#ffffff0f,#0000_34%),linear-gradient(#101a2d_0%,#0a1120_52%,#070d19_100%)] text-white shadow-2xl transition-all duration-300 ease-out lg:relative lg:z-30 lg:will-change-transform"
+    class="flex h-full w-full flex-col overflow-visible border-r border-[#171a21] bg-[#0b0c0f] text-white shadow-[20px_0_50px_rgba(0,0,0,0.35)] transition-all duration-300 ease-out lg:relative lg:z-30 lg:will-change-transform"
   >
     <div class="relative">
       <button
@@ -16,6 +16,7 @@
           class="px-4 py-4 transition-all duration-300 cursor-pointer"
         />
       </button>
+
       <div
         v-if="title && !collapsed"
         class="py-3 text-xl font-bold text-center"
@@ -23,81 +24,94 @@
         {{ title }}
       </div>
 
-      <div v-if="helpUrl && !collapsed" class="px-4 pb-2">
-        <a
-          :href="helpUrl"
-          target="_blank"
-          rel="noreferrer"
-          class="inline-flex items-center gap-2 rounded-md px-2 py-1.5 text-sm font-semibold text-white/85 transition hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70"
-        >
-          <kIcon name="HelpCircle" size="16" color="#ffffff" />
-          <span>Χρειάζεστε βοήθεια;</span>
-        </a>
-      </div>
-
       <slot name="sidebar-header" />
     </div>
 
-    <div class="flex-1 pt-1">
-      <div v-if="collapsed" class="flex flex-col items-center gap-2 mx-1 mt-3">
-        <component
-          :is="menuItemComponent(item)"
-          v-for="item in menuItems"
-          :key="item.key"
-          v-bind="item.bindings"
-          class="relative flex items-center justify-center transition border group h-14 w-14 rounded-xl border-white/15"
-          :class="item.classes"
-          v-tooltip.right="item.label"
-          @click="$emit('item-click', item)"
-        >
-          <kIcon
-            :name="item.icon"
-            size="20"
-            :color="item.active ? '#0f172a' : '#ffffff'"
-          />
-        </component>
+    <div class="min-h-0 flex-1 overflow-y-auto px-3 pb-3 pt-2">
+      <div v-if="showMenuSearch && !collapsed" class="mb-3 px-1">
+        <kSearch
+          v-model="menuSearchTerm"
+          :debounce="0"
+          :placeholder="menuSearchPlaceholder"
+          input-class="border-[#242834] bg-[#1f1f1f] text-[#eef2f7] placeholder:text-[#8a92a1] shadow-none focus:border-[#3b82f6] focus:ring-[#3b82f6]/20"
+          icon-class="text-[#8a92a1]"
+        />
       </div>
-      <div v-else-if="menuItems.length" class="mx-2 mt-3 space-y-3">
-        <component
-          :is="menuItemComponent(item)"
+
+      <div
+        v-if="collapsed"
+        class="mt-2 flex flex-col items-center gap-1.5"
+      >
+        <div
           v-for="item in menuItems"
           :key="item.key"
-          v-bind="item.bindings"
-          class="flex items-start w-full gap-3 px-4 py-4 text-left transition-all duration-200 border rounded-2xl"
-          :class="item.classes"
-          @click="$emit('item-click', item)"
+          class="relative"
+          @mouseenter="handleCollapsedItemEnter(item, $event)"
+          @mouseleave="handleCollapsedItemLeave(item)"
         >
-          <span
-            class="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white/10 text-cyan-100 transition-colors duration-200"
-            :class="
-              item.active
-                ? 'bg-slate-950 text-white'
-                : item.label === 'Settings'
-                ? 'bg-sky-500/20 text-sky-50 ring-1 ring-sky-400/25'
-                : ''
-            "
+          <component
+            :is="menuItemComponent(item)"
+            v-bind="item.bindings"
+            class="relative flex h-11 w-11 items-center justify-center rounded-lg border border-transparent text-[#b3b9c6] transition hover:bg-white/6"
+            :class="item.classes"
+            :title="collapsedItemTooltip(item)"
+            @mouseenter="handleCollapsedItemEnter(item, $event)"
+            @click="handleCollapsedItemClick(item, $event)"
           >
-            <kIcon :name="item.icon" />
-          </span>
-          <span class="min-w-0">
-            <span class="block font-semibold leading-tight">
-              {{ item.label }}
-            </span>
-            <span
-              v-if="item.description"
-              class="block mt-1 text-sm"
-              :class="item.active ? 'text-slate-700' : 'text-slate-200'"
-            >
-              {{ item.description }}
-            </span>
-          </span>
-        </component>
+            <kIcon
+              :name="item.icon"
+              size="18"
+              :color="item.active ? '#ffffff' : '#b3b9c6'"
+            />
+          </component>
+        </div>
+      </div>
+      <div v-else-if="menuItems.length" class="mt-2">
+        <TwoColSidebarMenuList
+          :items="filteredMenuItems"
+          :expanded-state="expandedBranches"
+          @item-click="$emit('item-click', $event)"
+          @toggle-branch="toggleBranch"
+        />
       </div>
     </div>
 
+    <Teleport to="body">
+      <div
+        v-if="collapsedFlyoutItem"
+        class="fixed z-[200]"
+        :style="collapsedFlyoutStyle"
+        @mouseenter="handleCollapsedItemEnter(collapsedFlyoutItem)"
+        @mouseleave="handleCollapsedItemLeave(collapsedFlyoutItem)"
+      >
+        <div
+          class="w-[320px] rounded-2xl border border-[#242834] bg-[#0f1116] p-3 shadow-[0_24px_60px_rgba(0,0,0,0.45)]"
+        >
+          <div class="mb-2 px-2">
+            <div class="text-sm font-semibold text-white">
+              {{ collapsedFlyoutItem.label }}
+            </div>
+            <div
+              v-if="collapsedFlyoutItem.description"
+              class="mt-0.5 text-xs text-[#7f8794]"
+            >
+              {{ collapsedFlyoutItem.description }}
+            </div>
+          </div>
+
+          <TwoColSidebarMenuList
+            :items="collapsedFlyoutItem.children"
+            :expanded-state="expandedBranches"
+            @item-click="$emit('item-click', $event)"
+            @toggle-branch="toggleBranch"
+          />
+        </div>
+      </div>
+    </Teleport>
+
     <div
       v-if="account"
-      class="px-1 pb-4 border-b shrink-0 border-white/10 bg-slate-900/80 text-white/90"
+      class="shrink-0 border-t border-[#171a21] px-3 pb-4 pt-3 text-white/90"
     >
       <div v-if="collapsed" class="flex flex-col gap-3">
         <div v-if="helpUrl" class="flex flex-col items-center gap-2">
@@ -105,66 +119,98 @@
             :href="helpUrl"
             target="_blank"
             rel="noreferrer"
-            aria-label="Χρειάζεστε βοήθεια;"
-            title="Χρειάζεστε βοήθεια;"
-            class="relative flex items-center justify-center text-white transition border group h-14 w-14 rounded-xl border-white/15 bg-white/5 hover:border-cyan-400/40 hover:bg-white/10"
-            v-tooltip.right="'Χρειάζεστε βοήθεια;'"
+            aria-label="Βοήθεια"
+            title="Βοήθεια"
+            class="relative flex h-11 w-11 items-center justify-center rounded-lg border border-transparent text-[#b3b9c6] transition hover:bg-white/6 hover:text-white"
+            v-tooltip.right="'Βοήθεια'"
           >
-            <kIcon name="HelpCircle" size="20" color="#ffffff" />
+            <kIcon name="HelpCircle" size="18" color="#b3b9c6" />
           </a>
         </div>
         <div v-if="account.loggedIn" class="flex flex-col items-center gap-2">
           <button
             type="button"
-            class="relative flex items-center justify-center text-white transition border group h-14 w-14 rounded-xl border-white/15 bg-white/5 hover:border-cyan-400/40 hover:bg-white/10"
+            class="relative flex h-11 w-11 items-center justify-center rounded-lg border border-transparent text-[#b3b9c6] transition hover:bg-white/6 hover:text-white"
             :title="editProfileLabel"
             v-tooltip.right="editProfileLabel"
             @click="$emit('edit-profile')"
           >
-            <kIcon name="UserRoundCog" size="20" color="#ffffff" />
+            <kIcon name="UserRoundCog" size="18" color="#b3b9c6" />
           </button>
           <button
             type="button"
-            class="group relative flex h-14 w-14 items-center justify-center rounded-xl border border-white/15 bg-[#d97706] text-white transition hover:bg-[#b45309]"
+            class="group relative flex h-11 w-11 items-center justify-center rounded-lg border border-transparent text-[#b3b9c6] transition hover:bg-white/6 hover:text-white"
             :title="signOutLabel"
             v-tooltip.right="signOutLabel"
             @click="$emit('signout')"
           >
-            <kIcon name="LogOut" size="20" color="#ffffff" />
+            <kIcon name="LogOut" size="18" color="#b3b9c6" />
           </button>
         </div>
         <div v-else class="flex flex-col items-center gap-2">
           <button
             type="button"
-            class="relative flex items-center justify-center text-white transition border group h-14 w-14 rounded-xl border-white/15 bg-white/5 hover:border-cyan-400/40 hover:bg-white/10"
+            class="relative flex h-11 w-11 items-center justify-center rounded-lg border border-transparent text-[#b3b9c6] transition hover:bg-white/6 hover:text-white"
             :title="signInLabel"
             v-tooltip.right="signInLabel"
             @click="$emit('signin')"
           >
-            <kIcon name="LogIn" size="20" color="#ffffff" />
+            <kIcon name="LogIn" size="18" color="#b3b9c6" />
           </button>
           <button
             type="button"
-            class="relative flex items-center justify-center text-white transition border group h-14 w-14 rounded-xl border-white/15 bg-white/5 hover:border-cyan-400/40 hover:bg-white/10"
+            class="relative flex h-11 w-11 items-center justify-center rounded-lg border border-transparent text-[#b3b9c6] transition hover:bg-white/6 hover:text-white"
             :title="signUpLabel"
             v-tooltip.right="signUpLabel"
             @click="$emit('signup')"
           >
-            <kIcon name="UserPlus" size="20" color="#ffffff" />
+            <kIcon name="UserPlus" size="18" color="#b3b9c6" />
           </button>
         </div>
       </div>
-      <div v-else class="flex flex-col gap-3 px-3">
-        <div class="min-w-0">
+      <div v-else class="flex flex-col  px-1">
+        <div
+          v-if="helpUrl || account.loggedIn"
+        >
+          <a
+            v-if="helpUrl"
+            :href="helpUrl"
+            target="_blank"
+            rel="noreferrer"
+            class="flex w-full items-center gap-3 rounded-xl px-2 py-2 text-lg font-medium text-[#d7dbe3] transition hover:bg-[#242424] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70"
+          >
+            <kIcon name="HelpCircle" size="16" color="#d7dbe3" />
+            <span>Βοήθεια και υποστήριξη</span>
+          </a>
+          <button
+            v-if="account.loggedIn"
+            type="button"
+            class="flex w-full items-center gap-3 rounded-xl px-2 py-2 text-left text-lg font-medium text-[#d7dbe3] transition hover:bg-[#242424] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70"
+            @click="$emit('edit-profile')"
+          >
+            <kIcon name="UserRoundCog" size="16" color="#d7dbe3" />
+            <span>Το προφίλ μου</span>
+          </button>
+          <button
+            v-if="account.loggedIn"
+            type="button"
+            class="flex w-full items-center gap-3 rounded-xl px-2 py-2 text-left text-lg font-medium text-[#f59e0b] transition hover:bg-[#3a1f12] hover:text-[#fbbf24] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#f59e0b]/40"
+            @click="$emit('signout')"
+          >
+            <kIcon name="LogOut" size="16" color="#f59e0b" />
+            <span>Αποσύνδεση</span>
+          </button>
+        </div>
+        <div v-if="!account.loggedIn" class="min-w-0">
           <p
             v-if="account.loggedIn"
-            class="mt-2 text-lg font-semibold text-white truncate"
+            class="mt-1 truncate text-sm font-semibold text-white"
           >
             {{ accountDisplayName }}
           </p>
           <p
             v-if="account.loggedIn && displayEmail"
-            class="text-sm truncate text-slate-300"
+            class="truncate text-xs text-[#7c8392]"
           >
             {{ displayEmail }}
           </p>
@@ -184,33 +230,19 @@
             :label="signUpLabel"
             @click="$emit('signup')"
           />
-          <kButton
-            v-if="account.loggedIn"
-            variant="soft"
-            icon="UserRoundCog"
-            :label="editProfileLabel"
-            @click="$emit('edit-profile')"
-          />
-          <kButton
-            v-if="account.loggedIn"
-            icon="LogOut"
-            warning
-            :label="signOutLabel"
-            @click="$emit('signout')"
-          />
         </div>
       </div>
     </div>
 
     <div
       v-if="!collapsed"
-      class="border-t shrink-0 border-white/10 text-white/70"
+      class="shrink-0 border-t border-[#171a21] p-3 text-[#8c93a1]"
     >
-      <div v-if="showContactInfo" class="flex flex-col gap-2 px-4">
-        <p class="text-sm font-semibold uppercase tracking-[0.25em] text-white/80">
+      <div v-if="showContactInfo" class="flex flex-col gap-2 px-1">
+        <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#666d79]">
           KETEKNY AE
         </p>
-        <div class="flex flex-wrap items-center text-sm gap-x-3">
+        <div class="flex flex-wrap items-center gap-x-3 text-xs">
           <span class="whitespace-nowrap">{{ contactAddressLabel }}</span>
           <span class="whitespace-nowrap">210 3648 337</span>
           <span class="whitespace-nowrap">
@@ -232,10 +264,7 @@
         </div>
       </div>
 
-      <div
-        v-if="showSponsors"
-        class="mt-2 flex flex-col gap-3 bg-[#0d4b87] px-4 py-1"
-      >
+      <div v-if="showSponsors" class="mt-2 -mx-3 flex flex-col gap-3 bg-[#0d4b87] px-4 py-1">
         <div>
           <img
             src="https://s3.ketekny.gr/public/web-apps/sponsors/Greece 2.0_NextGeneration_White_gr.png"
@@ -259,6 +288,8 @@
 import { RouterLink } from "vue-router";
 import kButton from "../ui/kButton.vue";
 import kIcon from "../ui/kIcon.vue";
+import kSearch from "../ui/kSearch.vue";
+import TwoColSidebarMenuList from "./twoColSidebarMenuList.vue";
 
 const LABELS = {
   editProfile: "Το προφίλ μου",
@@ -274,7 +305,9 @@ export default {
   components: {
     kButton,
     kIcon,
+    kSearch,
     RouterLink,
+    TwoColSidebarMenuList,
   },
   emits: [
     "logo-click",
@@ -299,8 +332,64 @@ export default {
     contactEmail: { type: String, default: "grammateia@ketekny.gr" },
     helpUrl: { type: String, default: "" },
     collapsed: { type: Boolean, default: false },
+    showMenuSearch: { type: Boolean, default: false },
+    menuSearchPlaceholder: {
+      type: String,
+      default: "Αναζήτηση...",
+    },
+  },
+  data() {
+    return {
+      expandedBranches: {},
+      collapsedFlyoutKey: null,
+      collapsedFlyoutPosition: null,
+      collapsedFlyoutCloseTimer: null,
+      menuSearchTerm: "",
+    };
   },
   computed: {
+    filteredMenuItems() {
+      if (!this.showMenuSearch) return this.menuItems;
+
+      const query = this.menuSearchTerm.trim().toLowerCase();
+      if (!query) return this.menuItems;
+
+      const filterItems = items =>
+        items.reduce((acc, item) => {
+          const filteredChildren = item.children?.length
+            ? filterItems(item.children)
+            : [];
+          const matchesSelf =
+            item.label?.toLowerCase().includes(query) ||
+            item.description?.toLowerCase().includes(query);
+
+          if (!matchesSelf && filteredChildren.length === 0) {
+            return acc;
+          }
+
+          acc.push({
+            ...item,
+            children: filteredChildren,
+            hasChildren: filteredChildren.length > 0,
+          });
+          return acc;
+        }, []);
+
+      return filterItems(this.menuItems);
+    },
+    collapsedFlyoutItem() {
+      if (!this.collapsedFlyoutKey) return null;
+
+      return this.findMenuItemByKey(this.filteredMenuItems, this.collapsedFlyoutKey);
+    },
+    collapsedFlyoutStyle() {
+      if (!this.collapsedFlyoutPosition) return {};
+
+      return {
+        left: `${this.collapsedFlyoutPosition.left}px`,
+        top: `${this.collapsedFlyoutPosition.top}px`,
+      };
+    },
     accountDisplayName() {
       if (!this.account) return "";
 
@@ -345,12 +434,129 @@ export default {
       `;
     },
   },
+  watch: {
+    menuItems: {
+      immediate: true,
+      handler(items) {
+        this.expandedBranches = this.buildExpandedState(items, {
+          ...this.expandedBranches,
+        });
+
+        if (
+          this.collapsedFlyoutKey &&
+          !this.findMenuItemByKey(items, this.collapsedFlyoutKey)
+        ) {
+          this.collapsedFlyoutKey = null;
+          this.collapsedFlyoutPosition = null;
+        }
+      },
+    },
+    menuSearchTerm() {
+      this.expandedBranches = this.buildExpandedState(this.filteredMenuItems, {
+        ...this.expandedBranches,
+      });
+    },
+  },
+  beforeUnmount() {
+    this.clearCollapsedFlyoutCloseTimer();
+  },
   methods: {
     menuItemComponent(item) {
       if (item?.isLink) return RouterLink;
       if (item?.isExternal) return "a";
       return "button";
     },
+    collapsedItemTooltip(item) {
+      return item?.hasChildren ? null : item.label;
+    },
+    buildExpandedState(items, state = {}) {
+      items.forEach(item => {
+        if (!item?.hasChildren) return;
+
+        const hasActiveDescendant = this.branchHasActiveChild(item.children);
+        if (!(item.key in state)) {
+          state[item.key] = Boolean(hasActiveDescendant);
+        } else if (hasActiveDescendant) {
+          state[item.key] = true;
+        }
+        this.buildExpandedState(item.children, state);
+      });
+
+      return state;
+    },
+    branchHasActiveChild(children = []) {
+      return children.some(
+        child => child.active || this.branchHasActiveChild(child.children || [])
+      );
+    },
+    toggleBranch(key) {
+      this.expandedBranches = {
+        ...this.expandedBranches,
+        [key]: !this.expandedBranches[key],
+      };
+    },
+    findMenuItemByKey(items, key) {
+      for (const item of items) {
+        if (item.key === key) return item;
+        if (item.children?.length) {
+          const found = this.findMenuItemByKey(item.children, key);
+          if (found) return found;
+        }
+      }
+
+      return null;
+    },
+    updateCollapsedFlyoutPosition(event) {
+      const trigger = event?.currentTarget;
+      if (!trigger || typeof window === "undefined") return;
+
+      const rect = trigger.getBoundingClientRect();
+      this.collapsedFlyoutPosition = {
+        left: rect.right + 12,
+        top: Math.max(12, rect.top),
+      };
+    },
+    clearCollapsedFlyoutCloseTimer() {
+      if (this.collapsedFlyoutCloseTimer) {
+        window.clearTimeout(this.collapsedFlyoutCloseTimer);
+        this.collapsedFlyoutCloseTimer = null;
+      }
+    },
+    handleCollapsedItemEnter(item, event) {
+      if (!item?.hasChildren) return;
+
+      this.clearCollapsedFlyoutCloseTimer();
+      this.collapsedFlyoutKey = item.key;
+      if (event) {
+        this.updateCollapsedFlyoutPosition(event);
+      }
+    },
+    handleCollapsedItemLeave(item) {
+      if (this.collapsedFlyoutKey !== item?.key) return;
+
+      this.clearCollapsedFlyoutCloseTimer();
+      this.collapsedFlyoutCloseTimer = window.setTimeout(() => {
+        if (this.collapsedFlyoutKey !== item?.key) return;
+
+        this.collapsedFlyoutKey = null;
+        this.collapsedFlyoutPosition = null;
+        this.collapsedFlyoutCloseTimer = null;
+      }, 180);
+    },
+    showCollapsedFlyout(item) {
+      return this.collapsedFlyoutKey === item?.key && item?.hasChildren;
+    },
+    handleCollapsedItemClick(item, event) {
+      if (item?.hasChildren) {
+        event?.preventDefault?.();
+        this.clearCollapsedFlyoutCloseTimer();
+        this.collapsedFlyoutKey = item.key;
+        this.updateCollapsedFlyoutPosition(event);
+        return;
+      }
+
+      this.$emit("item-click", item);
+    },
   },
 };
 </script>

package/src/ui/kSearch.vue

@@ -8,12 +8,15 @@
       type="text"
       v-model="localValue"
       @input="onInput"
-      :class="[defaultStyle, disabled ? disabledStyle : '']"
+      :class="[defaultStyle, inputClass, disabled ? disabledStyle : '']"
       :placeholder="placeholder"
       :aria-label="!label ? placeholder : null"
       :disabled="disabled"
     />
-    <Search class="absolute w-4 h-4 text-primary/70 -translate-y-1/2 pointer-events-none right-3 top-1/2" />
+    <Search
+      class="absolute w-4 h-4 -translate-y-1/2 pointer-events-none right-3 top-1/2"
+      :class="iconClass"
+    />
   </div>
 </template>
 
@@ -30,6 +33,8 @@ export default {
     placeholder: { type: String, default: "Αναζήτηση..." },
     label: { type: String, default: "" },
     disabled: { type: Boolean, default: false },
+    inputClass: { type: String, default: "" },
+    iconClass: { type: String, default: "text-primary/70" },
   },
   data() {
     return {