gov-layout 1.3.7 → 1.3.10

package/README.md

@@ -15,11 +15,8 @@ npm install gov-layout gov-token-css
 ```css
 /* ใน globals.css */
 @import "gov-token-css";
-@import "gov-layout/styles.css";
 ```
 
-> ใช้ `gov-layout/styles.css` เพื่อให้ class สีเช่น `text-text-primary` ทำงาน แม้ไม่ได้ import component จาก `gov-layout`
-
 ---
 
 ## 📦 Components ทั้งหมด
@@ -111,7 +108,7 @@ const menuItems: MenuItem[] = [
 
 ## 1. StaffSidebar (เจ้าหน้าที่)
 
-Sidebar ฝั่งซ้ายแบบ fixed — รองรับพับ/กาง (collapsible)
+Sidebar ฝั่งซ้ายแบบ fixed — รองรับพับ/กาง (collapsible) + **รองรับมือถือแบบ Drawer** 🆕
 
 ### ตัวอย่างใช้งาน
 
@@ -214,6 +211,70 @@ const menuItems: MenuItem[] = [
 | `collapsible` | `boolean?` | `false` | เปิดโหมดพับ/กาง |
 | `isOpen` | `boolean?` | - | controlled open/close |
 | `onToggle` | `() => void?` | - | callback เมื่อกดพับ/กาง |
+| `mobileBreakpoint` | `number?` | `768` | breakpoint (px) สำหรับสลับเป็นโหมดมือถือ 🆕 |
+
+### 📱 Mobile Responsive (v1.3.5+) 🆕
+
+เมื่อหน้าจอ **แคบกว่า `mobileBreakpoint`** (default: 768px) sidebar จะสลับเป็นโหมดมือถืออัตโนมัติ:
+
+```
+┌─────────────────────────────┐
+│ 🟢 ชื่อองค์กร         [☰]  │ ← Mobile Header (sticky top)
+├─────────────────────────────┤
+│                             │
+│       เนื้อหาหลัก           │
+│                             │
+└─────────────────────────────┘
+
+        กดปุ่ม ☰ →
+
+┌──────────────────┬──────────┐
+│ 🟢 ชื่อองค์กร [✕]│▒▒▒▒▒▒▒▒▒│ ← Drawer + Overlay
+│──────────────────│▒▒▒▒▒▒▒▒▒│
+│ ☐ แดชบอร์ด       │▒▒▒▒▒▒▒▒▒│
+│ ☐ ตรวจสอบคำร้อง  │▒▒▒▒▒▒▒▒▒│
+│ ☐ รายงาน         │▒▒▒▒▒▒▒▒▒│
+│ ...              │▒▒▒▒▒▒▒▒▒│
+│──────────────────│▒▒▒▒▒▒▒▒▒│
+│ 👤 ผู้ใช้  [🚪]  │▒▒▒▒▒▒▒▒▒│
+└──────────────────┴──────────┘
+```
+
+**ฟีเจอร์โหมดมือถือ:**
+
+- ✅ **Mobile Header** — แถบด้านบนสีเขียวแสดงโลโก้ + ชื่อองค์กร + ปุ่ม ☰
+- ✅ **Drawer slide-in** — เลื่อนเข้าจากซ้ายพร้อม animation
+- ✅ **Overlay backdrop** — พื้นหลังมืดเมื่อเปิด drawer (กดปิดได้)
+- ✅ **ปุ่มปิด (✕)** — อยู่ใน header ของ drawer
+- ✅ **ปิดอัตโนมัติ** — เมื่อกดเมนูแล้ว drawer ปิดเอง
+- ✅ **ESC key** — กด Escape ปิด drawer
+- ✅ **Lock scroll** — ล็อก body scroll เมื่อ drawer เปิด
+- ✅ **ไม่ต้องเขียนโค้ดเพิ่ม** — ใช้ `<StaffSidebar>` ตัวเดียว ตรวจจับอัตโนมัติ
+
+**ไม่ต้องแก้โค้ดเดิม** — แค่อัพเดตเวอร์ชัน ระบบจะตรวจจับขนาดหน้าจอให้อัตโนมัติ:
+
+```tsx
+// ใช้ StaffSidebar เหมือนเดิม — mobile responsive ทำงานอัตโนมัติ
+<StaffSidebar
+  orgName="เทศบาลตำบลหลักเมือง"
+  orgSubtitle="จังหวัดราชบุรี"
+  menuItems={menuItems}
+  user={user}
+  roleLabel="เจ้าหน้าที่"
+  currentPath={currentPath}
+  onNavigate={(path) => router.push(path)}
+  onLogout={() => signOut()}
+/>
+
+// หรือปรับ breakpoint เอง
+<StaffSidebar mobileBreakpoint={1024} ... />
+```
+
+> 💡 **Layout `marginLeft`:** บนมือถือ sidebar ไม่กินพื้นที่ → ใส่ `marginLeft: 0` ให้ main content
+>
+> ```tsx
+> <main style={{ marginLeft: isMobile ? 0 : 280 }}>{children}</main>
+> ```
 
 ### Features
 
@@ -225,7 +286,8 @@ const menuItems: MenuItem[] = [
 - ✅ Default ตั้งค่าระบบ + ช่วยเหลือ (override ได้)
 - ✅ โปรไฟล์ + ออกจากระบบ ล่างสุดเสมอ
 - ✅ `dividerAfter` เส้นคั่นระหว่างกลุ่ม
-- ✅ ใช้ Standard Avatar Placeholder กรณีที่ไม่มีรูปโปรไฟล์หรือโหลดรูปไม่สำเร็จ (v1.3.2+) 🆕
+- ✅ ใช้ Standard Avatar Placeholder กรณีที่ไม่มีรูปโปรไฟล์หรือโหลดรูปไม่สำเร็จ (v1.3.2+)
+- ✅ **Mobile Responsive Drawer** — สลับเป็น slide-in drawer บนมือถืออัตโนมัติ (v1.3.5+) 🆕
 
 ---
 
@@ -489,10 +551,25 @@ type FontSizeKey = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 
 ```tsx
 'use client';
+import { useState, useEffect } from 'react';
 import { StaffSidebar, SettingsPanel } from 'gov-layout';
 
+// Hook ตรวจจับมือถือ (ใช้ breakpoint เดียวกับ StaffSidebar)
+function useIsMobile(breakpoint = 768) {
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    setIsMobile(mql.matches);
+    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
+    mql.addEventListener('change', handler);
+    return () => mql.removeEventListener('change', handler);
+  }, [breakpoint]);
+  return isMobile;
+}
+
 export default function AdminLayout({ children }) {
   const [currentPath, setCurrentPath] = useState('/');
+  const isMobile = useIsMobile();
 
   return (
     <div style={{ display: 'flex' }}>
@@ -509,7 +586,8 @@ export default function AdminLayout({ children }) {
         onProfile={() => setCurrentPath('/profile')}
         collapsible
       />
-      <main style={{ marginLeft: 280, flex: 1, padding: 32 }}>
+      {/* มือถือ: marginLeft=0 เพราะ sidebar เป็น drawer */}
+      <main style={{ marginLeft: isMobile ? 0 : 280, flex: 1, padding: 32 }}>
         {currentPath === '/settings' ? (
           <SettingsPanel showTheme={false} />
         ) : (

package/dist/index.d.mts

@@ -53,8 +53,9 @@ interface StaffSidebarProps {
     onExpandRequest?: () => void;
 }
 
-declare function StaffSidebar({ orgLogo, orgName, orgSubtitle, menuItems, bottomMenuItems, user, roleLabel, onNavigate, onLogout, onProfile, currentPath, width, className, collapsible, isOpen: controlledIsOpen, onToggle, onExpandRequest, topOffset, }: StaffSidebarProps & {
+declare function StaffSidebar({ orgLogo, orgName, orgSubtitle, menuItems, bottomMenuItems, user, roleLabel, onNavigate, onLogout, onProfile, currentPath, width, className, collapsible, isOpen: controlledIsOpen, onToggle, onExpandRequest, topOffset, mobileBreakpoint, }: StaffSidebarProps & {
     topOffset?: number | string;
+    mobileBreakpoint?: number;
 }): react_jsx_runtime.JSX.Element;
 
 interface SidebarHeaderProps {

package/dist/index.d.ts

@@ -53,8 +53,9 @@ interface StaffSidebarProps {
     onExpandRequest?: () => void;
 }
 
-declare function StaffSidebar({ orgLogo, orgName, orgSubtitle, menuItems, bottomMenuItems, user, roleLabel, onNavigate, onLogout, onProfile, currentPath, width, className, collapsible, isOpen: controlledIsOpen, onToggle, onExpandRequest, topOffset, }: StaffSidebarProps & {
+declare function StaffSidebar({ orgLogo, orgName, orgSubtitle, menuItems, bottomMenuItems, user, roleLabel, onNavigate, onLogout, onProfile, currentPath, width, className, collapsible, isOpen: controlledIsOpen, onToggle, onExpandRequest, topOffset, mobileBreakpoint, }: StaffSidebarProps & {
     topOffset?: number | string;
+    mobileBreakpoint?: number;
 }): react_jsx_runtime.JSX.Element;
 
 interface SidebarHeaderProps {

package/dist/index.js

@@ -3,30 +3,7 @@
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
-// #style-inject:#style-inject
-function styleInject(css, { insertAt } = {}) {
-  if (typeof document === "undefined") return;
-  const head = document.head || document.getElementsByTagName("head")[0];
-  const style = document.createElement("style");
-  style.type = "text/css";
-  if (insertAt === "top") {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-// src/styles.css
-styleInject(".text-primary,\n.text-text-primary {\n  color: var(--color-alias-text-colors-primary, #060d26);\n}\n.text-secondary,\n.text-text-secondary {\n  color: var(--color-alias-text-colors-secondary, #1e7d55);\n}\n.text-tertiary,\n.text-text-tertiary {\n  color: var(--color-alias-text-colors-tertiary, #475272);\n}\n.text-placeholder,\n.text-text-placeholder {\n  color: var(--color-alias-text-colors-placeholder, #707993);\n}\n.text-critical,\n.text-text-critical {\n  color: var(--color-alias-text-colors-critical, #f21515);\n}\nhtml.dark .text-primary,\nhtml.dark .text-text-primary {\n  color: var(--color-alias-text-colors-primary, #060d26) !important;\n}\nhtml.dark .text-secondary,\nhtml.dark .text-text-secondary {\n  color: var(--color-alias-text-colors-secondary, #1e7d55) !important;\n}\nhtml.dark .text-tertiary,\nhtml.dark .text-text-tertiary {\n  color: var(--color-alias-text-colors-tertiary, #475272) !important;\n}\nhtml.dark .text-placeholder,\nhtml.dark .text-text-placeholder {\n  color: var(--color-alias-text-colors-placeholder, #707993) !important;\n}\nhtml.dark .text-critical,\nhtml.dark .text-text-critical {\n  color: var(--color-alias-text-colors-critical, #f21515) !important;\n}\n");
+// src/sidebar/StaffSidebar.tsx
 function useDarkMode() {
   const [isDark, setIsDark] = react.useState(false);
   react.useEffect(() => {
@@ -138,10 +115,7 @@ function SearchIcon({ size = 20, className, style } = {}) {
   ] });
 }
 function BellIcon({ size = 20, className, style } = {}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...defaultProps(size), className, style, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.73 21a2 2 0 0 1-3.46 0" })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...defaultProps(size), viewBox: "0 0 22 24", stroke: "none", fill: "none", className, style, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21.2321 13.4463L19.3618 6.71712C18.8136 4.74574 17.6222 3.01418 15.9769 1.79767C14.3316 0.581165 12.3269 -0.0504751 10.2814 0.00315377C8.23593 0.0567826 6.26708 0.792603 4.6878 2.09365C3.10852 3.3947 2.00945 5.18632 1.5653 7.18371L0.11728 13.6954C-0.0426654 14.4149 -0.0389674 15.1611 0.128101 15.879C0.29517 16.5969 0.621344 17.2681 1.08254 17.8431C1.54374 18.418 2.12818 18.8821 2.79272 19.2009C3.45727 19.5198 4.18494 19.6853 4.92202 19.6853H6.01861C6.24454 20.7979 6.84817 21.7982 7.72723 22.5167C8.60629 23.2352 9.70671 23.6277 10.842 23.6277C11.9774 23.6277 13.0778 23.2352 13.9569 22.5167C14.8359 21.7982 15.4396 20.7979 15.6655 19.6853H16.4904C17.2492 19.6853 17.9977 19.5099 18.6774 19.1728C19.3572 18.8357 19.9498 18.346 20.409 17.742C20.8682 17.1379 21.1815 16.4359 21.3245 15.6907C21.4674 14.9455 21.4352 14.1774 21.2321 13.4463ZM10.842 21.654C10.2334 21.6515 9.64049 21.461 9.1443 21.1086C8.6481 20.7562 8.27291 20.2591 8.07005 19.6853H13.614C13.4112 20.2591 13.036 20.7562 12.5398 21.1086C12.0436 21.461 11.4506 21.6515 10.842 21.654ZM18.8411 16.55C18.5668 16.9139 18.2114 17.2088 17.8032 17.4113C17.3949 17.6138 16.9451 17.7183 16.4894 17.7165H4.92202C4.47982 17.7164 4.04328 17.6171 3.64463 17.4257C3.24598 17.2344 2.89539 16.9559 2.61874 16.611C2.34208 16.266 2.14643 15.8633 2.04622 15.4326C1.94602 15.0019 1.94381 14.5542 2.03977 14.1226L3.4868 7.60994C3.83561 6.04105 4.69886 4.63379 5.93932 3.61186C7.17978 2.58992 8.72625 2.01197 10.3329 1.96988C11.9395 1.92779 13.5142 2.42398 14.8064 3.37956C16.0987 4.33515 17.0344 5.69528 17.4649 7.24376L19.3352 13.9729C19.4588 14.4114 19.4785 14.8725 19.3927 15.3199C19.3069 15.7672 19.1181 16.1884 18.8411 16.55Z", fill: "currentColor" }) });
 }
 function FolderIcon({ size = 20, className, style } = {}) {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...defaultProps(size), className, style, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" }) });
@@ -903,6 +877,18 @@ function SidebarUserProfile({
     }
   );
 }
+function useIsMobile(breakpoint = 768) {
+  const [isMobile, setIsMobile] = react.useState(false);
+  react.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    setIsMobile(mql.matches);
+    const handler = (e) => setIsMobile(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, [breakpoint]);
+  return isMobile;
+}
 function ToggleIcon({ isOpen }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
@@ -923,6 +909,21 @@ function ToggleIcon({ isOpen }) {
     }
   );
 }
+function HamburgerIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "18", viewBox: "0 0 27 18", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M1.1875 17.8426C0.851042 17.8426 0.569077 17.7287 0.341604 17.501C0.113868 17.2735 0 16.9914 0 16.6547C0 16.3182 0.113868 16.0363 0.341604 15.8088C0.569077 15.5816 0.851042 15.468 1.1875 15.468H25.7292C26.0656 15.468 26.3476 15.5817 26.5751 15.8092C26.8028 16.0369 26.9167 16.3192 26.9167 16.6559C26.9167 16.9923 26.8028 17.2743 26.5751 17.5018C26.3476 17.729 26.0656 17.8426 25.7292 17.8426H1.1875ZM1.1875 10.1088C0.851042 10.1088 0.569077 9.99492 0.341604 9.76719C0.113868 9.53945 0 9.25735 0 8.9209C0 8.58417 0.113868 8.30221 0.341604 8.075C0.569077 7.84753 0.851042 7.73379 1.1875 7.73379H25.7292C26.0656 7.73379 26.3476 7.84766 26.5751 8.0754C26.8028 8.30313 26.9167 8.58523 26.9167 8.92169C26.9167 9.25841 26.8028 9.54037 26.5751 9.76758C26.3476 9.99506 26.0656 10.1088 25.7292 10.1088H1.1875ZM1.1875 2.3746C0.851042 2.3746 0.569077 2.26087 0.341604 2.0334C0.113868 1.80566 0 1.52343 0 1.18671C0 0.850249 0.113868 0.568284 0.341604 0.340812C0.569077 0.113604 0.851042 0 1.1875 0H25.7292C26.0656 0 26.3476 0.113868 26.5751 0.341604C26.8028 0.569077 26.9167 0.851174 26.9167 1.1879C26.9167 1.52435 26.8028 1.80632 26.5751 2.03379C26.3476 2.261 26.0656 2.3746 25.7292 2.3746H1.1875Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] });
+}
 function HelpCircleIcon2() {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
@@ -958,10 +959,13 @@ function StaffSidebar({
   isOpen: controlledIsOpen,
   onToggle,
   onExpandRequest,
-  topOffset = 0
+  topOffset = 0,
+  mobileBreakpoint = 768
 }) {
   const isDark = useDarkMode();
+  const isMobile = useIsMobile(mobileBreakpoint);
   const [internalOpen, setInternalOpen] = react.useState(true);
+  const [mobileDrawerOpen, setMobileDrawerOpen] = react.useState(false);
   const sidebarOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalOpen;
   const collapsed = collapsible && !sidebarOpen;
   const collapsedWidth = "64px";
@@ -985,6 +989,283 @@ function StaffSidebar({
       }
     }
   };
+  const openDrawer = react.useCallback(() => setMobileDrawerOpen(true), []);
+  const closeDrawer = react.useCallback(() => setMobileDrawerOpen(false), []);
+  const handleMobileNavigate = react.useCallback((path) => {
+    onNavigate(path);
+    if (isMobile) closeDrawer();
+  }, [onNavigate, isMobile, closeDrawer]);
+  react.useEffect(() => {
+    if (isMobile && mobileDrawerOpen) {
+      const originalOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = originalOverflow;
+      };
+    }
+  }, [isMobile, mobileDrawerOpen]);
+  react.useEffect(() => {
+    if (!isMobile || !mobileDrawerOpen) return;
+    const handler = (e) => {
+      if (e.key === "Escape") closeDrawer();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [isMobile, mobileDrawerOpen, closeDrawer]);
+  if (isMobile) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "header",
+        {
+          style: {
+            position: "sticky",
+            top: 0,
+            left: 0,
+            right: 0,
+            height: "60px",
+            background: "linear-gradient(to bottom left, #3AAE7D, #346D55)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "0 16px",
+            zIndex: 49,
+            boxShadow: "0 2px 8px rgba(0,0,0,0.15)"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px", flex: 1, minWidth: 0 }, children: [
+              orgLogo ? /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: orgLogo,
+                  alt: orgName,
+                  style: {
+                    width: "40px",
+                    height: "40px",
+                    borderRadius: "50%",
+                    objectFit: "cover",
+                    flexShrink: 0,
+                    border: "2px solid rgba(255,255,255,0.3)"
+                  }
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+                width: "40px",
+                height: "40px",
+                borderRadius: "50%",
+                background: "rgba(255,255,255,0.2)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                color: "#fff",
+                fontWeight: 700,
+                fontSize: "16px",
+                flexShrink: 0
+              }, children: orgName.slice(0, 2) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { minWidth: 0 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
+                  color: "#fff",
+                  fontWeight: 700,
+                  fontSize: "15px",
+                  lineHeight: "20px",
+                  margin: 0,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                }, children: orgName }),
+                orgSubtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
+                  color: "rgba(255,255,255,0.75)",
+                  fontSize: "12px",
+                  lineHeight: "16px",
+                  margin: 0,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                }, children: orgSubtitle })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: openDrawer,
+                "aria-label": "\u0E40\u0E1B\u0E34\u0E14\u0E40\u0E21\u0E19\u0E39",
+                style: {
+                  width: "44px",
+                  height: "44px",
+                  borderRadius: "10px",
+                  border: "none",
+                  background: "rgba(255,255,255,0.12)",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "#ffffff",
+                  flexShrink: 0,
+                  transition: "background-color 0.15s ease",
+                  WebkitTapHighlightColor: "transparent"
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(HamburgerIcon, {})
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          onClick: closeDrawer,
+          style: {
+            position: "fixed",
+            inset: 0,
+            background: "rgba(0,0,0,0.45)",
+            zIndex: 99,
+            opacity: mobileDrawerOpen ? 1 : 0,
+            pointerEvents: mobileDrawerOpen ? "auto" : "none",
+            transition: "opacity 0.3s ease",
+            WebkitTapHighlightColor: "transparent"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "aside",
+        {
+          className,
+          style: {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            bottom: 0,
+            width: "min(85vw, 320px)",
+            background: isDark ? "#1e293b" : "#fff",
+            zIndex: 100,
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden",
+            boxShadow: mobileDrawerOpen ? "4px 0 24px rgba(0,0,0,0.2)" : "none",
+            transform: mobileDrawerOpen ? "translateX(0)" : "translateX(-100%)",
+            transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+            color: isDark ? "#ffffff" : void 0
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "16px 16px 16px 20px",
+              background: "linear-gradient(to bottom left, #3AAE7D, #346D55)",
+              flexShrink: 0
+            }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px", flex: 1, minWidth: 0 }, children: [
+                orgLogo ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: orgLogo,
+                    alt: orgName,
+                    style: {
+                      width: "44px",
+                      height: "44px",
+                      borderRadius: "50%",
+                      objectFit: "cover",
+                      flexShrink: 0,
+                      border: "2px solid rgba(255,255,255,0.3)"
+                    }
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+                  width: "44px",
+                  height: "44px",
+                  borderRadius: "50%",
+                  background: "rgba(255,255,255,0.2)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "#fff",
+                  fontWeight: 700,
+                  fontSize: "16px",
+                  flexShrink: 0
+                }, children: orgName.slice(0, 2) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
+                    color: "#fff",
+                    fontWeight: 700,
+                    fontSize: "15px",
+                    lineHeight: "20px",
+                    margin: 0,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  }, children: orgName }),
+                  orgSubtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
+                    color: "rgba(255,255,255,0.75)",
+                    fontSize: "12px",
+                    lineHeight: "16px",
+                    margin: 0
+                  }, children: orgSubtitle })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: closeDrawer,
+                  "aria-label": "\u0E1B\u0E34\u0E14\u0E40\u0E21\u0E19\u0E39",
+                  style: {
+                    width: "40px",
+                    height: "40px",
+                    borderRadius: "10px",
+                    border: "none",
+                    background: "rgba(255,255,255,0.15)",
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    color: "#ffffff",
+                    flexShrink: 0,
+                    transition: "background-color 0.15s ease",
+                    WebkitTapHighlightColor: "transparent"
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {})
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, overflowY: "auto", minHeight: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+              SidebarMenu,
+              {
+                menuItems,
+                onItemClick: handleMobileNavigate,
+                currentPath,
+                collapsed: false
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flexShrink: 0 }, children: [
+              resolvedBottomMenu && resolvedBottomMenu.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("hr", { style: {
+                  border: "none",
+                  borderTop: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`,
+                  margin: "4px 12px"
+                } }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  SidebarMenu,
+                  {
+                    menuItems: resolvedBottomMenu,
+                    onItemClick: handleMobileNavigate,
+                    currentPath,
+                    collapsed: false
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SidebarUserProfile,
+                {
+                  user,
+                  roleLabel,
+                  onLogout,
+                  onProfile,
+                  collapsed: false
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "aside",
@@ -1100,7 +1381,7 @@ function BellIcon2() {
     }
   ) });
 }
-function HamburgerIcon() {
+function HamburgerIcon2() {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "18", viewBox: "0 0 27 18", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
     {
@@ -1348,11 +1629,8 @@ function UserHeader({
                 isNotifOpen && /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
+                    className: "absolute top-full mt-2 w-[calc(100vw-32px)] max-w-[360px] left-1/2 -translate-x-1/2 md:left-auto md:right-0 md:translate-x-0",
                     style: {
-                      position: "absolute",
-                      right: 0,
-                      marginTop: "8px",
-                      width: "360px",
                       background: isDark ? "#1e293b" : "#fff",
                       borderRadius: "12px",
                       boxShadow: isDark ? "0 10px 40px rgba(0,0,0,0.4)" : "0 10px 40px rgba(0,0,0,0.12)",
@@ -1616,7 +1894,7 @@ function UserHeader({
                   onMouseLeave: (e) => {
                     e.currentTarget.style.backgroundColor = "transparent";
                   },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(HamburgerIcon, {})
+                  children: /* @__PURE__ */ jsxRuntime.jsx(HamburgerIcon2, {})
                 }
               )
             ] })