ketekny-ui-kit 1.0.75 → 1.0.77

package/package.json

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

package/src/layout/twoColLayout.vue

@@ -3,7 +3,7 @@
     class="relative flex min-h-screen flex-col bg-[#edf4fb] lg:h-screen lg:flex-row lg:overflow-hidden"
   >
     <button
-      v-show="isSidebarCollapsed"
+      v-show="isDesktopViewport && isSidebarCollapsed"
       type="button"
       :aria-label="expandLabel"
       v-tooltip.right="expandLabel"
@@ -16,7 +16,7 @@
     </button>
 
     <button
-      v-show="!isSidebarCollapsed"
+      v-show="isDesktopViewport && !isSidebarCollapsed"
       type="button"
       :aria-label="collapseLabel"
       v-tooltip.left="collapseLabel"
@@ -29,229 +29,91 @@
     </button>
 
     <aside
-      class="flex h-screen w-full flex-col overflow-y-auto overflow-x-hidden bg-[radial-gradient(circle_at_0_0,#ffffff0f,#0000_34%),linear-gradient(#101a2d_0%,#0a1120_52%,#070d19_100%)] text-white shadow-2xl transition-all duration-300 ease-out lg:w-[360px] lg:shrink-0 lg:will-change-transform"
-      :class="
-        isSidebarCollapsed
-          ? 'lg:relative lg:z-30 lg:w-[76px]'
-          : 'lg:relative lg:z-30 lg:translate-x-0'
-      "
+      v-if="isDesktopViewport"
+      class="hidden lg:flex lg:shrink-0 transition-all duration-300 ease-out"
+      :class="isSidebarCollapsed ? 'lg:w-[76px]' : 'lg:w-[360px]'"
     >
-      <div class="relative">
-        <button
-          v-if="logoSrc"
-          type="button"
-          class="block w-full text-left"
-          v-tooltip.right.html="
-            isSidebarCollapsed ? collapsedContactTooltip : logoAlt
-          "
-          @click="$emit('logo-click')"
-        >
-          <img
-            :alt="logoAlt"
-            :src="isSidebarCollapsed ? collapsedLogoSrc : logoSrc"
-            class="cursor-pointer px-4 py-4 transition-all duration-300"
-          />
-        </button>
-        <div
-          v-if="title && !isSidebarCollapsed"
-          class="py-3 text-xl font-bold text-center"
-        >
-          {{ title }}
-        </div>
-
-        <slot name="sidebar-header" />
-      </div>
+      <SidebarPanel
+        :title="title"
+        :collapsed-logo-src="collapsedLogoSrc"
+        :logo-src="logoSrc"
+        :logo-alt="logoAlt"
+        :show-sponsors="showSponsors"
+        :menu-items="normalizedMainMenu"
+        :show-contact-info="showContactInfo"
+        :account="account"
+        :contact-email="contactEmail"
+        :collapsed="isSidebarCollapsed"
+        @logo-click="handleLogoClick"
+        @signin="handleSignin"
+        @signup="handleSignup"
+        @signout="handleSignout"
+        @edit-profile="handleEditProfile"
+      >
+        <template #sidebar-header>
+          <slot name="sidebar-header" />
+        </template>
+      </SidebarPanel>
+    </aside>
 
-      <div class="flex-1 pt-4">
-        <div
-          v-if="isSidebarCollapsed"
-          class="mx-1 mt-3 flex flex-col items-center gap-2"
-        >
-          <SidebarIconLink
-            v-for="item in normalizedMainMenu"
-            :key="item.key"
-            :icon="item.icon"
-            :active="item.active"
-            v-bind="item.bindings"
-            v-tooltip.right="item.label"
-          />
-        </div>
-        <div v-else-if="mainMenu.length" class="mx-2 mt-3 space-y-3">
-          <component
-            v-for="item in normalizedMainMenu"
-            :key="item.key"
-            :is="menuItemTag(item)"
-            v-bind="item.bindings"
-            class="flex w-full items-start gap-3 rounded-2xl border px-4 py-4 text-left transition-all duration-200"
-            :class="item.classes"
-          >
-            <span
-              class="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white/10 text-cyan-100 transition-colors duration-200"
-              :class="item.active ? 'bg-slate-950 text-white' : ''"
-            >
-              <kIcon :name="item.icon" />
-            </span>
-            <span class="min-w-0">
-              <span class="block font-semibold leading-tight">
-                {{ item.label }}
-              </span>
-              <span
-                v-if="item.description"
-                class="mt-1 block text-sm"
-                :class="item.active ? 'text-slate-700' : 'text-slate-300'"
-              >
-                {{ item.description }}
-              </span>
-            </span>
-          </component>
-        </div>
-      </div>
+    <button
+      v-if="!isDesktopViewport && !mobileMenuOpen"
+      type="button"
+      class="fixed bottom-4 left-4 z-[80] flex h-14 w-14 items-center justify-center rounded-full bg-[#121b2e] text-white shadow-2xl shadow-black/40 transition-transform duration-200 hover:scale-105 hover:bg-[#1a2640] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70"
+      aria-label="Open menu"
+      @click="mobileMenuOpen = true"
+    >
+      <kIcon name="Menu" size="22" class="text-white" />
+    </button>
 
