ketekny-ui-kit 1.0.103 → 1.0.105

package/package.json

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

package/src/layout/kSingleColPage.vue

@@ -1,6 +1,19 @@
 <template>
   <main class="flex min-h-screen w-full max-w-none flex-col bg-slate-100">
-    <section class="bg-white px-4 pb-4 pb-0 pt-8 sm:px-6 lg:px-8">
+    <div
+      v-if="showHeaderExtraBeforeTitle"
+      class="sticky z-30 border-b border-t border-slate-200 bg-slate-50 px-4 backdrop-blur sm:px-6 lg:px-8"
+      :style="{ top: headerExtraTop }"
+    >
+      <div class="mx-auto flex w-full max-w-none items-center">
+        <slot name="header-extra" />
+      </div>
+    </div>
+
+    <section
+      v-if="hasTopSection"
+      class="bg-white px-4 pb-4 pb-0 pt-8 sm:px-6 lg:px-8"
+    >
       <div class="mx-auto flex w-full max-w-none flex-col gap-5">
         <div
           v-if="pageTitle || pageDescription"
@@ -31,7 +44,11 @@
       </div>
     </section>
 
-    <div class="sticky top-0 z-30 border-b border-t border-slate-200 bg-slate-50 px-4 backdrop-blur sm:px-6 lg:px-8">
+    <div
+      v-if="showHeaderExtraAfterTitle"
+      class="sticky z-30 border-b border-t border-slate-200 bg-slate-50 px-4 backdrop-blur sm:px-6 lg:px-8"
+      :style="{ top: headerExtraTop }"
+    >
       <div class="mx-auto flex w-full max-w-none items-center">
         <slot name="header-extra" />
       </div>
@@ -69,8 +86,30 @@ export default {
       type: String,
       default: '',
     },
