ketekny-ui-kit 1.0.114 → 1.0.115

package/package.json

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

package/src/layout/kTwoColPage.vue

@@ -1,5 +1,11 @@
 <template>
   <main class="flex min-h-0 w-full max-w-none flex-1 flex-col overflow-hidden bg-slate-100">
+    <div
+      v-if="mobileSidebarOpen && !isDesktopViewport"
+      class="fixed inset-0 z-20 bg-slate-950/40 backdrop-blur-[1px] lg:hidden"
+      @click="toggleMobileSidebar"
+    />
+
     <section
       v-if="hasTopSection"
       class="shrink-0 bg-white px-4 pb-4 pb-0 pt-8 sm:px-6 lg:px-8"
@@ -44,8 +50,27 @@
     </div>
 
     <div class="flex min-h-0 flex-1 flex-col overflow-hidden bg-slate-100 py-4">
+      <div
+        class="lg:hidden"
+        :class="mobileSidebarOpen ? 'mx-auto flex w-full max-w-none px-4 pb-3 sm:px-6' : 'fixed left-0 top-1/2 z-20 -translate-y-1/2'"
+      >
+        <kButton
+          :label="mobileSidebarOpen ? 'Hide sidebar' : 'Show sidebar'"
+          :icon="mobileSidebarOpen ? 'PanelLeftClose' : 'PanelLeftOpen'"
+          variant="soft"
+          :icon-only="!mobileSidebarOpen"
+          :aria-label="mobileSidebarOpen ? null : 'Show sidebar'"
+          :class="mobileSidebarOpen ? '' : 'rounded-full shadow-lg shadow-slate-900/15'"
+          @click="toggleMobileSidebar"
+        />
+      </div>
       <div class="mx-auto flex min-h-0 w-full max-w-none flex-1 gap-2">
-        <aside class="ml-8 min-h-0 shrink-0 overflow-y-auto pr-4" :style="sidebarStyle">
+        <aside
+          v-if="showSidebar"
+          class="min-h-0 shrink-0 overflow-y-auto bg-slate-100 px-4 sm:px-6 lg:ml-8 lg:pr-4 lg:pl-0"
+          :class="mobileSidebarClass"
+          :style="sidebarStyle"
+        >
           <slot name="sidebar" />
         </aside>
         <section class="min-h-0 min-w-0 flex-1 overflow-y-auto px-2">
@@ -60,6 +85,9 @@
 import packageJson from '../../package.json'
 import kButton from '../ui/kButton.vue'
 
+const LG_VIEWPORT_QUERY = '(min-width: 1024px)'
+const MAIN_MENU_TOGGLE_EVENT = 'ketekny:two-col-layout-mobile-menu'
+
 export default {
   name: 'PageTwoColShell',
   components: { kButton },
@@ -85,6 +113,13 @@ export default {
       default: '300px',
     },
   },
