ketekny-ui-kit 1.0.90 → 1.0.92

package/README.md

@@ -46,6 +46,7 @@ import {
   kDateSelector,
   kToggle,
   kCheckbox,
+  twoColLayout,
   toastPlugin,
   confirmPlugin,
   alertPlugin,
@@ -61,6 +62,7 @@ app.component("kSelect", kSelect);
 app.component("kDateSelector", kDateSelector);
 app.component("kToggle", kToggle);
 app.component("kCheckbox", kCheckbox);
+app.component("twoColLayout", twoColLayout);
 
 app.use(toastPlugin);
 app.use(confirmPlugin);
@@ -92,6 +94,44 @@ function save() {
 </script>
 ```
 
+Two-column layout usage:
+
+```vue
+<template>
+  <twoColLayout
+    title="App title"
+    :main-menu="menu"
+    :account="account"
+    @select-menu="handleSelect"
+  >
+    <kSingleColPage app-title="Demo" page-title="Dashboard">
+      <div class="p-6">Page content</div>
+    </kSingleColPage>
+  </twoColLayout>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { kSingleColPage } from "ketekny-ui-kit";
+
+const account = ref({
+  loggedIn: true,
+  firstName: "Demo",
+  lastName: "User",
+  email: "demo@ketekny.gr",
+});
+
+const menu = [
+  { id: "dashboard", label: "Dashboard", icon: "LayoutDashboard" },
+  { id: "reports", label: "Reports", icon: "BarChart3" },
+];
+
+function handleSelect(id) {
+  console.log("Selected menu item:", id);
+}
+</script>
+```
+
 ## Tailwind Setup
 
 Use the provided preset to include semantic tokens and safelist patterns used by dynamic component classes.
@@ -165,6 +205,7 @@ Components:
 - `kSelectButton`, `kTags`, `kSearch`, `kArrayList`, `kList`, `kTextArea`
 - `kDialog`, `kDrawer`
 - `kAppHeader`, `kAppFooter`, `kAppMain`, `kHero`
+- `kSingleColPage`, `kTwoColPage`, `twoColLayout`, `legacyTwoColLayout`
 
 Other exports:
 
@@ -202,4 +243,3 @@ ISC
 - Live demo/docs: https://ui.ketekny.gr
 - npm: https://www.npmjs.com/package/ketekny-ui-kit
 
-

package/index.js

@@ -38,7 +38,8 @@ import kAppMain from './src/layout/kAppMain.vue'
 import kHero from './src/layout/kHero.vue'
 import kSingleColPage from './src/layout/kSingleColPage.vue'
 import kTwoColPage from './src/layout/kTwoColPage.vue'
-import twoColLayout from './src/layout/twoColLayout.vue'
+import twoColLayout from './src/twoColLayout/components/TwoColLayout.vue'
+import legacyTwoColLayout from './src/layout/twoColLayout.vue'
 
 // Toast/Confirm/Alert Plugins
 import toastPlugin from './src/plugins/toastPlugin.js'
@@ -62,7 +63,7 @@ export {
   kDialog, kDrawer,
 
   // Layout Components
-  kAppHeader, kAppFooter, kAppMain, kHero, kSingleColPage, kTwoColPage, twoColLayout,
+  kAppHeader, kAppFooter, kAppMain, kHero, kSingleColPage, kTwoColPage, twoColLayout, legacyTwoColLayout,
 
   // Plugins
   toastPlugin, confirmPlugin, alertPlugin, tooltipPlugin, inputDialogPlugin,

package/package.json

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

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",