-      <div
-        v-if="account"
-        class="shrink-0 border-b border-white/10 bg-slate-900/80 px-1 pb-4 text-white/80"
-      >
-        <div v-if="isSidebarCollapsed" class="flex flex-col gap-3">
-          <div v-if="account.loggedIn" class="flex flex-col items-center gap-2">
-            <SidebarIconLink
-              icon="UserRoundCog"
-              :on-click="() => $emit('edit-profile')"
-              :title="'Επεξεργασία προφίλ'"
-              v-tooltip.right="'Επεξεργασία προφίλ'"
-            />
-            <SidebarIconLink
-              icon="LogOut"
-              warning
-              :on-click="() => $emit('signout')"
-              :title="'Αποσύνδεση'"
-              v-tooltip.right="'Αποσύνδεση'"
-            />
-          </div>
-          <div v-else class="flex flex-col items-center gap-2">
-            <SidebarIconLink
-              icon="LogIn"
-              :on-click="() => $emit('signin')"
-              :title="'Sign in'"
-              v-tooltip.right="'Sign in'"
-            />
-            <SidebarIconLink
-              icon="UserPlus"
-              :on-click="() => $emit('signup')"
-              :title="'Sign up'"
-              v-tooltip.right="'Sign up'"
-            />
-          </div>
-        </div>
-        <div v-else class="flex flex-col gap-3 px-3">
-          <div class="min-w-0">
-            <p
-              v-if="account.loggedIn"
-              class="mt-2 truncate text-lg font-semibold text-white"
-            >
-              {{ accountDisplayName }}
-            </p>
-            <p
-              v-if="account.loggedIn && displayEmail"
-              class="truncate text-sm text-slate-300"
-            >
-              {{ displayEmail }}
-            </p>
-          </div>
-          <div class="flex flex-wrap justify-between gap-2">
-            <kButton
-              v-if="!account.loggedIn"
-              secondary
-              icon="LogIn"
-              label="Σύνδεση"
-              @click="$emit('signin')"
-            />
-            <kButton
-              v-if="!account.loggedIn"
-              secondary
-              icon="UserPlus"
-              label="Εγγραφή"
-              @click="$emit('signup')"
-            />
-            <kButton
-              v-if="account.loggedIn"
-              variant="soft"
-              icon="UserRoundCog"
-              label="Επεξεργασία προφίλ"
-              @click="$emit('edit-profile')"
-            />
-            <kButton
-              v-if="account.loggedIn"
-              icon="LogOut"
-              warning
-              label="Αποσύνδεση"
-              @click="$emit('signout')"
-            />
-          </div>
-        </div>
-      </div>
+    <transition name="mobile-menu-backdrop">
+      <button
+        v-if="!isDesktopViewport && mobileMenuOpen"
+        type="button"
+        class="fixed inset-0 z-[85] bg-black/50 backdrop-blur-sm"
+        aria-label="Close menu"
+        @click="closeMobileMenu"
+      />
+    </transition>
 
-      <div
-        v-if="!isSidebarCollapsed"
-        class="shrink-0 border-t border-white/10 text-white/50"
+    <transition name="mobile-menu-panel">
+      <aside
+        v-if="!isDesktopViewport && mobileMenuOpen"
+        class="fixed inset-y-0 left-0 z-[90] flex h-[100dvh] w-[min(90vw,420px)] max-w-full overflow-hidden shadow-2xl"
+        role="dialog"
+        aria-modal="true"
       >