+  data() {
+    return {
+      isDesktopViewport: true,
+      mobileSidebarOpen: false,
+      viewportQuery: null,
+    }
+  },
   computed: {
     hasTopSection() {
       return Boolean(
@@ -105,8 +140,46 @@ export default {
         maxWidth: this.sidebarWidth,
       }
     },
+    mobileSidebarClass() {
+      if (this.isDesktopViewport) return ''
+      return 'fixed left-0 top-0 z-20 h-full max-w-[85vw] border-r border-slate-200 bg-slate-100 py-4 shadow-xl shadow-slate-900/20'
+    },
+    showSidebar() {
+      return this.isDesktopViewport || this.mobileSidebarOpen
+    },
+  },
+  mounted() {
+    if (typeof window === 'undefined') return
+    this.viewportQuery = window.matchMedia(LG_VIEWPORT_QUERY)
+    this.isDesktopViewport = this.viewportQuery.matches
+    this.syncSidebarForViewport()
+    this.viewportQuery.addEventListener('change', this.handleViewportChange)
+    window.addEventListener(MAIN_MENU_TOGGLE_EVENT, this.handleMainMenuToggle)
+  },
+  beforeUnmount() {
+    this.viewportQuery?.removeEventListener?.('change', this.handleViewportChange)
+    window.removeEventListener(MAIN_MENU_TOGGLE_EVENT, this.handleMainMenuToggle)
   },
   methods: {
+    handleMainMenuToggle(event) {
+      if (this.isDesktopViewport) return
+      if (event?.detail?.open) {
+        this.mobileSidebarOpen = false
+      }
+    },
+    handleViewportChange(event) {
+      this.isDesktopViewport = event.matches
+      this.syncSidebarForViewport()
+    },
+    syncSidebarForViewport() {
+      if (!this.isDesktopViewport) {
+        this.mobileSidebarOpen = false
+      }
+    },
+    toggleMobileSidebar() {
+      if (this.isDesktopViewport) return
+      this.mobileSidebarOpen = !this.mobileSidebarOpen
+    },
     openExternalUrl() {
       const target = String(this.externalUrl || '').trim()
       if (!target) return

package/src/twoColLayout/components/MultilevelSidebar.vue

@@ -18,6 +18,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'
+const LG_VIEWPORT_QUERY = '(min-width: 1024px)'
 
 export default {
   name: 'MultilevelSidebar',
@@ -86,6 +87,8 @@ export default {
       activeMenuTab: 'all',
       query: '',
       collapsed: false,
+      isDesktopViewport: true,
+      viewportQuery: null,
       openIds: new Set(['projects']),
       favoriteIds: new Set(),
       footerLinks: [
@@ -232,8 +235,30 @@ export default {
     activeMenuTab(value) {
       this.persistActiveMenuTab(value)
     },
+    mobileOpen(isOpen) {
+      if (isOpen) this.syncCollapsedForViewport()
+    },
+  },
+  mounted() {
+    if (typeof window === 'undefined') return
+    this.viewportQuery = window.matchMedia(LG_VIEWPORT_QUERY)
+    this.isDesktopViewport = this.viewportQuery.matches
+    this.syncCollapsedForViewport()
+    this.viewportQuery.addEventListener('change', this.handleViewportChange)
+  },
+  beforeUnmount() {
+    this.viewportQuery?.removeEventListener?.('change', this.handleViewportChange)
   },
   methods: {
+    handleViewportChange(event) {
+      this.isDesktopViewport = event.matches
+      this.syncCollapsedForViewport()
+    },
+    syncCollapsedForViewport() {
+      if (!this.isDesktopViewport) {
+        this.collapsed = false
+      }
+    },
     findMenuItemById(items, id) {
       for (const item of items) {
         if (item.id === id) return item
@@ -307,6 +332,10 @@ export default {
       }
     },
     toggleCollapsed() {
+      if (!this.isDesktopViewport) {
+        this.collapsed = false
+        return
+      }
       this.collapsed = !this.collapsed
     },
     toggle(id) {

package/src/twoColLayout/components/TwoColLayout.vue

@@ -39,9 +39,9 @@
     </main>
 
     <button
-      v-if="!mobileMenuOpen"
+      v-if="!mobileMenuOpen && showMobileMenuButton"
       type="button"
-      class="fixed bottom-5 left-5 z-50 inline-flex size-14 items-center justify-center rounded-full transition-colors lg:hidden"
+      class="fixed bottom-0 left-0 z-50 inline-flex size-14 items-center justify-center rounded-tr-2xl 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'"
@@ -56,6 +56,9 @@
 import { Menu } from "@lucide/vue";
 import MultilevelSidebar from "./MultilevelSidebar.vue";
 
+const LG_VIEWPORT_QUERY = "(min-width: 1024px)";
+const MAIN_MENU_TOGGLE_EVENT = "ketekny:two-col-layout-mobile-menu";
+
 export default {
   name: "TwoColLayout",
   components: {
@@ -105,14 +108,66 @@ export default {
   data() {
     return {
       mobileMenuOpen: false,
+      desktopViewportQuery: null,
+      showMobileMenuButton: true,
+      mobileScrollHideTimer: null,
     };
   },
+  mounted() {
+    if (typeof window === "undefined") return;
+    this.desktopViewportQuery = window.matchMedia(LG_VIEWPORT_QUERY);
+    this.syncMenuForViewport(this.desktopViewportQuery.matches);
+    this.desktopViewportQuery.addEventListener("change", this.handleViewportChange);
+    window.addEventListener("scroll", this.handleWindowScroll, { passive: true });
+  },
+  beforeUnmount() {
+    this.desktopViewportQuery?.removeEventListener?.("change", this.handleViewportChange);
+    window.removeEventListener("scroll", this.handleWindowScroll);
+    if (this.mobileScrollHideTimer) {
+      window.clearTimeout(this.mobileScrollHideTimer);
+      this.mobileScrollHideTimer = null;
+    }
+  },
   methods: {
+    handleWindowScroll() {
+      if (typeof window === "undefined") return;
+      if (this.mobileMenuOpen || this.desktopViewportQuery?.matches) return;
+      this.showMobileMenuButton = false;
+      if (this.mobileScrollHideTimer) {
+        window.clearTimeout(this.mobileScrollHideTimer);
+      }
+      this.mobileScrollHideTimer = window.setTimeout(() => {
+        this.showMobileMenuButton = true;
+        this.mobileScrollHideTimer = null;
+      }, 180);
+    },
+    emitMobileMenuState() {
+      if (typeof window === "undefined") return;
+      window.dispatchEvent(
+        new CustomEvent(MAIN_MENU_TOGGLE_EVENT, {
+          detail: { open: this.mobileMenuOpen },
+        })
+      );
+    },
+    handleViewportChange(event) {
+      this.syncMenuForViewport(event.matches);
+    },
+    syncMenuForViewport(isDesktopViewport) {
+      if (!isDesktopViewport) {
+        this.mobileMenuOpen = false;
+        this.emitMobileMenuState();
+        this.showMobileMenuButton = true;
+      }
+    },
     toggleMenu() {
       this.mobileMenuOpen = !this.mobileMenuOpen;
+      this.showMobileMenuButton = !this.mobileMenuOpen;
+      this.emitMobileMenuState();
     },
     closeMenu() {
       this.mobileMenuOpen = false;
+      this.showMobileMenuButton = true;
+      this.emitMobileMenuState();
     },
     handleSelect(id) {
       this.closeMenu();