+    headerExtraTop: {
+      type: String,
+      default: '0px',
+    },
+    headerExtraBeforeTitle: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
+    hasTopSection() {
+      return Boolean(
+        this.pageTitle ||
+        this.pageDescription ||
+        this.externalUrl ||
+        this.$slots['header-actions']
+      )
+    },
+    showHeaderExtraBeforeTitle() {
+      return this.headerExtraBeforeTitle && Boolean(this.$slots['header-extra'])
+    },
+    showHeaderExtraAfterTitle() {
+      return !this.headerExtraBeforeTitle && Boolean(this.$slots['header-extra'])
+    },
     externalUrlLabel() {
       const target = String(this.externalUrl || '').trim()
       if (!target) return ''

package/src/layout/kTwoColPage.vue

@@ -1,6 +1,9 @@
 <template>
   <main class="flex h-screen w-full max-w-none flex-col overflow-hidden bg-slate-100">
-    <section class="shrink-0 bg-white px-4 pb-4 pb-0 pt-8 sm:px-6 lg:px-8">
+    <section
+      v-if="hasTopSection"
+      class="shrink-0 bg-white px-4 pb-4 pb-0 pt-8 sm:px-6 lg:px-8"
+    >
       <div class="mx-auto flex w-full max-w-none flex-col gap-5">
         <div
           v-if="pageTitle || pageDescription"
@@ -31,7 +34,10 @@
       </div>
     </section>
 
-    <div class="shrink-0 border-b border-t border-slate-200 bg-slate-50 px-4 backdrop-blur">
+    <div
+      v-if="$slots['header-extra']"
+      class="shrink-0 border-b border-t border-slate-200 bg-slate-50 px-4 backdrop-blur"
+    >
       <div class="mx-auto flex w-full max-w-none items-center">
         <slot name="header-extra" />
       </div>
@@ -80,6 +86,14 @@ export default {
     },
   },
   computed: {
+    hasTopSection() {
+      return Boolean(
+        this.pageTitle ||
+        this.pageDescription ||
+        this.externalUrl ||
+        this.$slots['header-actions']
+      )
+    },
     externalUrlLabel() {
       const target = String(this.externalUrl || '').trim()
       if (!target) return ''

package/src/twoColLayout/components/MultilevelSidebar.vue

@@ -17,6 +17,7 @@ import demoAvatarUrl from '../assets/placeholder-user.jpg'
 
 const FAVORITES_STORAGE_KEY = 'ketekny-ui-sidebar-favorites'
 const MENU_TAB_STORAGE_KEY = 'ketekny-ui-sidebar-menu-tab'
+const LOGO_BASE_URL = 'https://s3.ketekny.gr/public/web-apps/logos'
 
 export default {
   name: 'MultilevelSidebar',
@@ -71,6 +72,11 @@ export default {
       type: Boolean,
       default: false,
     },
+    theme: {
+      type: String,
+      default: 'dark',
+      validator: value => ['dark', 'light'].includes(value),
+    },
   },
   emits: ['select', 'logo-click', 'signin', 'signup', 'signout', 'edit-profile', 'item-click'],
   data() {
@@ -95,6 +101,17 @@ export default {
         width: this.collapsed ? this.collapsedWidth : this.width,
       }
     },
+    themeClass() {
+      return this.theme === 'light' ? 'sidebar-theme-light' : 'sidebar-theme-dark'
+    },
+    activeExpandedLogoSrc() {
+      if (this.theme === 'light') return `${LOGO_BASE_URL}/logo-light.png`
+      return `${LOGO_BASE_URL}/logo-dark.png`
+    },
+    activeCollapsedLogoSrc() {
+      if (this.theme === 'light') return `${LOGO_BASE_URL}/logo_icon.jpg`
+      return `${LOGO_BASE_URL}/logo-icon-dark.png`
+    },
     collapsedTitle() {
       if (!this.title) return ''
       const words = this.title.trim().split(/\s+/).filter(Boolean)
@@ -395,16 +412,17 @@ export default {
 
 <template>
   <aside
-    class="group/sidebar 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"
+    class="group/sidebar fixed inset-y-0 left-0 z-40 flex h-full shrink-0 flex-col border-r border-[var(--sidebar-border)] bg-[var(--sidebar-bg)] text-[var(--sidebar-text)] transition-[width,transform] duration-200 ease-out lg:static lg:translate-x-0"
     :style="sidebarWidthStyle"
     :class="[
+      themeClass,
       mobileOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0',
     ]"
   >
     <button
       type="button"
       v-tooltip.right="collapsed ? 'Ανάπτυξη πλαϊνού μενού' : 'Σύμπτυξη πλαϊνού μενού'"
-      class="absolute right-0 top-1/2 z-50 hidden h-14 w-6 -translate-y-1/2 translate-x-1/2 items-center justify-center rounded-r-md border border-sidebar-border bg-sidebar-accent text-sidebar-muted opacity-70 shadow-lg shadow-black/30 transition-[color,opacity] hover:opacity-100 hover:text-sidebar-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand lg:inline-flex"
+      class="absolute right-0 top-1/2 z-50 hidden h-14 w-6 -translate-y-1/2 translate-x-1/2 items-center justify-center rounded-r-md border border-[var(--sidebar-border)] bg-[var(--sidebar-surface)] text-[var(--sidebar-text-muted)] opacity-85 shadow-lg shadow-[var(--sidebar-shadow)] transition-[color,opacity,background-color] hover:bg-[var(--sidebar-hover)] hover:opacity-100 hover:text-[var(--sidebar-text)] focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand lg:inline-flex"
       :aria-label="collapsed ? 'Ανάπτυξη πλαϊνού μενού' : 'Σύμπτυξη πλαϊνού μενού'"
       @click="toggleCollapsed"
     >
@@ -415,14 +433,14 @@ export default {
     <div class="relative flex items-center px-4 py-4" :class="collapsed ? 'justify-center' : 'gap-2.5'">
       <img
         v-if="collapsed"
-        src="https://s3.ketekny.gr/public/web-apps/logos/logo-icon-dark.png"
+        :src="activeCollapsedLogoSrc"
         alt="Ketekny logo"
         class="size-9 shrink-0 rounded-lg object-contain cursor-pointer"
         @click="handleLogoClick"
       />
       <img
         v-else
-        src="https://support.ketekny.gr/logo-dark.png"
+        :src="activeExpandedLogoSrc"
         alt="Ketekny logo"
         class="min-w-0 flex-1 object-contain cursor-pointer"
         @click="handleLogoClick"
@@ -430,7 +448,7 @@ export default {
     </div>
 
     <div v-if="title && !collapsed" class="px-4 pb-2">
-      <p class="text-xl font-bold text-center text-sidebar-foreground">
+      <p class="text-xl font-bold text-center text-[var(--sidebar-text)]">
         {{ title }}
       </p>
     </div>
@@ -438,7 +456,7 @@ export default {
     <div v-else-if="(title || appIcon) && collapsed" class="flex justify-center 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"
+        class="flex h-10 w-10 items-center justify-center rounded-md border border-[var(--sidebar-border)] bg-[var(--sidebar-surface-muted)] text-[10px] font-bold tracking-[0.18em] text-[var(--sidebar-text-muted)]"
       >
         <img
           v-if="appIcon"
@@ -452,19 +470,23 @@ export default {
       </div>
     </div>
 
+    <div v-if="$slots['sidebar-header']" :class="collapsed ? 'px-2 pb-2' : 'px-4 pb-3'">
+      <slot name="sidebar-header" />
+    </div>
+
     <nav
       class="flex-1 px-3 py-2"
       :class="collapsed ? 'overflow-visible' : 'overflow-y-auto'"
       aria-label="Main navigation"
     >
       <div v-if="showMenuTabs" class="mb-3 px-1">
-        <div class="inline-flex w-full rounded-lg bg-sidebar-accent/35 p-1">
+        <div class="inline-flex w-full rounded-lg bg-[var(--sidebar-surface-muted)] p-1">
           <button
             type="button"
             class="flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors"
             :class="activeMenuTab === 'all'
-              ? 'bg-sidebar text-sidebar-foreground shadow-sm'
-              : 'text-sidebar-muted hover:text-sidebar-foreground'"
+              ? 'bg-[var(--sidebar-surface)] text-[var(--sidebar-text)] shadow-sm'
+              : 'text-[var(--sidebar-text-muted)] hover:text-[var(--sidebar-text)]'"
             @click="activeMenuTab = 'all'"
           >
             Όλα
@@ -473,8 +495,8 @@ export default {
             type="button"
             class="flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors"
             :class="activeMenuTab === 'favorites'
-              ? 'bg-sidebar text-sidebar-foreground shadow-sm'
-              : 'text-sidebar-muted hover:text-sidebar-foreground'"
+              ? 'bg-[var(--sidebar-surface)] text-[var(--sidebar-text)] shadow-sm'
+              : 'text-[var(--sidebar-text-muted)] hover:text-[var(--sidebar-text)]'"
             @click="activeMenuTab = 'favorites'"
           >
             Αγαπημένα
@@ -485,7 +507,7 @@ export default {
       <div v-if="!collapsed && (!showMenuTabs || activeMenuTab === 'all')" class="px-1 pb-3">
         <div class="relative">
           <Search
-            class="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-sidebar-muted"
+            class="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--sidebar-text-muted)]"
             :stroke-width="2"
           />
           <input
@@ -493,12 +515,12 @@ export default {
             type="text"
             placeholder="Αναζήτηση μενού..."
             aria-label="Αναζήτηση μενού"
-            class="w-full border rounded-md border-sidebar-border/35 bg-sidebar-accent/40 py-2 pl-8 pr-9 text-sidebar-foreground placeholder:text-sidebar-muted focus:border-white/15 focus:outline-none focus:ring-1 focus:ring-white/10"
+            class="w-full rounded-md border border-[var(--sidebar-border)] bg-[var(--sidebar-surface)] py-2 pl-8 pr-9 text-[var(--sidebar-text)] placeholder:text-[var(--sidebar-text-muted)] focus:border-[var(--sidebar-border-strong)] focus:outline-none focus:ring-1 focus:ring-[var(--sidebar-border-strong)]"
           />
           <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"
+            class="absolute right-2 top-1/2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-md text-[var(--sidebar-text-muted)] transition-colors hover:bg-[var(--sidebar-hover)] hover:text-[var(--sidebar-text)]"
             aria-label="Καθαρισμός αναζήτησης"
             @click="clearQuery"
           >
@@ -517,6 +539,7 @@ export default {
           :open-ids="effectiveOpenIds"
           :collapsed="collapsed"
           :favorites="favoriteIds"
+          :theme="theme"
           @select="handleMenuSelect"
           @toggle="toggle"
           @toggle-favorite="toggleFavorite"
@@ -524,13 +547,13 @@ export default {
       </ul>
       <p
         v-if="!collapsed && displayedMenuItems.length === 0"
-        class="px-3 py-6 text-center text-sidebar-muted"
+        class="px-3 py-6 text-center text-[var(--sidebar-text-muted)]"
       >
         Δεν βρέθηκαν αποτελέσματα.
       </p>
     </nav>
 
-    <div class="mt-auto border-t border-sidebar-border px-3 pb-3 pt-4">
+    <div class="mt-auto border-t border-[var(--sidebar-border)] px-3 pb-3 pt-4">
       <div
         :class="collapsed
           ? 'flex flex-col items-center gap-1'
@@ -548,8 +571,8 @@ export default {
               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',
+                  ? 'text-[var(--sidebar-danger)] hover:bg-[var(--sidebar-danger-bg)] hover:text-[var(--sidebar-danger-hover)]'
+                  : 'text-[var(--sidebar-text-soft)] hover:bg-[var(--sidebar-hover)] hover:text-[var(--sidebar-text)]',
             ]"
             :aria-label="link.label"
             @click="handleFooterSelect(link.id)"
@@ -561,8 +584,8 @@ export default {
                 activeId === link.id
                   ? 'text-brand-foreground'
                   : link.id === 'sign-out'
-                    ? 'text-orange-400'
-                    : 'text-sidebar-muted'
+                    ? 'text-[var(--sidebar-danger)]'
+                    : 'text-[var(--sidebar-text-muted)]'
               "
               :stroke-width="2"
             />
@@ -575,7 +598,7 @@ export default {
             aria-label="Account options"
           >
             <template #trigger>
-              <div class="flex w-full items-center gap-2 rounded-lg px-1 py-1 text-sidebar-foreground/90 transition-colors duration-150">
+              <div class="flex w-full items-center gap-2 rounded-lg px-1 py-1 text-[var(--sidebar-text-strong)] transition-colors duration-150">
                 <div class="sidebar-footer-item flex min-h-[44px] flex-1 items-center gap-2.5 rounded-lg bg-transparent px-1.5 py-1.5 text-left font-medium">
                   <img
                     :src="demoAvatarUrl"
@@ -584,12 +607,12 @@ export default {
                   />
                   <span class="min-w-0 flex-1">
                     <span class="block truncate text-sm font-semibold">{{ accountDisplayName || 'Το προφίλ μου' }}</span>
-                    <span class="block truncate text-xs font-normal text-sidebar-muted">{{ accountEmail }}</span>
+                    <span class="block truncate text-xs font-normal text-[var(--sidebar-text-muted)]">{{ accountEmail }}</span>
                   </span>
                 </div>
 
                 <span
-                  class="inline-flex size-9 items-center justify-center rounded-lg text-sidebar-muted"
+                  class="inline-flex size-9 items-center justify-center rounded-lg text-[var(--sidebar-text-muted)]"
                   aria-hidden="true"
                 >
                   <Ellipsis class="size-4" :stroke-width="2" />
@@ -602,23 +625,23 @@ export default {
 
       <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"
+        class="mt-3 border-t border-[var(--sidebar-border)] px-2 pt-2 text-[11px] leading-snug text-[var(--sidebar-text-strong)]"
       >
-        <div class="flex items-center gap-1.5 text-sidebar-foreground">
-          <Building2 class="size-3 shrink-0 text-sidebar-muted" :stroke-width="2" />
+        <div class="flex items-center gap-1.5 text-[var(--sidebar-text)]">
+          <Building2 class="size-3 shrink-0 text-[var(--sidebar-text-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">
+            <a href="tel:+302103648337" class="transition-colors hover:text-[var(--sidebar-text)]">
               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"
+              class="transition-colors hover:text-[var(--sidebar-text)]"
             >
               {{ contactEmail }}
             </a>
@@ -626,7 +649,7 @@ export default {
               :href="helpUrl || 'https://help.ketekny.gr'"
               target="_blank"
               rel="noreferrer"
-              class="truncate transition-colors hover:text-sidebar-foreground"
+              class="truncate transition-colors hover:text-[var(--sidebar-text)]"
             >
               {{ helpUrl || 'https://help.ketekny.gr' }}
             </a>
@@ -636,3 +659,39 @@ export default {
     </div>
   </aside>
 </template>
+
+<style scoped>
+.sidebar-theme-dark {
+  --sidebar-bg: #0b0c0f;
+  --sidebar-surface: #161a22;
+  --sidebar-surface-muted: rgba(255, 255, 255, 0.06);
+  --sidebar-text: #eef2f7;
+  --sidebar-text-soft: rgba(238, 242, 247, 0.8);
+  --sidebar-text-strong: rgba(238, 242, 247, 0.9);
+  --sidebar-text-muted: #8a92a1;
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+  --sidebar-border-strong: rgba(255, 255, 255, 0.16);
+  --sidebar-hover: rgba(255, 255, 255, 0.08);
+  --sidebar-shadow: rgba(0, 0, 0, 0.3);
+  --sidebar-danger: #f59e0b;
+  --sidebar-danger-hover: #fbbf24;
+  --sidebar-danger-bg: rgba(245, 158, 11, 0.12);
+}
+
+.sidebar-theme-light {
+  --sidebar-bg: #f8fafc;
+  --sidebar-surface: #ffffff;
+  --sidebar-surface-muted: #eef4fb;
+  --sidebar-text: #0f172a;
+  --sidebar-text-soft: rgba(15, 23, 42, 0.8);
+  --sidebar-text-strong: rgba(15, 23, 42, 0.9);
+  --sidebar-text-muted: #64748b;
+  --sidebar-border: rgba(148, 163, 184, 0.28);
+  --sidebar-border-strong: rgba(100, 116, 139, 0.4);
+  --sidebar-hover: #e2e8f0;
+  --sidebar-shadow: rgba(15, 23, 42, 0.12);
+  --sidebar-danger: #ea580c;
+  --sidebar-danger-hover: #c2410c;
+  --sidebar-danger-bg: #ffedd5;
+}
+</style>

package/src/twoColLayout/components/SidebarMenuItem.vue

@@ -16,6 +16,7 @@ export default {
     openIds: { type: Object, required: true },
     collapsed: { type: Boolean, default: false },
     favorites: { type: Object, default: null },
+    theme: { type: String, default: 'dark' },
   },
   emits: ['select', 'toggle', 'toggle-favorite'],
   computed: {
@@ -100,8 +101,8 @@ export default {
         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',
+            ? 'text-[var(--sidebar-text)]'
+            : 'text-[var(--sidebar-text-soft)] hover:bg-[var(--sidebar-hover)] hover:text-[var(--sidebar-text)]',
       ]"
       :aria-expanded="hasChildren && !isCollapsedTop ? isOpen : undefined"
       :aria-label="isCollapsedTop ? item.label : undefined"
@@ -120,7 +121,7 @@ export default {
         :class="[
           isActiveLeaf || (isCollapsedTop && isActive)
             ? 'text-brand-foreground'
-            : 'text-sidebar-muted group-hover:text-sidebar-foreground',
+            : 'text-[var(--sidebar-text-muted)] group-hover:text-[var(--sidebar-text)]',
         ]"
         :stroke-width="2"
       />
@@ -131,7 +132,7 @@ export default {
         <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'"
+          :class="isActiveLeaf ? 'bg-brand-foreground/20 text-brand-foreground' : 'bg-[var(--sidebar-surface-muted)] text-[var(--sidebar-text-muted)]'"
         >
           {{ item.badge }}
         </span>
@@ -139,14 +140,14 @@ export default {
         <ExternalLink
           v-if="isExternalLink"
           class="size-3.5 shrink-0"
-          :class="isActiveLeaf ? 'text-brand-foreground' : 'text-sidebar-muted'"
+          :class="isActiveLeaf ? 'text-brand-foreground' : 'text-[var(--sidebar-text-muted)]'"
           :stroke-width="2"
         />
 
         <button
           v-if="!hasChildren"
           type="button"
-          class="inline-flex size-7 shrink-0 items-center justify-center rounded-md text-sidebar-muted opacity-0 transition-all duration-150 group-hover:opacity-100 hover:bg-sidebar-accent hover:text-sidebar-foreground focus-visible:opacity-100 focus-visible:outline-none"
+          class="inline-flex size-7 shrink-0 items-center justify-center rounded-md text-[var(--sidebar-text-muted)] opacity-0 transition-all duration-150 group-hover:opacity-100 hover:bg-[var(--sidebar-hover)] hover:text-[var(--sidebar-text)] focus-visible:opacity-100 focus-visible:outline-none"
           :class="isFavorite ? 'opacity-100 text-amber-400 hover:text-amber-300' : ''"
           :aria-label="isFavorite ? 'Remove from favorites' : 'Add to favorites'"
           @click="toggleFavorite"
@@ -160,7 +161,7 @@ export default {
 
         <ChevronRight
           v-if="hasChildren"
-          class="size-4 shrink-0 text-sidebar-muted transition-transform duration-200"
+          class="size-4 shrink-0 text-[var(--sidebar-text-muted)] transition-transform duration-200"
           :class="isOpen ? 'rotate-90' : ''"
           :stroke-width="2"
         />
@@ -169,7 +170,7 @@ export default {
       <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'"
+        :class="isActive ? 'bg-brand-foreground/80' : 'bg-[var(--sidebar-text-muted)]/60'"
         aria-hidden="true"
       />
     </button>
@@ -182,7 +183,7 @@ export default {
     >
       <ul
         v-if="hasChildren && isOpen"
-        class="overflow-hidden border-l border-sidebar-border/25 ml-4 pl-2 transition-[height] duration-200 ease-out"
+        class="overflow-hidden border-l border-[var(--sidebar-border)] ml-4 pl-2 transition-[height] duration-200 ease-out"
       >
           <SidebarMenuItem
             v-for="child in item.children"
@@ -193,6 +194,7 @@ export default {
             :open-ids="openIds"
             :collapsed="collapsed"
             :favorites="favorites"
+            :theme="theme"
             @select="$emit('select', $event)"
             @toggle="$emit('toggle', $event)"
             @toggle-favorite="$emit('toggle-favorite', $event)"
@@ -205,14 +207,14 @@ export default {
       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"
+        class="min-w-56 rounded-lg border border-[var(--sidebar-border)] bg-[var(--sidebar-surface)] p-2 shadow-xl shadow-[var(--sidebar-shadow)]"
         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 font-semibold"
-          :class="isActive ? 'text-brand' : 'text-sidebar-foreground hover:bg-sidebar-accent'"
+          :class="isActive ? 'text-brand' : 'text-[var(--sidebar-text)] hover:bg-[var(--sidebar-hover)]'"
           @click="!hasChildren && $emit('select', item)"
         >
           <component
@@ -224,7 +226,7 @@ export default {
           <span class="truncate">{{ item.label }}</span>
           <ExternalLink
             v-if="isExternalLink"
-            class="ml-auto size-3.5 shrink-0 text-sidebar-muted"
+            class="ml-auto size-3.5 shrink-0 text-[var(--sidebar-text-muted)]"
             :stroke-width="2"
           />
         </button>
@@ -239,6 +241,7 @@ export default {
             :open-ids="openIds"
             :collapsed="false"
             :favorites="favorites"
+            :theme="theme"
             @select="$emit('select', $event)"
             @toggle="$emit('toggle', $event)"
             @toggle-favorite="$emit('toggle-favorite', $event)"

package/src/twoColLayout/components/TwoColLayout.vue

@@ -3,6 +3,7 @@
     <div v-if="mobileMenuOpen" class="fixed inset-0 z-30 bg-slate-950/50 backdrop-blur-[1px] lg:hidden" @click="closeMenu" />
 
     <MultilevelSidebar
+      :theme="theme"
       :title="title"
       :app-icon="appIcon"
       :width="width"
@@ -19,16 +20,29 @@
       @edit-profile="handleEditProfile"
       @item-click="handleItemClick"
       @select="handleSelect"
-    />
+    >
+      <template v-if="$slots['sidebar-header']" #sidebar-header>
+        <slot name="sidebar-header" />
+      </template>
+    </MultilevelSidebar>
 
-    <main class="flex flex-col flex-1 overflow-y-auto">
+    <main class="flex min-h-0 flex-1 flex-col overflow-y-auto">
+      <div
+        v-if="$slots.header"
+        class="sticky top-0 z-20 shrink-0"
+      >
+        <slot name="header" />
+      </div>
       <slot />
     </main>
 
     <button
-      v-if="showBurger && !mobileMenuOpen"
+      v-if="!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"
+      class="fixed bottom-5 left-5 z-50 inline-flex size-14 items-center justify-center rounded-full transition-colors lg:hidden"
+      :class="theme === 'light'
+        ? 'border border-slate-200 bg-white text-slate-700 shadow-lg shadow-slate-900/10 hover:bg-slate-100'
+        : 'bg-sidebar text-white shadow-lg shadow-black/25 hover:bg-sidebar-accent'"
       aria-label="Open menu"
       @click="toggleMenu">
       <Menu class="size-6" :stroke-width="2.25" />
@@ -79,9 +93,10 @@ export default {
       type: String,
       default: "https://help.ketekny.gr",
     },
-    showBurger: {
-      type: Boolean,
-      default: true,
+    theme: {
+      type: String,
+      default: "dark",
+      validator: value => ["dark", "light"].includes(value),
     },
   },
   emits: ["select-menu", "logo-click", "signin", "signup", "signout", "edit-profile", "item-click"],