-        <div class="flex flex-col gap-2 px-4" v-if="showContactInfo">
-          <p
-            class="text-sm font-semibold uppercase tracking-[0.25em] text-white/60"
-          >
-            KETEKNY AE
-          </p>
-          <div
-            class="flex flex-wrap items-center gap-x-3 text-sm"
-            :class="isSidebarCollapsed ? 'justify-center' : ''"
-          >
-            <span v-if="isSidebarCollapsed" class="sr-only"
-              >KETEKNY AE contact info</span
-            >
-            <span class="whitespace-nowrap">Βερανζέρου 13, 10677, Αθήνα</span>
-            <span class="whitespace-nowrap">210 3648 337</span>
-            <span class="whitespace-nowrap">
-              <a
-                :href="`mailto:${contactEmail}`"
-                class="whitespace-nowrap hover:underline"
-              >
-                {{ contactEmail }}
-              </a>
-            </span>
-            <a
-              href="https://ketekny.gr"
-              target="_blank"
-              rel="noreferrer"
-              class="whitespace-nowrap hover:underline"
+        <div class="relative flex h-full w-full flex-col bg-transparent">
+          <div class="flex-1 overflow-y-auto bg-transparent">
+            <SidebarPanel
+              :title="title"
+              :collapsed-logo-src="collapsedLogoSrc"
+              :logo-src="logoSrc"
+              :logo-alt="logoAlt"
+              :show-sponsors="showSponsors"
+              :menu-items="normalizedMainMenu"
+              :show-contact-info="showContactInfo"
+              :account="account"
+              :contact-email="contactEmail"
+              :collapsed="false"
+              @logo-click="handleLogoClick"
+              @item-click="closeMobileMenu"
+              @signin="handleSignin"
+              @signup="handleSignup"
+              @signout="handleSignout"
+              @edit-profile="handleEditProfile"
             >
-              https://ketekny.gr
-            </a>
+              <template #sidebar-header>
+                <slot name="sidebar-header" />
+              </template>
+            </SidebarPanel>
           </div>
         </div>
-
-        <div
-          v-if="showSponsors && !isSidebarCollapsed"
-          class="flex flex-col gap-3 px-4 py-1 bg-[#0d4b87] mt-2"
-        >
-          <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-14 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-14 w-auto object-contain"
-            />
-          </div>
-        </div>
-      </div>
-    </aside>
+      </aside>
+    </transition>
 
     <main
-      class="min-h-screen min-w-0 flex-1 overflow-y-auto overflow-x-hidden lg:h-full lg:min-h-0"
+      class="min-h-0 min-w-0 flex-1 overflow-visible lg:h-full lg:min-h-0 lg:overflow-y-auto lg:overflow-x-hidden"
     >
       <div class="w-full">
         <slot />
@@ -260,68 +122,18 @@
   </div>
 </template>
 
-  <script>
-import { h } from "vue";
-import kButton from "../ui/kButton.vue";
+<script>
 import kIcon from "../ui/kIcon.vue";
-import { RouterLink } from "vue-router";
-
-const SidebarIconLink = {
-  props: {
-    icon: { type: String, required: true },
-    active: { type: Boolean, default: false },
-    to: { type: [String, Object], default: null },
-    href: { type: String, default: null },
-    title: { type: String, default: "" },
-    isExternal: { type: Boolean, default: false },
-    target: { type: String, default: "_blank" },
-    rel: { type: String, default: "noreferrer" },
-    onClick: { type: Function, default: null },
-    warning: { type: Boolean, default: false },
-    tooltip: { type: String, default: "" },
-  },
-  methods: {
-    handleClick(event) {
-      if (this.onClick) this.onClick(event);
-    },
-  },
-  render() {
-    const isLink = Boolean(this.to);
-    const tag = isLink ? RouterLink : this.isExternal ? "a" : "button";
-
-    return h(
-      tag,
-      {
-        to: isLink ? this.to : undefined,
-        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",
-          isLink ? "cursor-pointer" : "",
-        ],
-        onClick: this.handleClick,
-      },
-      [h(kIcon, { name: this.icon, size: "20", color: "#ffffff" })]
-    );
-  },
-};
+import SidebarPanel from "./twoColSidebarPanel.vue";
 
 const DEFAULT_STORAGE_KEY = "two-col-layout-sidebar-collapsed";
