ketekny-ui-kit 1.0.89 → 1.0.91

package/package.json

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

package/src/layout/twoColLayout.vue

@@ -317,6 +317,7 @@ export default {
           key,
           label: item?.label || "",
           description: item?.description || "",
+          badge: item?.badge ?? null,
           icon: item?.icon || "Dot",
           active,
           hasActiveChild,

package/src/layout/twoColSidebarMenuList.vue

@@ -12,23 +12,29 @@
         <component
           :is="menuItemComponent(item)"
           v-bind="item.bindings"
-          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="sidebar-menu-item relative flex min-h-[38px] min-w-0 flex-1 items-center gap-2.5 rounded-md px-3 py-2 text-left outline-none transition-colors duration-150"
           :class="itemRowClasses(item)"
           @click="handleItemClick(item, $event)"
         >
           <span
-            class="flex h-5 w-5 shrink-0 items-center justify-center transition-colors duration-150"
-            :class="item.active ? 'text-[#eef2f7]' : 'text-gray-500'"
+            v-if="item.active"
+            class="absolute left-0 top-1/2 h-5 w-1 -translate-y-1/2 rounded-r bg-[#2491ff]"
+            aria-hidden="true"
+          />
+          <span
+            class="flex h-4 w-4 shrink-0 items-center justify-center transition-colors duration-150"
+            :class="iconWrapClasses(item)"
           >
             <kIcon
               v-if="showFullIcon(item)"
               :name="item.icon"
-              size="18"
-              :color="item.active ? '#eef2f7' : '#9ca3af'"
+              size="16"
+              color="currentColor"
+              class="sidebar-menu-item-icon"
             />
             <span
               v-else
-              class="h-1.5 w-1.5 rounded-full bg-current opacity-80"
+              class="h-1.5 w-1.5 rounded-full bg-current"
             />
           </span>
           <span class="min-w-0 flex-1">
@@ -37,18 +43,25 @@
             </span>
             <span
               v-if="item.description"
-              class="mt-1 block truncate"
+              class="block truncate"
               :class="[itemDescriptionClasses, item.active ? 'text-[#9fa6b5]' : 'sidebar-menu-item-description text-[#6f7786]']"
             >
               {{ item.description }}
             </span>
           </span>
+          <span
+            v-if="item.badge != null"
+            class="ml-auto rounded-full px-1.5 py-0.5 text-[11px] font-medium leading-none tabular-nums transition-colors duration-150"
+            :class="badgeClasses(item)"
+          >
+            {{ item.badge }}
+          </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-[#6f7786] outline-none transition hover:bg-white/6 hover:text-[#cbd5e1]"
+          class="flex w-8 shrink-0 appearance-none items-center justify-center border-0 bg-transparent text-[#6f7786] outline-none transition-colors duration-150 hover:text-[#e5e7eb]"
           :aria-expanded="isExpanded(item)"
           :aria-label="`${isExpanded(item) ? 'Collapse' : 'Expand'} ${item.label}`"
           @click.stop="toggle(item.key)"
@@ -65,7 +78,7 @@
 
       <div
         v-if="item.hasChildren && isExpanded(item)"
-        class="ml-2 pl-4"
+        class="pl-3"
       >
         <TwoColSidebarMenuList
           :items="item.children"
@@ -130,12 +143,28 @@ export default {
     showFullIcon(item) {
       return this.level === 0 && Boolean(item?.icon);
     },
+    iconWrapClasses(item) {
+      if (item.active) return "text-[#eef2f7]";
+      if (item.hasActiveChild) return "text-[#cfd6e4]";
+      return "text-[#7b8494] group-hover:text-[#eef2f7]";
+    },
+    badgeClasses(item) {
+      if (item.active) {
+        return "bg-white/12 text-[#eef2f7]";
+      }
+
+      return "sidebar-menu-item-badge bg-white/8 text-[#8e97a8]";
+    },
     itemRowClasses(item) {
       if (item.active) {
-        return "sidebar-menu-item--active text-white border-l-[#2491ff] bg-[#141922]";
+        return "sidebar-menu-item--active bg-white/10 text-[#eef2f7]";
+      }
+
+      if (item.hasActiveChild) {
+        return "text-[#eef2f7]";
       }
 
-      return "text-[#e5e7eb] hover:text-white";
+      return "text-[#c7cfdb] hover:bg-white/6 hover:text-[#eef2f7]";
     },
     toggle(key) {
       this.$emit("toggle-branch", key);
@@ -145,11 +174,37 @@ export default {
 </script>
 
 <style scoped>
+.sidebar-menu-item-icon,
+.sidebar-menu-item-description {
+  transition: color 150ms ease-out;
+}
+
 .sidebar-menu-item--active {
-  box-shadow: inset 0 0 0 1px rgba(36, 145, 255, 0.1);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
+}
+
+.sidebar-menu-item-icon {
+  color: currentColor !important;
+}
+
+.sidebar-menu-item--active .sidebar-menu-item-icon {
+  color: #eef2f7 !important;
+}
+
+.sidebar-menu-item:hover .sidebar-menu-item-icon {
+  color: #eef2f7 !important;
+}
+
+.sidebar-menu-item:hover {
+  color: #eef2f7;
+}
+
+.sidebar-menu-item:hover .sidebar-menu-item-badge {
+  color: #eef2f7;
 }
 
+.sidebar-menu-item--active .sidebar-menu-item-description,
 .sidebar-menu-item:hover .sidebar-menu-item-description {
-  color: #ffffff;
+  color: #eef2f7;
 }
 </style>

package/src/layout/twoColSidebarPanel.vue

@@ -211,33 +211,34 @@
       <div v-else class="flex flex-col  px-1">
         <div
           v-if="helpUrl || account.loggedIn"
+          class="flex flex-col gap-0.5"
         >
           <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"
+            class="sidebar-footer-item flex min-h-[38px] w-full items-center gap-2.5 rounded-md bg-transparent px-3 py-2 text-left text-[15px] font-medium text-[#c7cfdb] outline-none transition-colors duration-150 hover:bg-white/6 hover:text-[#eef2f7] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70"
           >
-            <kIcon name="HelpCircle" size="16" color="#d7dbe3" />
+            <kIcon name="HelpCircle" size="16" color="currentColor" class="sidebar-footer-item-icon" />
             <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"
+            class="sidebar-footer-item flex min-h-[38px] w-full items-center gap-2.5 rounded-md bg-transparent px-3 py-2 text-left text-[15px] font-medium text-[#c7cfdb] outline-none transition-colors duration-150 hover:bg-white/6 hover:text-[#eef2f7] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70"
             @click="$emit('edit-profile')"
           >
-            <kIcon name="UserRoundCog" size="16" color="#d7dbe3" />
+            <kIcon name="UserRoundCog" size="16" color="currentColor" class="sidebar-footer-item-icon" />
             <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"
+            class="sidebar-footer-item sidebar-footer-item--warning flex min-h-[38px] w-full items-center gap-2.5 rounded-md bg-transparent px-3 py-2 text-left text-[15px] font-medium text-[#f59e0b] outline-none transition-colors duration-150 hover:bg-[#3a2410] 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" />
+            <kIcon name="LogOut" size="16" color="currentColor" class="sidebar-footer-item-icon" />
             <span>Αποσύνδεση</span>
           </button>
         </div>
@@ -631,3 +632,22 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.sidebar-footer-item-icon {
+  color: #9ca3af !important;
+  transition: color 200ms ease-out;
+}
+
+.sidebar-footer-item:hover .sidebar-footer-item-icon {
+  color: #ffffff !important;
+}
+
+.sidebar-footer-item--warning .sidebar-footer-item-icon {
+  color: #f59e0b !important;
+}
+
+.sidebar-footer-item--warning:hover .sidebar-footer-item-icon {
+  color: #fbbf24 !important;
+}
+</style>

package/src/style/style.css

@@ -1,48 +1,17 @@
-@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-body {
-    font-family: "Ubuntu", Helvetica, Arial, sans-serif;
-}
-
-
-h1, h2, h3, h4{
-    color: theme('colors.primary');
-    font-weight: bold;
-    line-height: 1.2;
-}
-h1{
-    font-size: clamp(1.625rem, 4vw + 0.75rem, 2.5rem);
-}
-
-h2{
-    font-size: clamp(1.375rem, 3vw + 0.7rem, 2rem);
-}
-h3{
-    font-size: clamp(1.125rem, 2vw + 0.6rem, 1.5rem);
+html,
+body,
+#app {
+  height: 100%;
 }
-h4{
-    font-size: clamp(1rem, 1.5vw + 0.55rem, 1.25rem);
-}
-
-.group{
-    border: 1px dotted #ccc;
-    padding: 10px;
-    border-radius: 5px;
-}
-
-.inputLabel{
-    font-weight: bold;
-    color: theme('colors.primary');
-}
-
-.menuList{
-@apply p-2;
-li{
-    @apply p-2 rounded cursor-pointer ;
 
-}
+body {
+  margin: 0;
+  font-family: 'Ubuntu', ui-sans-serif, system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
 }

package/src/twoColLayout/components/MultilevelSidebar.vue

@@ -0,0 +1,422 @@
+<script>
+import {
+  Search,
+  Bell,
+  Building2,
+  CircleUser,
+  CircleHelp,
+  X,
+  LogOut,
+  PanelLeftClose,
+  PanelLeftOpen,
+  UserRound,
+} from '@lucide/vue'
+import SidebarMenuItem from './SidebarMenuItem.vue'
+
+export default {
+  name: 'MultilevelSidebar',
+  components: {
+    Search,
+    Bell,
+    Building2,
+    CircleUser,
+    CircleHelp,
+    X,
+    LogOut,
+    PanelLeftClose,
+    PanelLeftOpen,
+    UserRound,
+    SidebarMenuItem,
+  },
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    width: {
+      type: String,
+      default: "360px",
+    },
+    collapsedWidth: {
+      type: String,
+      default: "76px",
+    },
+    mainMenu: {
+      type: Array,
+      default: () => [],
+    },
+    account: {
+      type: Object,
+      default: null,
+    },
+    contactEmail: {
+      type: String,
+      default: "grammateia@ketekny.gr",
+    },
+    helpUrl: {
+      type: String,
+      default: "https://help.ketekny.gr",
+    },
+    mobileOpen: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['select', 'logo-click', 'signin', 'signup', 'signout', 'edit-profile', 'item-click'],
+  data() {
+    return {
+      activeId: 'dashboard',
+      query: '',
+      collapsed: false,
+      openIds: new Set(['projects']),
+      footerLinks: [
+        { id: 'my-profile', label: 'Το προφίλ μου', icon: 'UserRound' },
+        { id: 'help', label: 'Βοήθεια', icon: 'CircleHelp' },
+        { id: 'sign-out', label: 'Αποσύνδεση', icon: 'LogOut' },
+      ],
+    }
+  },
+  computed: {
+    sidebarWidthStyle() {
+      return {
+        width: this.collapsed ? this.collapsedWidth : this.width,
+      }
+    },
+    collapsedTitle() {
+      if (!this.title) return ''
+      const words = this.title.trim().split(/\s+/).filter(Boolean)
+      return words.slice(0, 3).map(word => word.charAt(0)).join('').toUpperCase()
+    },
+    accountDisplayName() {
+      if (!this.account) return 'Ava Mitchell'
+      return [this.account.firstName, this.account.lastName].filter(Boolean).join(' ') || 'Account'
+    },
+    accountEmail() {
+      return this.account?.email || 'ava@nimbus.io'
+    },
+    filteredMenu() {
+      const q = this.query.trim().toLowerCase()
+      if (!q) return this.mainMenu
+      return this.filterTree(this.mainMenu, q)
+    },
+    effectiveOpenIds() {
+      const q = this.query.trim().toLowerCase()
+      if (!q) return this.openIds
+      const all = new Set()
+      const collect = (nodes) => {
+        for (const node of nodes) {
+          if (node.children) {
+            all.add(node.id)
+            collect(node.children)
+          }
+        }
+      }
+      collect(this.filteredMenu)
+      return all
+    },
+  },
+  methods: {
+    toggleCollapsed() {
+      this.collapsed = !this.collapsed
+    },
+    toggle(id) {
+      if (this.openIds.has(id)) this.openIds.delete(id)
+      else this.openIds.add(id)
+    },
+    select(itemOrId) {
+      const id = typeof itemOrId === 'string' ? itemOrId : itemOrId?.id
+      if (!id) return
+      this.activeId = id
+      this.$emit('select', id)
+    },
+    navigateItem(item) {
+      const to = item?.link?.to ?? item?.to
+      const href = item?.link?.href ?? item?.href
+
+      if (to && this.$router) {
+        this.$router.push(to).catch(() => {})
+        return true
+      }
+
+      if (href) {
+        window.open(href, '_blank', 'noopener,noreferrer')
+        return true
+      }
+
+      return false
+    },
+    filterTree(nodes, q) {
+      const result = []
+      for (const node of nodes) {
+        const matches = node.label.toLowerCase().includes(q)
+        const matchedChildren = node.children ? this.filterTree(node.children, q) : []
+        if (matches) result.push(node)
+        else if (matchedChildren.length) result.push({ ...node, children: matchedChildren })
+      }
+      return result
+    },
+    handleFooterSelect(id) {
+      if (id === 'help') {
+        window.open(this.helpUrl || 'https://help.ketekny.gr', '_blank', 'noopener,noreferrer')
+        return
+      }
+      if (id === 'my-profile') {
+        this.$emit('edit-profile')
+        return
+      }
+      if (id === 'sign-out') {
+        this.$emit('signout')
+        return
+      }
+      this.select(id)
+    },
+    handleLogoClick() {
+      this.$emit('logo-click')
+    },
+    handleMenuSelect(item) {
+      const isExternalLink = Boolean(item?.link?.href ?? item?.href)
+      if (!isExternalLink) {
+        this.select(item)
+      }
+      this.$emit('item-click', item)
+      this.navigateItem(item)
+    },
+    clearQuery() {
+      this.query = ''
+    },
+  },
+}
+</script>
+
+<template>
+  <aside
+    class="fixed inset-y-0 left-0 z-40 flex h-full shrink-0 flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width,transform] duration-200 ease-out lg:static lg:translate-x-0"
+    :style="sidebarWidthStyle"
+    :class="[
+      mobileOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0',
+    ]"
+  >
+    <div class="flex items-center px-4 py-4" :class="collapsed ? 'justify-center' : 'gap-2.5'">
+      <img
+        :src="
+          collapsed
+            ? 'https://s3.ketekny.gr/public/web-apps/logos/logo-icon-dark.png'
+            : 'https://support.ketekny.gr/logo-dark.png'
+        "
+        alt="Ketekny logo"
+        class="object-contain"
+        :class="collapsed ? 'size-9 shrink-0 rounded-lg' : 'h-10 min-w-0 flex-1'"
+        @click="handleLogoClick"
+      />
+      <button
+        v-if="!collapsed"
+        type="button"
+        class="ml-auto hidden rounded-md p-1.5 text-sidebar-muted hover:bg-sidebar-accent hover:text-sidebar-foreground lg:inline-flex"
+        aria-label="Collapse sidebar"
+        @click="toggleCollapsed"
+      >
+        <PanelLeftClose class="size-4" :stroke-width="2" />
+      </button>
+    </div>
+
+    <div v-if="title && !collapsed" class="px-4 pb-2">
+      <p class="text-xl font-bold text-center text-sidebar-foreground">
+        {{ title }}
+      </p>
+    </div>
+
+    <div v-else-if="title && collapsed" class="px-3 pb-2">
+      <div
+        v-tooltip.right="title"
+        class="flex h-10 w-10 items-center justify-center rounded-md border border-sidebar-border/30 bg-sidebar-accent/30 text-[10px] font-bold tracking-[0.18em] text-sidebar-muted"
+      >
+        {{ collapsedTitle }}
+      </div>
+    </div>
+
+    <div v-if="collapsed" class="justify-center hidden px-3 pb-1 lg:flex">
+      <button
+        type="button"
+        v-tooltip.right="'Ανάπτυξη πλαϊνού μενού'"
+        class="flex h-10 w-10 items-center justify-center rounded-md text-sidebar-muted hover:bg-sidebar-accent hover:text-sidebar-foreground"
+        aria-label="Ανάπτυξη πλαϊνού μενού"
+        @click="toggleCollapsed"
+      >
+        <PanelLeftOpen class="size-4" :stroke-width="2" />
+      </button>
+    </div>
+
+    <div v-if="!collapsed" class="px-3 pb-2">
+      <div class="relative">
+        <Search
+          class="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-sidebar-muted"
+          :stroke-width="2"
+        />
+        <input
+          v-model="query"
+          type="text"
+          placeholder="Αναζήτηση μενού..."
+          aria-label="Αναζήτηση μενού"
+          class="w-full py-2 pl-8 pr-9 text-sm border rounded-md border-sidebar-border/35 bg-sidebar-accent/40 text-sidebar-foreground placeholder:text-sidebar-muted focus:border-white/15 focus:outline-none focus:ring-1 focus:ring-white/10"
+        />
+        <button
+          v-if="query"
+          type="button"
+          class="absolute right-2 top-1/2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-md text-sidebar-muted transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground"
+          aria-label="Καθαρισμός αναζήτησης"
+          @click="clearQuery"
+        >
+          <X class="size-3.5" :stroke-width="2" />
+        </button>
+      </div>
+    </div>
+
+    <nav
+      class="flex-1 px-3 py-2"
+      :class="collapsed ? 'overflow-visible' : 'overflow-y-auto'"
+      aria-label="Main navigation"
+    >
+      <ul class="flex flex-col gap-0.5">
+        <SidebarMenuItem
+          v-for="item in filteredMenu"
+          :key="item.id"
+          :item="item"
+          :level="0"
+          :active-id="activeId"
+          :open-ids="effectiveOpenIds"
+          :collapsed="collapsed"
+          @select="handleMenuSelect"
+          @toggle="toggle"
+        />
+      </ul>
+      <p
+        v-if="!collapsed && filteredMenu.length === 0"
+        class="px-3 py-6 text-sm text-center text-sidebar-muted"
+      >
+        Δεν βρέθηκαν αποτελέσματα.
+      </p>
+    </nav>
+
+    <div class="p-3 mt-auto border-t border-sidebar-border">
+      <div
+        class="flex items-center py-2 rounded-md hover:bg-sidebar-accent"
+        :class="collapsed ? 'justify-center px-0' : 'gap-2.5 px-2'"
+      >
+        <CircleUser class="size-8 shrink-0 text-sidebar-muted" :stroke-width="1.75" />
+        <div v-if="!collapsed" class="flex-1 min-w-0">
+          <p class="text-sm font-medium truncate text-sidebar-foreground">{{ accountDisplayName }}</p>
+          <p class="text-xs truncate text-sidebar-muted">{{ accountEmail }}</p>
+        </div>
+        <button
+          v-if="!collapsed"
+          type="button"
+          class="rounded-md p-1.5 text-sidebar-muted hover:bg-sidebar-accent hover:text-sidebar-foreground"
+          aria-label="Notifications"
+        >
+          <Bell class="size-4" :stroke-width="2" />
+        </button>
+      </div>
+
+      <div
+        class="pt-2 mt-2 border-t border-sidebar-border/70"
+        :class="collapsed ? 'flex flex-col items-center gap-1' : 'space-y-1'"
+      >
+        <button
+          v-for="link in footerLinks"
+          :key="link.id"
+          v-if="collapsed"
+          type="button"
+          v-tooltip.right="link.label"
+          class="flex items-center w-full text-sm transition-colors duration-150 rounded-md"
+          :class="[
+            'justify-center px-0 py-2',
+            activeId === link.id
+              ? 'bg-brand text-brand-foreground font-medium'
+              : link.id === 'sign-out'
+                ? 'text-orange-300 hover:bg-orange-500/10 hover:text-orange-200'
+                : 'text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-foreground',
+          ]"
+          :aria-label="collapsed ? link.label : undefined"
+          @click="handleFooterSelect(link.id)"
+        >
+          <component
+            :is="link.icon"
+            class="size-4 shrink-0"
+            :class="
+              activeId === link.id
+                ? 'text-brand-foreground'
+                : link.id === 'sign-out'
+                  ? 'text-orange-400'
+                  : 'text-sidebar-muted'
+            "
+            :stroke-width="2"
+          />
+        </button>
+        <button
+          v-for="link in footerLinks"
+          :key="`${link.id}-expanded`"
+          v-else
+          type="button"
+          class="flex items-center w-full text-sm transition-colors duration-150 rounded-md"
+          :class="[
+            'gap-2.5 px-2 py-2 text-left',
+            activeId === link.id
+              ? 'bg-brand text-brand-foreground font-medium'
+              : link.id === 'sign-out'
+                ? 'text-orange-300 hover:bg-orange-500/10 hover:text-orange-200'
+                : 'text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-foreground',
+          ]"
+          @click="handleFooterSelect(link.id)"
+        >
+          <component
+            :is="link.icon"
+            class="size-4 shrink-0"
+            :class="
+              activeId === link.id
+                ? 'text-brand-foreground'
+                : link.id === 'sign-out'
+                  ? 'text-orange-400'
+                  : 'text-sidebar-muted'
+            "
+            :stroke-width="2"
+          />
+          <span class="truncate">{{ link.label }}</span>
+        </button>
+      </div>
+
+      <div
+        v-if="!collapsed"
+        class="mt-3 border-t border-sidebar-border/70 px-2 pt-2 text-[11px] leading-snug text-sidebar-foreground/90"
+      >
+        <div class="flex items-center gap-1.5 text-sidebar-foreground">
+          <Building2 class="size-3 shrink-0 text-sidebar-muted" :stroke-width="2" />
+          <p class="font-semibold uppercase tracking-[0.28em]">KETEKNY AE</p>
+        </div>
+        <div class="mt-1.5 pl-[18px]">
+          <p class="truncate ">Βερανζέρου 13, 10677, Αθήνα 
+            <span>&nbsp;</span>
+            <a href="tel:+302103648337" class="transition-colors hover:text-sidebar-foreground">
+              210 3648 337
+            </a></p>
+   
+          <div class="flex flex-wrap items-center gap-x-3">
+            <a
+              :href="`mailto:${contactEmail}`"
+              class="transition-colors hover:text-sidebar-foreground"
+            >
+              {{ contactEmail }}
+            </a>
+            <a
+              :href="helpUrl || 'https://help.ketekny.gr'"
+              target="_blank"
+              rel="noreferrer"
+              class="truncate transition-colors hover:text-sidebar-foreground"
+            >
+              {{ helpUrl || 'https://help.ketekny.gr' }}
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </aside>
+</template>

package/src/twoColLayout/components/SidebarMenuItem.vue

@@ -0,0 +1,217 @@
+<script>
+import { ChevronRight, ExternalLink } from '@lucide/vue'
+import * as icons from '@lucide/vue'
+
+export default {
+  name: 'SidebarMenuItem',
+  components: {
+    ChevronRight,
+    ExternalLink,
+  },
+  props: {
+    item: { type: Object, required: true },
+    level: { type: Number, default: 0 },
+    activeId: { type: String, default: '' },
+    openIds: { type: Object, required: true },
+    collapsed: { type: Boolean, default: false },
+  },
+  emits: ['select', 'toggle'],
+  computed: {
+    hasChildren() {
+      return Array.isArray(this.item.children) && this.item.children.length > 0
+    },
+    isOpen() {
+      return this.openIds.has(this.item.id)
+    },
+    IconComponent() {
+      return this.item.icon ? icons[this.item.icon] : null
+    },
+    isActiveTrail() {
+      return this.hasChildren && this.containsActive(this.item)
+    },
+    isActiveLeaf() {
+      return !this.hasChildren && this.item.id === this.activeId
+    },
+    isActive() {
+      return this.isActiveLeaf || this.isActiveTrail
+    },
+    isCollapsedTop() {
+      return this.collapsed && this.level === 0
+    },
+    isExternalLink() {
+      return !this.hasChildren && Boolean(this.item?.link?.href ?? this.item?.href)
+    },
+    indentStyle() {
+      return {
+        paddingLeft: this.level === 0 ? '0.75rem' : `${this.level * 0.875 + 0.75}rem`,
+      }
+    },
+  },
+  methods: {
+    containsActive(node) {
+      if (node.id === this.activeId) return true
+      if (!node.children) return false
+      return node.children.some((child) => this.containsActive(child))
+    },
+    handleClick() {
+      if (this.hasChildren && !this.isCollapsedTop) {
+        this.$emit('toggle', this.item.id)
+      } else if (!this.hasChildren) {
+        this.$emit('select', this.item)
+      }
+    },
+    onEnter(el) {
+      el.style.height = '0'
+      el.offsetHeight
+      el.style.height = `${el.scrollHeight}px`
+    },
+    onAfterEnter(el) {
+      el.style.height = 'auto'
+    },
+    onLeave(el) {
+      el.style.height = `${el.scrollHeight}px`
+      el.offsetHeight
+      el.style.height = '0'
+    },
+  },
+}
+</script>
+
+<template>
+  <li :class="isCollapsedTop ? 'group/fly relative' : ''">
+    <button
+      type="button"
+      :style="isCollapsedTop ? undefined : indentStyle"
+      class="group relative flex w-full items-center rounded-md text-left text-sm transition-colors duration-150"
+      :class="[
+        isCollapsedTop ? 'h-10 justify-center px-0' : 'gap-2.5 py-2 pr-2',
+        isActiveLeaf || (isCollapsedTop && isActive)
+          ? 'bg-brand text-brand-foreground font-medium'
+          : isActiveTrail
+            ? 'text-sidebar-foreground'
+            : 'text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-foreground',
+      ]"
+      :aria-expanded="hasChildren && !isCollapsedTop ? isOpen : undefined"
+      :aria-label="isCollapsedTop ? item.label : undefined"
+      @click="handleClick"
+    >
+      <span
+        v-if="isActiveLeaf && !isCollapsedTop"
+        class="absolute left-0 top-1/2 h-5 w-1 -translate-y-1/2 rounded-r bg-brand-foreground/80"
+        aria-hidden="true"
+      />
+
+      <component
+        :is="IconComponent"
+        v-if="IconComponent"
+        class="size-4 shrink-0"
+        :class="[
+          isActiveLeaf || (isCollapsedTop && isActive)
+            ? 'text-brand-foreground'
+            : 'text-sidebar-muted group-hover:text-sidebar-foreground',
+        ]"
+        :stroke-width="2"
+      />
+
+      <template v-if="!isCollapsedTop">
+        <span class="flex-1 truncate">{{ item.label }}</span>
+
+        <span
+          v-if="item.badge != null"
+          class="ml-auto rounded-full px-1.5 py-0.5 text-xs font-medium tabular-nums"
+          :class="isActiveLeaf ? 'bg-brand-foreground/20 text-brand-foreground' : 'bg-sidebar-accent text-sidebar-muted'"
+        >
+          {{ item.badge }}
+        </span>
+
+        <ExternalLink
+          v-if="isExternalLink"
+          class="size-3.5 shrink-0"
+          :class="isActiveLeaf ? 'text-brand-foreground' : 'text-sidebar-muted'"
+          :stroke-width="2"
+        />
+
+        <ChevronRight
+          v-if="hasChildren"
+          class="size-4 shrink-0 text-sidebar-muted transition-transform duration-200"
+          :class="isOpen ? 'rotate-90' : ''"
+          :stroke-width="2"
+        />
+      </template>
+
+      <span
+        v-if="isCollapsedTop && hasChildren"
+        class="absolute right-1.5 top-1.5 size-1.5 rounded-full"
+        :class="isActive ? 'bg-brand-foreground/80' : 'bg-sidebar-muted/60'"
+        aria-hidden="true"
+      />
+    </button>
+
+    <Transition
+      v-if="!isCollapsedTop"
+      @enter="onEnter"
+      @after-enter="onAfterEnter"
+      @leave="onLeave"
+    >
+      <ul
+        v-if="hasChildren && isOpen"
+        class="overflow-hidden border-l border-sidebar-border/25 ml-4 pl-2 transition-[height] duration-200 ease-out"
+      >
+          <SidebarMenuItem
+            v-for="child in item.children"
+            :key="child.id"
+            :item="child"
+            :level="level + 1"
+            :active-id="activeId"
+            :open-ids="openIds"
+            @select="$emit('select', $event)"
+            @toggle="$emit('toggle', $event)"
+          />
+      </ul>
+    </Transition>
+
+    <div
+      v-if="isCollapsedTop"
+      class="invisible absolute left-full top-0 z-50 pl-2 opacity-0 transition-opacity duration-150 group-hover/fly:visible group-hover/fly:opacity-100"
+    >
+      <div
+        class="min-w-56 rounded-lg border border-sidebar-border bg-sidebar p-2 shadow-xl shadow-black/40"
+        role="menu"
+        :aria-label="item.label"
+      >
+        <button
+          type="button"
+          class="mb-1 flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm font-semibold"
+          :class="isActive ? 'text-brand' : 'text-sidebar-foreground hover:bg-sidebar-accent'"
+          @click="!hasChildren && $emit('select', item)"
+        >
+          <component
+            :is="IconComponent"
+            v-if="IconComponent"
+            class="size-4 shrink-0"
+            :stroke-width="2"
+          />
+          <span class="truncate">{{ item.label }}</span>
+          <ExternalLink
+            v-if="isExternalLink"
+            class="ml-auto size-3.5 shrink-0 text-sidebar-muted"
+            :stroke-width="2"
+          />
+        </button>
+
+        <ul v-if="hasChildren" class="flex flex-col gap-0.5">
+          <SidebarMenuItem
+            v-for="child in item.children"
+            :key="child.id"
+            :item="child"
+            :level="0"
+            :active-id="activeId"
+            :open-ids="openIds"
+            @select="$emit('select', $event)"
+            @toggle="$emit('toggle', $event)"
+          />
+        </ul>
+      </div>
+    </div>
+  </li>
+</template>

package/src/twoColLayout/components/TwoColLayout.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="flex h-screen bg-canvas text-canvas-foreground">
+    <div v-if="mobileMenuOpen" class="fixed inset-0 z-30 bg-slate-950/50 backdrop-blur-[1px] lg:hidden" @click="closeMenu" />
+
+    <MultilevelSidebar
+      :title="title"
+      :width="width"
+      :collapsed-width="collapsedWidth"
+      :main-menu="mainMenu"
+      :mobile-open="mobileMenuOpen"
+      :account="account"
+      :contact-email="contactEmail"
+      :help-url="helpUrl"
+      @logo-click="handleLogoClick"
+      @signin="handleSignin"
+      @signup="handleSignup"
+      @signout="handleSignout"
+      @edit-profile="handleEditProfile"
+      @item-click="handleItemClick"
+      @select="handleSelect"
+    />
+
+    <main class="flex flex-col flex-1 overflow-y-auto">
+      <slot />
+    </main>
+
+    <button
+      v-if="showBurger && !mobileMenuOpen"
+      type="button"
+      class="fixed z-50 inline-flex items-center justify-center text-white transition-colors rounded-full shadow-lg bottom-5 left-5 size-14 bg-sidebar shadow-black/25 hover:bg-sidebar-accent lg:hidden"
+      aria-label="Open menu"
+      @click="toggleMenu">
+      <Menu class="size-6" :stroke-width="2.25" />
+    </button>
+  </div>
+</template>
+
+<script>
+import { Menu } from "@lucide/vue";
+import MultilevelSidebar from "./MultilevelSidebar.vue";
+
+export default {
+  name: "TwoColLayout",
+  components: {
+    Menu,
+    MultilevelSidebar,
+  },
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    width: {
+      type: String,
+      default: "360px",
+    },
+    collapsedWidth: {
+      type: String,
+      default: "76px",
+    },
+    mainMenu: {
+      type: Array,
+      default: () => [],
+    },
+    account: {
+      type: Object,
+      default: null,
+    },
+    contactEmail: {
+      type: String,
+      default: "grammateia@ketekny.gr",
+    },
+    helpUrl: {
+      type: String,
+      default: "https://help.ketekny.gr",
+    },
+    showBurger: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ["select-menu", "logo-click", "signin", "signup", "signout", "edit-profile", "item-click"],
+  data() {
+    return {
+      mobileMenuOpen: false,
+    };
+  },
+  methods: {
+    toggleMenu() {
+      this.mobileMenuOpen = !this.mobileMenuOpen;
+    },
+    closeMenu() {
+      this.mobileMenuOpen = false;
+    },
+    handleSelect(id) {
+      this.closeMenu();
+      this.$emit("select-menu", id);
+    },
+    handleLogoClick() {
+      this.closeMenu();
+      this.$emit("logo-click");
+    },
+    handleSignin() {
+      this.closeMenu();
+      this.$emit("signin");
+    },
+    handleSignup() {
+      this.closeMenu();
+      this.$emit("signup");
+    },
+    handleSignout() {
+      this.closeMenu();
+      this.$emit("signout");
+    },
+    handleEditProfile() {
+      this.closeMenu();
+      this.$emit("edit-profile");
+    },
+    handleItemClick(item) {
+      this.closeMenu();
+      this.$emit("item-click", item);
+    },
+  },
+};
+</script>

package/tailwind.config.js

@@ -6,6 +6,10 @@ export default {
     "./src/**/*.{vue,js,ts,jsx,tsx}",
     "./preview/**/*.{vue,js,ts}",
   ],
+  fontFamily: {
+    sans: ['Ubuntu', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+    mono: ['Geist Mono', 'ui-monospace', 'monospace'],
+  },
   safelist: [
     // Runtime-generated semantic classes used by alert/message/toast components.
     { pattern: /(bg|text|border)-semantic-(success|warning|error|info)-(bg|border|text|disabled|button)/ },
@@ -18,7 +22,28 @@ export default {
   ],
   theme: {
     extend: {
+
       colors: {
+        sidebar: {
+          DEFAULT: 'hsl(222 18% 11%)',
+          foreground: 'hsl(220 14% 80%)',
+          muted: 'hsl(220 10% 55%)',
+          accent: 'hsl(222 16% 17%)',
+          border: 'hsl(220 14% 100% / 0.06)',
+        },
+        brand: {
+          DEFAULT: 'hsl(2 78% 55%)',
+          foreground: 'hsl(0 0% 100%)',
+        },
+        canvas: {
+          DEFAULT: 'hsl(220 20% 97%)',
+          foreground: 'hsl(222 30% 12%)',
+          muted: 'hsl(220 10% 45%)',
+          card: 'hsl(0 0% 100%)',
+          border: 'hsl(220 14% 90%)',
+        },
+
+
         default: "#1B2A33",
         header: "#256D96",
         background: "#FEFCF6",