ketekny-ui-kit 1.0.65 → 1.0.67

package/package.json

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

package/src/layout/twoColLayout.vue

@@ -25,22 +25,37 @@
     >
       <div class="relative border-b border-white/10">
         <button
-          v-if="logoSrc || title"
+          v-if="logoSrc"
           type="button"
           class="block w-full text-left"
           v-tooltip.right.html="isSidebarCollapsed ? collapsedContactTooltip : logoAlt"
           @click="$emit('logo-click')"
         >
           <img
-            v-if="logoSrc"
             :alt="logoAlt"
             :src="isSidebarCollapsed ? collapsedLogoSrc : logoSrc"
             class="cursor-pointer px-4 py-4 transition-all duration-300"
           />
-          <div v-if="title && !isSidebarCollapsed" class="py-3 mt-3 text-lg text-center bg-white/10">
-            {{ title }}
-          </div>
         </button>
+        <div v-if="title && !isSidebarCollapsed" class="py-3 mt-3 text-lg text-center bg-[#da0000]">
+          {{ title }}
+        </div>
+        <div v-if="showSponsors && !isSidebarCollapsed" class="flex flex-col gap-3 px-4 py-4 bg-[#0f4e8d]">
+          <div>
+            <img
+              src="https://s3.ketekny.gr/public/web-apps/sponsors/Greece 2.0_NextGeneration_White_gr.png"
+              alt="Tameio Anakampsis"
+              class="mx-auto max-h-16 w-auto object-contain"
+            />
+          </div>
+          <div>
+            <img
+              src="https://s3.ketekny.gr/public/web-apps/sponsors/yp_ygeias_dark.png"
+              alt="Ypourgeio Ygeias"
+              class="mx-auto max-h-16 w-auto object-contain"
+            />
+          </div>
+        </div>
 
         <slot name="sidebar-header" />
 
@@ -126,8 +141,8 @@
             <p v-if="account.loggedIn" class="mt-2 truncate text-lg font-semibold text-white">
               {{ accountDisplayName }}
             </p>
-            <p v-if="account.loggedIn && account.email" class="truncate text-sm text-slate-300">
-              {{ account.email }}
+            <p v-if="account.loggedIn && displayEmail" class="truncate text-sm text-slate-300">
+              {{ displayEmail }}
             </p>
           </div>
           <div class="flex flex-wrap gap-2">
@@ -176,8 +191,8 @@
             <span class="whitespace-nowrap">Βερανζέρου 13, 10677, Αθήνα</span>
             <span class="whitespace-nowrap">210 3648 337</span>
             <span class="whitespace-nowrap">
-              <a href="mailto:grammateia@ketekny.gr" class="whitespace-nowrap hover:underline">
-                grammateia@ketekny.gr
+              <a :href="`mailto:${contactEmail}`" class="whitespace-nowrap hover:underline">
+                {{ contactEmail }}
               </a>
             </span>
             <a
@@ -203,6 +218,7 @@
 </template>
 
 <script>
+import { h } from 'vue'
 import kButton from '../ui/kButton.vue'
 import kIcon from '../ui/kIcon.vue'
 import { RouterLink } from 'vue-router'
@@ -226,23 +242,32 @@ const SidebarIconLink = {
       if (this.onClick) this.onClick(event)
     },
   },
-  template: `
-    <component
-      :is="to ? RouterLink : isExternal ? 'a' : 'button'"
-      :to="to"
-      :href="href"
-      :target="isExternal ? target : null"
-      :rel="isExternal ? rel : null"
-      :type="to || isExternal ? null : 'button'"
-      :title="title"
-      class="group relative flex h-14 w-14 items-center justify-center rounded-xl border border-white/15 transition"
-      :class="active ? 'bg-slate-950 text-white' : warning ? 'bg-[#d97706] text-white hover:bg-[#b45309]' : 'bg-white/5 text-white hover:border-cyan-400/40 hover:bg-white/10'"
-      @click="handleClick"
-    >
-      <kIcon :name="icon" size="20" class="text-current" />
-    </component>
-  `,
-  components: { RouterLink, kIcon },
+  render() {
+    const isLink = Boolean(this.to)
+    const tag = isLink ? RouterLink : this.isExternal ? 'a' : 'button'
+
+    return h(
+      tag,
+      {
+        to: this.to,
+        href: this.href,
+        target: this.isExternal ? this.target : null,
+        rel: this.isExternal ? this.rel : null,
+        type: isLink || this.isExternal ? null : 'button',
+        title: this.title,
+        class: [
+          'group relative flex h-14 w-14 items-center justify-center rounded-xl border border-white/15 transition',
+          this.active
+            ? 'bg-slate-950 text-white'
+            : this.warning
+              ? 'bg-[#d97706] text-white hover:bg-[#b45309]'
+              : 'bg-white/5 text-white hover:border-cyan-400/40 hover:bg-white/10',
+        ],
+        onClick: this.handleClick,
+      },
+      [h(kIcon, { name: this.icon, size: '20', color: '#ffffff' })]
+    )
+  },
 }
 
 const DEFAULT_STORAGE_KEY = 'two-col-layout-sidebar-collapsed'
@@ -267,11 +292,13 @@ export default {
     expandLabel: { type: String, default: 'Expand sidebar' },
     collapseIcon: { type: String, default: 'ArrowLeftToLine' },
     expandIcon: { type: String, default: 'ArrowRightToLine' },
+    showSponsors: { type: Boolean, default: false },
     storageKey: { type: String, default: DEFAULT_STORAGE_KEY },
-      defaultCollapsed: { type: Boolean, default: false },
-      mainMenu: { type: Array, default: () => [] },
-      showContactInfo: { type: Boolean, default: false },
-      account: { type: Object, default: null },
+    defaultCollapsed: { type: Boolean, default: false },
+    mainMenu: { type: Array, default: () => [] },
+    showContactInfo: { type: Boolean, default: false },
+    account: { type: Object, default: null },
+    contactEmail: { type: String, default: 'grammateia@ketekny.gr' },
   },
   data() {
     return {
@@ -373,6 +400,9 @@ export default {
       if (!this.account) return ''
       return [this.account.firstName, this.account.lastName].filter(Boolean).join(' ').trim() || 'Account'
     },
+    displayEmail() {
+      return this.account?.email || ''
+    },
     collapsedContactTooltip() {
       return `
         <div style="min-width: 220px;">
@@ -382,7 +412,7 @@ export default {
           <div style="display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.9);">
             <div>Βερανζέρου 13, 10677, Αθήνα</div>
             <div>210 3648 337</div>
-            <div>grammateia@ketekny.gr</div>
+            <div>${this.contactEmail}</div>
             <div>https://ketekny.gr</div>
           </div>
         </div>