+const TAILWIND_MD_QUERY = "(min-width: 768px) and (max-width: 1023px)";
+const TAILWIND_LG_QUERY = "(min-width: 1024px)";
 
 export default {
   components: {
-    kButton,
     kIcon,
-    RouterLink,
-    SidebarIconLink,
+    SidebarPanel,
   },
   emits: ["logo-click", "signin", "signup", "signout", "edit-profile"],
   props: {
@@ -346,56 +158,110 @@ export default {
   },
   data() {
     return {
-      isSidebarCollapsed: false,
+      isSidebarCollapsed: null,
       mdCollapseQuery: null,
+      lgViewportQuery: null,
+      isDesktopViewport: false,
+      mobileMenuOpen: false,
     };
   },
   created() {
-    this.restoreSidebarState();
+    this.isSidebarCollapsed = this.getInitialSidebarState();
+
+    if (typeof window !== "undefined") {
+      this.isDesktopViewport = window.matchMedia(TAILWIND_LG_QUERY).matches;
+    }
   },
   mounted() {
-    this.mdCollapseQuery = window.matchMedia(
-      "(min-width: 768px) and (max-width: 1023px)"
-    );
+    this.mdCollapseQuery = window.matchMedia(TAILWIND_MD_QUERY);
+    this.lgViewportQuery = window.matchMedia(TAILWIND_LG_QUERY);
+    this.isDesktopViewport = this.lgViewportQuery.matches;
+
     this.syncSidebarForViewport();
-    this.mdCollapseQuery.addEventListener(
-      "change",
-      this.syncSidebarForViewport
-    );
+    this.mdCollapseQuery.addEventListener("change", this.syncSidebarForViewport);
+    this.lgViewportQuery.addEventListener("change", this.syncDesktopViewport);
   },
   beforeUnmount() {
     this.mdCollapseQuery?.removeEventListener(
       "change",
       this.syncSidebarForViewport
     );
+    this.lgViewportQuery?.removeEventListener(
+      "change",
+      this.syncDesktopViewport
+    );
+    if (typeof document !== "undefined") {
+      document.body.style.overflow = "";
+    }
+  },
+  watch: {
+    mobileMenuOpen(isOpen) {
+      if (typeof document === "undefined") return;
+
+      document.body.style.overflow = isOpen ? "hidden" : "";
+    },
   },
   methods: {
-    restoreSidebarState() {
+    isMdViewport() {
+      if (typeof window === "undefined") return false;
+
+      return window.matchMedia(TAILWIND_MD_QUERY).matches;
+    },
+    getInitialSidebarState() {
       if (typeof window === "undefined") {
-        this.isSidebarCollapsed = this.defaultCollapsed;
-        return;
+        return this.defaultCollapsed;
+      }
+
+      if (this.isMdViewport()) {
+        return true;
       }
 
       const stored = window.localStorage.getItem(this.storageKey);
       if (stored == null) {
-        this.isSidebarCollapsed = this.defaultCollapsed;
-        return;
+        return this.defaultCollapsed;
       }
 
-      this.isSidebarCollapsed = stored === "true";
+      return stored === "true";
     },
     syncSidebarForViewport() {
       if (typeof window === "undefined") return;
 
-      const isMd = window.matchMedia(
-        "(min-width: 768px) and (max-width: 1023px)"
-      ).matches;
-      if (isMd) {
+      if (this.isMdViewport()) {
         this.isSidebarCollapsed = true;
         return;
       }
 
-      this.restoreSidebarState();
+      this.isSidebarCollapsed = this.getInitialSidebarState();
+    },
+    syncDesktopViewport(event) {
+      this.isDesktopViewport = event.matches;
+
+      if (event.matches) {
+        this.mobileMenuOpen = false;
+      }
+    },
+    closeMobileMenu() {
+      this.mobileMenuOpen = false;
+    },
+    handleLogoClick() {
+      this.closeMobileMenu();
+      this.$emit("logo-click");
+    },
+    handleSignin() {
+      this.closeMobileMenu();
+      this.$emit("signin");
+    },
+    handleSignup() {
+      this.closeMobileMenu();
+      this.$emit("signup");
+    },
+    handleSignout() {
+      this.closeMobileMenu();
+      this.$emit("signout");
+    },
+    handleEditProfile() {
+      this.closeMobileMenu();
+      this.$emit("edit-profile");
     },
     persistSidebarState() {
       if (typeof window === "undefined") return;
@@ -409,11 +275,6 @@ export default {
       this.isSidebarCollapsed = !this.isSidebarCollapsed;
       this.persistSidebarState();
     },
-    menuItemTag(item) {
-      if (item?.to) return RouterLink;
-      if (item?.href) return "a";
-      return "button";
-    },
   },
   computed: {
     normalizedMainMenu() {
@@ -453,56 +314,25 @@ export default {
         };
       });
     },
-    menuItemBindings(item) {
-      if (item?.to) {
-        return {
-          to: item.to,
-          title: item.title || item.label,
-          "aria-current": item.active ? "page" : null,
-        };
-      }
-
-      if (item?.href) {
-        return {
-          href: item.href,
-          target: item.target || "_blank",
-          rel: item.rel || "noreferrer",
-          title: item.title || item.label,
-        };
-      }
-
-      return {
-        type: "button",
-        title: item?.title || item?.label,
-      };
-    },
-    accountDisplayName() {
-      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;">
-          <div style="font-weight: 700; text-transform: uppercase; letter-spacing: 0.25em; font-size: 11px; color: rgba(255,255,255,0.65); margin-bottom: 8px;">
-            KETEKNY AE
-          </div>
-          <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>${this.contactEmail}</div>
-            <div>https://ketekny.gr</div>
-          </div>
-        </div>
-      `;
-    },
   },
 };
 </script>
+
+<style scoped>
+.mobile-menu-panel-enter-active,
+.mobile-menu-panel-leave-active,
+.mobile-menu-backdrop-enter-active,
+.mobile-menu-backdrop-leave-active {
+  transition: opacity 0.25s ease, transform 0.25s ease;
+}
+
+.mobile-menu-panel-enter-from,
+.mobile-menu-panel-leave-to {
+  transform: translateX(-100%);
+}
+
+.mobile-menu-backdrop-enter-from,
+.mobile-menu-backdrop-leave-to {
+  opacity: 0;
+}
+</style>

package/src/layout/twoColSidebarPanel.vue

@@ -0,0 +1,329 @@
+<template>
+  <div
+    class="flex h-full w-full flex-col overflow-x-hidden bg-[radial-gradient(circle_at_0_0,#ffffff0f,#0000_34%),linear-gradient(#101a2d_0%,#0a1120_52%,#070d19_100%)] text-white shadow-2xl transition-all duration-300 ease-out lg:relative lg:z-30 lg:will-change-transform"
+  >
+    <div class="relative">
+      <button
+        v-if="logoSrc"
+        type="button"
+        class="block w-full text-left"
+        v-tooltip.right.html="collapsed ? collapsedContactTooltip : logoAlt"
+        @click="$emit('logo-click')"
+      >
+        <img
+          :alt="logoAlt"
+          :src="collapsed ? collapsedLogoSrc : logoSrc"
+          class="px-4 py-4 transition-all duration-300 cursor-pointer"
+        />
+      </button>
+      <div
+        v-if="title && !collapsed"
+        class="py-3 text-xl font-bold text-center"
+      >
+        {{ title }}
+      </div>
+
+      <slot name="sidebar-header" />
+    </div>
+
+    <div class="flex-1 pt-4">
+      <div v-if="collapsed" class="flex flex-col items-center gap-2 mx-1 mt-3">
+        <component
+          :is="menuItemComponent(item)"
+          v-for="item in menuItems"
+          :key="item.key"
+          v-bind="item.bindings"
+          class="relative flex items-center justify-center transition border group h-14 w-14 rounded-xl border-white/15"
+          :class="item.classes"
+          v-tooltip.right="item.label"
+          @click="$emit('item-click', item)"
+        >
+          <kIcon
+            :name="item.icon"
+            size="20"
+            :color="item.active ? '#0f172a' : '#ffffff'"
+          />
+        </component>
+      </div>
+      <div v-else-if="menuItems.length" class="mx-2 mt-3 space-y-3">
+        <component
+          :is="menuItemComponent(item)"
+          v-for="item in menuItems"
+          :key="item.key"
+          v-bind="item.bindings"
+          class="flex items-start w-full gap-3 px-4 py-4 text-left transition-all duration-200 border rounded-2xl"
+          :class="item.classes"
+          @click="$emit('item-click', item)"
+        >
+          <span
+            class="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white/10 text-cyan-100 transition-colors duration-200"
+            :class="
+              item.active
+                ? 'bg-slate-950 text-white'
+                : item.label === 'Settings'
+                ? 'bg-sky-500/20 text-sky-50 ring-1 ring-sky-400/25'
+                : ''
+            "
+          >
+            <kIcon :name="item.icon" />
+          </span>
+          <span class="min-w-0">
+            <span class="block font-semibold leading-tight">
+              {{ item.label }}
+            </span>
+            <span
+              v-if="item.description"
+              class="block mt-1 text-sm"
+              :class="item.active ? 'text-slate-700' : 'text-slate-300'"
+            >
+              {{ item.description }}
+            </span>
+          </span>
+        </component>
+      </div>
+    </div>
+
+    <div
+      v-if="account"
+      class="px-1 pb-4 border-b shrink-0 border-white/10 bg-slate-900/80 text-white/80"
+    >
+      <div v-if="collapsed" class="flex flex-col gap-3">
+        <div v-if="account.loggedIn" class="flex flex-col items-center gap-2">
+          <button
+            type="button"
+            class="relative flex items-center justify-center text-white transition border group h-14 w-14 rounded-xl border-white/15 bg-white/5 hover:border-cyan-400/40 hover:bg-white/10"
+            :title="editProfileLabel"
+            v-tooltip.right="editProfileLabel"
+            @click="$emit('edit-profile')"
+          >
+            <kIcon name="UserRoundCog" size="20" color="#ffffff" />
+          </button>
+          <button
+            type="button"
+            class="group relative flex h-14 w-14 items-center justify-center rounded-xl border border-white/15 bg-[#d97706] text-white transition hover:bg-[#b45309]"
+            :title="signOutLabel"
+            v-tooltip.right="signOutLabel"
+            @click="$emit('signout')"
+          >
+            <kIcon name="LogOut" size="20" color="#ffffff" />
+          </button>
+        </div>
+        <div v-else class="flex flex-col items-center gap-2">
+          <button
+            type="button"
+            class="relative flex items-center justify-center text-white transition border group h-14 w-14 rounded-xl border-white/15 bg-white/5 hover:border-cyan-400/40 hover:bg-white/10"
+            :title="signInLabel"
+            v-tooltip.right="signInLabel"
+            @click="$emit('signin')"
+          >
+            <kIcon name="LogIn" size="20" color="#ffffff" />
+          </button>
+          <button
+            type="button"
+            class="relative flex items-center justify-center text-white transition border group h-14 w-14 rounded-xl border-white/15 bg-white/5 hover:border-cyan-400/40 hover:bg-white/10"
+            :title="signUpLabel"
+            v-tooltip.right="signUpLabel"
+            @click="$emit('signup')"
+          >
+            <kIcon name="UserPlus" size="20" color="#ffffff" />
+          </button>
+        </div>
+      </div>
+      <div v-else class="flex flex-col gap-3 px-3">
+        <div class="min-w-0">
+          <p
+            v-if="account.loggedIn"
+            class="mt-2 text-lg font-semibold text-white truncate"
+          >
+            {{ accountDisplayName }}
+          </p>
+          <p
+            v-if="account.loggedIn && displayEmail"
+            class="text-sm truncate text-slate-300"
+          >
+            {{ displayEmail }}
+          </p>
+        </div>
+        <div class="flex flex-wrap justify-between gap-2">
+          <kButton
+            v-if="!account.loggedIn"
+            secondary
+            icon="LogIn"
+            :label="signInLabel"
+            @click="$emit('signin')"
+          />
+          <kButton
+            v-if="!account.loggedIn"
+            secondary
+            icon="UserPlus"
+            :label="signUpLabel"
+            @click="$emit('signup')"
+          />
+          <kButton
+            v-if="account.loggedIn"
+            variant="soft"
+            icon="UserRoundCog"
+            :label="editProfileLabel"
+            @click="$emit('edit-profile')"
+          />
+          <kButton
+            v-if="account.loggedIn"
+            icon="LogOut"
+            warning
+            :label="signOutLabel"
+            @click="$emit('signout')"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="!collapsed"
+      class="border-t shrink-0 border-white/10 text-white/50"
+    >
+      <div v-if="showContactInfo" class="flex flex-col gap-2 px-4">
+        <p class="text-sm font-semibold uppercase tracking-[0.25em] text-white/60">
+          KETEKNY AE
+        </p>
+        <div class="flex flex-wrap items-center text-sm gap-x-3">
+          <span class="whitespace-nowrap">{{ contactAddressLabel }}</span>
+          <span class="whitespace-nowrap">210 3648 337</span>
+          <span class="whitespace-nowrap">
+            <a
+              :href="`mailto:${contactEmail}`"
+              class="whitespace-nowrap hover:underline"
+            >
+              {{ contactEmail }}
+            </a>
+          </span>
+          <a
+            href="https://ketekny.gr"
+            target="_blank"
+            rel="noreferrer"
+            class="whitespace-nowrap hover:underline"
+          >
+            https://ketekny.gr
+          </a>
+        </div>
+      </div>
+
+      <div
+        v-if="showSponsors"
+        class="mt-2 flex flex-col gap-3 bg-[#0d4b87] px-4 py-1"
+      >
+        <div>
+          <img
+            src="https://s3.ketekny.gr/public/web-apps/sponsors/Greece 2.0_NextGeneration_White_gr.png"
+            alt="Tameio Anakampsis"
+            class="object-contain w-auto mx-auto max-h-14"
+          />
+        </div>
+        <div>
+          <img
+            src="https://s3.ketekny.gr/public/web-apps/sponsors/yp_ygeias_dark.png"
+            alt="Ypourgeio Ygeias"
+            class="object-contain w-auto mx-auto max-h-14"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { RouterLink } from "vue-router";
+import kButton from "../ui/kButton.vue";
+import kIcon from "../ui/kIcon.vue";
+
+const LABELS = {
+  editProfile: "Το προφίλ μου",
+  signOut: "Αποσύνδεση",
+  signIn: "Σύνδεση",
+  signUp: "Εγγραφή",
+  contactAddress: "Βερανζέου 13, 10677, Αθήνα",
+};
+
+export default {
+  name: "TwoColSidebarPanel",
+  components: {
+    kButton,
+    kIcon,
+    RouterLink,
+  },
+  emits: [
+    "logo-click",
+    "item-click",
+    "signin",
+    "signup",
+    "signout",
+    "edit-profile",
+  ],
+  props: {
+    title: { type: String, default: "" },
+    collapsedLogoSrc: {
+      type: String,
+      default: "https://s3.ketekny.gr/public/web-apps/logos/logo-icon-dark.png",
+    },
+    logoSrc: { type: String, default: "" },
+    logoAlt: { type: String, default: "Logo" },
+    showSponsors: { type: Boolean, default: false },
+    menuItems: { type: Array, default: () => [] },
+    showContactInfo: { type: Boolean, default: false },
+    account: { type: Object, default: null },
+    contactEmail: { type: String, default: "grammateia@ketekny.gr" },
+    collapsed: { type: Boolean, default: false },
+  },
+  computed: {
+    accountDisplayName() {
+      if (!this.account) return "";
+
+      return (
+        [this.account.firstName, this.account.lastName]
+          .filter(Boolean)
+          .join(" ")
+          .trim() || "Account"
+      );
+    },
+    displayEmail() {
+      return this.account?.email || "";
+    },
+    editProfileLabel() {
+      return LABELS.editProfile;
+    },
+    signOutLabel() {
+      return LABELS.signOut;
+    },
+    signInLabel() {
+      return LABELS.signIn;
+    },
+    signUpLabel() {
+      return LABELS.signUp;
+    },
+    contactAddressLabel() {
+      return LABELS.contactAddress;
+    },
+    collapsedContactTooltip() {
+      return `
+        <div style="min-width: 220px;">
+          <div style="font-weight: 700; text-transform: uppercase; letter-spacing: 0.25em; font-size: 11px; color: rgba(255,255,255,0.65); margin-bottom: 8px;">
+            KETEKNY AE
+          </div>
+          <div style="display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.9);">
+            <div>${LABELS.contactAddress}</div>
+            <div>210 3648 337</div>
+            <div>${this.contactEmail}</div>
+            <div>https://ketekny.gr</div>
+          </div>
+        </div>
+      `;
+    },
+  },
+  methods: {
+    menuItemComponent(item) {
+      if (item?.isLink) return RouterLink;
+      if (item?.isExternal) return "a";
+      return "button";
+    },
+  },
+};
+</script>

package/src/style/style.css

@@ -1,7 +1,13 @@
+@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;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');