@gov-components/layout-header-sidebar 1.0.0

package/README.md

@@ -0,0 +1,228 @@
+# Gov Components Layout Header Sidebar
+
+Reusable Header and Sidebar layout components designed for Next.js applications, pre-styled with Tailwind CSS. Perfect for government
+
+## Features
+
+- **Responsive Sidebar**: Automatically collapses on mobile, togglable on desktop.
+- **Notification System**: Built-in notification bell with dropdown list.
+- **User Profile**: Display user avatar, name, and role.
+- **Tailwind CSS**: Beautifully styled using Tailwind utility classes.
+- **TypeScript**: Fully typed for excellent developer experience.
+
+## Requirements
+
+- React 18+
+- Next.js 13+ (App Router recommended)
+- TailwindCSS 3 (Optional, styles are bundled)
+
+## Installation
+
+Install the package via npm:
+
+```bash
+npm install @gov-components/layout-header-sidebar @gov-components/design-tokens
+```
+
+## Setup (Important!)
+
+This library relies on `@gov-components/design-tokens` for styling. Ensure you have imported the design tokens in your **root layout** (usually `app/layout.tsx`):
+
+```tsx
+// app/layout.tsx
+import "@gov-components/design-tokens/dist/tokens-core.css"; // Essential styles
+import "@gov-components/design-tokens/dist/typography.css"; // Fonts & Typo
+// ... other imports
+```
+
+If you are using Next.js Transpile Packages (recommended for avoiding build errors):
+
+```js
+// next.config.ts
+const nextConfig = {
+  transpilePackages: ['@gov-components/layout-header-sidebar', '@gov-components/design-tokens'],
+};
+```
+
+## Usage Guide
+
+### 1. Basic Layout Setup
+
+Combine `Header` and `SharedSidebar` to create a standard dashboard layout.
+
+```tsx
+// app/page.tsx
+'use client';
+
+import { Header, SharedSidebar, toggleSidebar, MenuItem } from '@gov-components/layout-header-sidebar';
+import { useRouter } from 'next/navigation';
+
+export default function Dashboard() {
+    const router = useRouter();
+
+    // 1. Define User Data
+    const user = {
+        firstName: 'John',
+        lastName: 'Doe',
+        pictureUrl: 'https://example.com/avatar.jpg',
+        role: 'ADMIN' // Optional role badge
+    };
+
+    // 2. Define Menu Items
+    const menuItems: MenuItem[] = [
+        {
+            id: 'dashboard',
+            title: 'Dashboard',
+            path: '/dashboard',
+            icon: <span>📊</span> // Can be any React Node (SVG, Icon component)
+        },
+        {
+            id: 'settings',
+            title: 'Settings',
+            path: '/settings',
+            icon: <span>⚙️</span>
+        }
+    ];
+
+    return (
+        <div className="min-h-screen bg-gray-50">
+            {/* Header Component */}
+            <Header 
+                user={user} 
+                sidebarId="main-sidebar" // Must match sidebarId in SharedSidebar
+            />
+
+            {/* Sidebar Component */}
+            <SharedSidebar
+                user={user}
+                menuItems={menuItems}
+                sidebarId="main-sidebar"
+                profilePath="/profile" 
+                roleLabel="Administrator"
+                roleColor="purple" // teal, purple, orange, blue, green
+                onNavigate={(path) => router.push(path)}
+                onLogout={() => console.log('User logged out')}
+            />
+
+            {/* Main Content Area */}
+            <main className="lg:pl-64 pt-20 p-8 transition-all duration-300">
+                <h1>Welcome to Dashboard</h1>
+            </main>
+        </div>
+    );
+}
+```
+
+### 2. Using Notifications
+
+The Header component accepts a `notifications` array to display a dropdown.
+
+```tsx
+import { Header, NotificationItem } from '@gov-components/layout-header-sidebar';
+
+const notifications: NotificationItem[] = [
+    {
+        id: 1,
+        title: 'System Update',
+        description: 'System maintenance scheduled at midnight.',
+        date: '10 mins ago',
+        type: 'info', // 'info' | 'success' | 'reminder'
+        isRead: false
+    },
+    {
+        id: 2,
+        title: 'Task Completed',
+        description: 'Your export task has finished successfully.',
+        date: '1 hour ago',
+        type: 'success',
+        isRead: true
+    }
+];
+
+// In your render:
+<Header 
+    user={user} 
+    notifications={notifications} 
+/>
+```
+
+### 3. Toggling Sidebar Programmatically
+
+You can control the sidebar state from anywhere in your app using the `toggleSidebar` utility.
+
+```tsx
+import { toggleSidebar } from '@gov-components/layout-header-sidebar';
+
+// Toggle default sidebar ('sidebar', 'sidebar-overlay')
+<button onClick={() => toggleSidebar()}>Menu</button>
+
+// Toggle specific sidebar ID
+<button onClick={() => toggleSidebar('main-sidebar')}>Menu</button>
+```
+
+## API Reference
+
+### `<Header />`
+
+Top navigation bar showing user profile, notification bell, and hamburger menu (mobile).
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `user` | `User` | - | User information object. |
+| `notifications` | `NotificationItem[]` | `[]` | List of items for notification dropdown. |
+| `sidebarId` | `string` | `'sidebar'` | ID used to toggle the sidebar. |
+| `overlayId` | `string` | `'sidebar-overlay'` | ID used to toggle the overlay. |
+| `notificationBell` | `ReactNode` | - | Custom component to replace the bell icon. |
+
+### `<SharedSidebar />`
+
+Responsive sidebar navigation with user profile section.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `user` | `User` | - | User information object. |
+| `menuItems` | `MenuItem[]` | `[]` | Array of navigation items. |
+| `onNavigate` | `(path: string) => void` | - | Callback when a menu item is clicked. |
+| `onLogout` | `() => void` | - | Callback when logout button is clicked. |
+| `roleLabel` | `string` | - | Text to display below user name (e.g. "Admin"). |
+| `roleColor` | `string` | `'orange'` | Badge color (`teal`, `blue`, `orange`, `purple`, `green`). |
+| `profilePath` | `string` | - | URL path for the user profile page. |
+| `sidebarId` | `string` | `'sidebar'` | DOM ID for the sidebar container. |
+| `overlayId` | `string` | `'sidebar-overlay'` | DOM ID for the backdrop overlay. |
+
+### Type Definitions
+
+**User**
+```ts
+interface User {
+    firstName?: string;
+    lastName?: string;
+    pictureUrl?: string;
+}
+```
+
+**MenuItem**
+```ts
+interface MenuItem {
+    id: string;
+    title: string;
+    path: string;
+    icon?: React.ReactNode;
+}
+```
+
+**NotificationItem**
+```ts
+interface NotificationItem {
+    id: string | number;
+    title: string;
+    description: string;
+    date: string;
+    type: 'reminder' | 'success' | 'info';
+    isRead?: boolean;
+}
+```
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,92 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface NotificationItem {
+    id: string | number;
+    title: string;
+    description: string;
+    date: string;
+    type: 'info' | 'success' | 'warning' | 'error' | 'reminder';
+    isRead: boolean;
+}
+
+interface MenuItem {
+    id: string;
+    title: string;
+    path: string;
+    icon: React.ReactNode;
+}
+interface MenuListProps {
+    menuItems: MenuItem[];
+    onItemClick: (path: string) => void;
+    itemClassName?: string;
+}
+declare function MenuList({ menuItems, onItemClick, itemClassName }: MenuListProps): react_jsx_runtime.JSX.Element;
+
+interface User$1 {
+    id?: string | number;
+    firstName?: string;
+    lastName?: string;
+    pictureUrl?: string;
+    role?: string;
+}
+interface SharedSidebarProps {
+    user: User$1 | null;
+    menuItems: MenuItem[];
+    sidebarId?: string;
+    overlayId?: string;
+    roleLabel: string;
+    roleColor?: string;
+    onNavigate: (path: string) => void;
+    onLogout: () => void;
+    className?: string;
+    menuItemClassName?: string;
+    logoutButtonClassName?: string;
+    userProfileClassName?: string;
+    userAvatarClassName?: string;
+    userTextClassName?: string;
+}
+declare function SharedSidebar({ user, menuItems, sidebarId, overlayId, roleLabel, roleColor, onNavigate, onLogout, className, menuItemClassName, logoutButtonClassName, userProfileClassName, userAvatarClassName, userTextClassName }: SharedSidebarProps): react_jsx_runtime.JSX.Element;
+
+interface User {
+    id?: string | number;
+    firstName?: string;
+    lastName?: string;
+    pictureUrl?: string;
+    role?: string;
+}
+interface UserProfileProps {
+    user: User | null;
+    roleLabel: string;
+    roleColor?: string;
+    className?: string;
+    avatarClassName?: string;
+    textClassName?: string;
+}
+declare function UserProfile({ user, roleLabel, roleColor, className, avatarClassName, textClassName }: UserProfileProps): react_jsx_runtime.JSX.Element | null;
+
+interface LogoutButtonProps {
+    onLogout: () => void;
+    className?: string;
+}
+declare function LogoutButton({ onLogout, className }: LogoutButtonProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Toggle sidebar visibility (Right side)
+ * @param sidebarId - ID of the sidebar element
+ * @param overlayId - ID of the overlay element
+ */
+declare function toggleSidebar(sidebarId?: string, overlayId?: string): void;
+/**
+ * Close sidebar (Right side)
+ * @param sidebarId - ID of the sidebar element
+ * @param overlayId - ID of the overlay element
+ */
+declare function closeSidebar(sidebarId?: string, overlayId?: string): void;
+/**
+ * Open sidebar (Right side)
+ * @param sidebarId - ID of the sidebar element
+ * @param overlayId - ID of the overlay element
+ */
+declare function openSidebar(sidebarId?: string, overlayId?: string): void;
+
+export { LogoutButton, type MenuItem, MenuList, type NotificationItem, SharedSidebar, UserProfile, closeSidebar, openSidebar, toggleSidebar };

package/dist/index.d.ts

@@ -0,0 +1,92 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface NotificationItem {
+    id: string | number;
+    title: string;
+    description: string;
+    date: string;
+    type: 'info' | 'success' | 'warning' | 'error' | 'reminder';
+    isRead: boolean;
+}
+
+interface MenuItem {
+    id: string;
+    title: string;
+    path: string;
+    icon: React.ReactNode;
+}
+interface MenuListProps {
+    menuItems: MenuItem[];
+    onItemClick: (path: string) => void;
+    itemClassName?: string;
+}
+declare function MenuList({ menuItems, onItemClick, itemClassName }: MenuListProps): react_jsx_runtime.JSX.Element;
+
+interface User$1 {
+    id?: string | number;
+    firstName?: string;
+    lastName?: string;
+    pictureUrl?: string;
+    role?: string;
+}
+interface SharedSidebarProps {
+    user: User$1 | null;
+    menuItems: MenuItem[];
+    sidebarId?: string;
+    overlayId?: string;
+    roleLabel: string;
+    roleColor?: string;
+    onNavigate: (path: string) => void;
+    onLogout: () => void;
+    className?: string;
+    menuItemClassName?: string;
+    logoutButtonClassName?: string;
+    userProfileClassName?: string;
+    userAvatarClassName?: string;
+    userTextClassName?: string;
+}
+declare function SharedSidebar({ user, menuItems, sidebarId, overlayId, roleLabel, roleColor, onNavigate, onLogout, className, menuItemClassName, logoutButtonClassName, userProfileClassName, userAvatarClassName, userTextClassName }: SharedSidebarProps): react_jsx_runtime.JSX.Element;
+
+interface User {
+    id?: string | number;
+    firstName?: string;
+    lastName?: string;
+    pictureUrl?: string;
+    role?: string;
+}
+interface UserProfileProps {
+    user: User | null;
+    roleLabel: string;
+    roleColor?: string;
+    className?: string;
+    avatarClassName?: string;
+    textClassName?: string;
+}
+declare function UserProfile({ user, roleLabel, roleColor, className, avatarClassName, textClassName }: UserProfileProps): react_jsx_runtime.JSX.Element | null;
+
+interface LogoutButtonProps {
+    onLogout: () => void;
+    className?: string;
+}
+declare function LogoutButton({ onLogout, className }: LogoutButtonProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Toggle sidebar visibility (Right side)
+ * @param sidebarId - ID of the sidebar element
+ * @param overlayId - ID of the overlay element
+ */
+declare function toggleSidebar(sidebarId?: string, overlayId?: string): void;
+/**
+ * Close sidebar (Right side)
+ * @param sidebarId - ID of the sidebar element
+ * @param overlayId - ID of the overlay element
+ */
+declare function closeSidebar(sidebarId?: string, overlayId?: string): void;
+/**
+ * Open sidebar (Right side)
+ * @param sidebarId - ID of the sidebar element
+ * @param overlayId - ID of the overlay element
+ */
+declare function openSidebar(sidebarId?: string, overlayId?: string): void;
+
+export { LogoutButton, type MenuItem, MenuList, type NotificationItem, SharedSidebar, UserProfile, closeSidebar, openSidebar, toggleSidebar };

package/dist/index.js

@@ -0,0 +1,214 @@
+'use strict';
+
+require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/header/Header.tsx
+
+// src/sidebar/utils.ts
+function toggleSidebar(sidebarId = "sidebar", overlayId = "sidebar-overlay") {
+  const sidebar = document.getElementById(sidebarId);
+  const overlay = document.getElementById(overlayId);
+  if (sidebar && overlay) {
+    const isOpen = sidebar.classList.contains("translate-x-0");
+    if (isOpen) {
+      sidebar.classList.remove("translate-x-0");
+      sidebar.classList.add("translate-x-full");
+      overlay.classList.add("hidden");
+    } else {
+      sidebar.classList.remove("translate-x-full");
+      sidebar.classList.add("translate-x-0");
+      overlay.classList.remove("hidden");
+    }
+  }
+}
+function closeSidebar(sidebarId = "sidebar", overlayId = "sidebar-overlay") {
+  const sidebar = document.getElementById(sidebarId);
+  const overlay = document.getElementById(overlayId);
+  if (sidebar) {
+    sidebar.classList.remove("translate-x-0");
+    sidebar.classList.add("translate-x-full");
+  }
+  if (overlay) {
+    overlay.classList.add("hidden");
+  }
+}
+function openSidebar(sidebarId = "sidebar", overlayId = "sidebar-overlay") {
+  const sidebar = document.getElementById(sidebarId);
+  const overlay = document.getElementById(overlayId);
+  if (sidebar) {
+    sidebar.classList.remove("translate-x-full");
+    sidebar.classList.add("translate-x-0");
+  }
+  if (overlay) {
+    overlay.classList.remove("hidden");
+  }
+}
+function UserProfile({
+  user,
+  roleLabel,
+  roleColor = "orange",
+  className = "",
+  avatarClassName = "",
+  textClassName = ""
+}) {
+  if (!user) return null;
+  const getFullName = () => {
+    if (user.firstName && user.lastName) {
+      return `${user.firstName} ${user.lastName}`;
+    }
+    return user.firstName || user.lastName || "\u0E1C\u0E39\u0E49\u0E43\u0E0A\u0E49";
+  };
+  const getInitial = () => {
+    return user.firstName?.charAt(0) || user.lastName?.charAt(0) || "?";
+  };
+  const getRoleColorClass = () => {
+    const colors = {
+      orange: "bg-orange-500",
+      teal: "bg-teal-500",
+      blue: "bg-blue-500",
+      green: "bg-green-500",
+      purple: "bg-purple-500"
+    };
+    return colors[roleColor] || "bg-orange-500";
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `p-5 border-b border-gray-200 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+    user.pictureUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: user.pictureUrl,
+        alt: getFullName(),
+        width: 56,
+        height: 56,
+        className: `w-14 h-14 rounded-full shadow-lg object-cover ${avatarClassName}`
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-14 h-14 bg-gradient-to-br from-teal-400 to-teal-600 rounded-full flex items-center justify-center text-white font-bold shadow-lg text-xl ${avatarClassName}`, children: getInitial() }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex-1 min-w-0 ${textClassName}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-bold text-gray-900 truncate text-base", children: getFullName() }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-500 flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `w-2 h-2 ${getRoleColorClass()} rounded-full` }),
+        roleLabel
+      ] })
+    ] })
+  ] }) });
+}
+function MenuList({ menuItems, onItemClick, itemClassName = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex-1 p-5 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-1", children: menuItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      onClick: () => onItemClick(item.path),
+      className: `w-full flex items-center gap-4 px-4 py-3.5 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors ${itemClassName}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 flex items-center justify-center text-gray-600 flex-shrink-0", children: item.icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left font-medium text-base", children: item.title })
+      ]
+    }
+  ) }, item.id)) }) });
+}
+function LogoutButton({ onLogout, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5 border-t border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      onClick: onLogout,
+      className: `w-full flex items-center gap-4 px-4 py-3.5 rounded-lg text-red-600 hover:bg-red-50 transition-colors ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left font-medium text-base", children: "\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E23\u0E30\u0E1A\u0E1A" })
+      ]
+    }
+  ) });
+}
+function SharedSidebar({
+  user,
+  menuItems,
+  sidebarId = "sidebar",
+  overlayId = "sidebar-overlay",
+  roleLabel,
+  roleColor = "orange",
+  onNavigate,
+  onLogout,
+  // Styles
+  className = "",
+  menuItemClassName = "",
+  logoutButtonClassName = "",
+  userProfileClassName = "",
+  userAvatarClassName = "",
+  userTextClassName = ""
+}) {
+  const closeSidebar2 = () => {
+    const sidebar = document.getElementById(sidebarId);
+    if (sidebar) {
+      sidebar.classList.add("translate-x-full");
+      sidebar.classList.remove("translate-x-0");
+    }
+    const overlay = document.getElementById(overlayId);
+    if (overlay) {
+      overlay.classList.add("hidden");
+    }
+  };
+  const handleMenuItemClick = (path) => {
+    onNavigate(path);
+    closeSidebar2();
+  };
+  const handleLogout = () => {
+    closeSidebar2();
+    onLogout();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        id: overlayId,
+        className: "fixed inset-0 bg-black/50 z-40 hidden",
+        onClick: closeSidebar2
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "aside",
+      {
+        id: sidebarId,
+        className: `fixed top-0 right-0 h-full w-[80vw] max-w-80 bg-white shadow-2xl z-50 transform translate-x-full transition-transform duration-300 flex flex-col ${className}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            UserProfile,
+            {
+              user,
+              roleLabel,
+              roleColor,
+              className: userProfileClassName,
+              avatarClassName: userAvatarClassName,
+              textClassName: userTextClassName
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            MenuList,
+            {
+              menuItems,
+              onItemClick: handleMenuItemClick,
+              itemClassName: menuItemClassName
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(LogoutButton, { onLogout: handleLogout, className: logoutButtonClassName })
+        ]
+      }
+    )
+  ] });
+}
+
+exports.LogoutButton = LogoutButton;
+exports.MenuList = MenuList;
+exports.SharedSidebar = SharedSidebar;
+exports.UserProfile = UserProfile;
+exports.closeSidebar = closeSidebar;
+exports.openSidebar = openSidebar;
+exports.toggleSidebar = toggleSidebar;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/sidebar/utils.ts","../src/sidebar/UserProfile.tsx","../src/sidebar/MenuList.tsx","../src/sidebar/LogoutButton.tsx","../src/sidebar/SharedSidebar.tsx"],"names":["jsx","jsxs","closeSidebar","Fragment"],"mappings":"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","file":"index.js","sourcesContent":["/**\r\n * Toggle sidebar visibility (Right side)\r\n * @param sidebarId - ID of the sidebar element\r\n * @param overlayId - ID of the overlay element\r\n */\r\nexport function toggleSidebar(sidebarId: string = 'sidebar', overlayId: string = 'sidebar-overlay') {\r\n    const sidebar = document.getElementById(sidebarId);\r\n    const overlay = document.getElementById(overlayId);\r\n\r\n    if (sidebar && overlay) {\r\n        const isOpen = sidebar.classList.contains('translate-x-0');\r\n\r\n        if (isOpen) {\r\n            // Close sidebar (slide to right)\r\n            sidebar.classList.remove('translate-x-0');\r\n            sidebar.classList.add('translate-x-full');\r\n            overlay.classList.add('hidden');\r\n        } else {\r\n            // Open sidebar (slide from right)\r\n            sidebar.classList.remove('translate-x-full');\r\n            sidebar.classList.add('translate-x-0');\r\n            overlay.classList.remove('hidden');\r\n        }\r\n    }\r\n}\r\n\r\n/**\r\n * Close sidebar (Right side)\r\n * @param sidebarId - ID of the sidebar element\r\n * @param overlayId - ID of the overlay element\r\n */\r\nexport function closeSidebar(sidebarId: string = 'sidebar', overlayId: string = 'sidebar-overlay') {\r\n    const sidebar = document.getElementById(sidebarId);\r\n    const overlay = document.getElementById(overlayId);\r\n\r\n    if (sidebar) {\r\n        sidebar.classList.remove('translate-x-0');\r\n        sidebar.classList.add('translate-x-full');\r\n    }\r\n\r\n    if (overlay) {\r\n        overlay.classList.add('hidden');\r\n    }\r\n}\r\n\r\n/**\r\n * Open sidebar (Right side)\r\n * @param sidebarId - ID of the sidebar element\r\n * @param overlayId - ID of the overlay element\r\n */\r\nexport function openSidebar(sidebarId: string = 'sidebar', overlayId: string = 'sidebar-overlay') {\r\n    const sidebar = document.getElementById(sidebarId);\r\n    const overlay = document.getElementById(overlayId);\r\n\r\n    if (sidebar) {\r\n        sidebar.classList.remove('translate-x-full');\r\n        sidebar.classList.add('translate-x-0');\r\n    }\r\n\r\n    if (overlay) {\r\n        overlay.classList.remove('hidden');\r\n    }\r\n}\r\n","'use client';\r\n\r\ninterface User {\r\n    id?: string | number;\r\n    firstName?: string;\r\n    lastName?: string;\r\n    pictureUrl?: string;\r\n    role?: string;\r\n}\r\n\r\ninterface UserProfileProps {\r\n    user: User | null;\r\n    roleLabel: string;\r\n    roleColor?: string;\r\n    // Styling\r\n    className?: string;\r\n    avatarClassName?: string;\r\n    textClassName?: string;\r\n}\r\n\r\nexport default function UserProfile({\r\n    user,\r\n    roleLabel,\r\n    roleColor = 'orange',\r\n    className = '',\r\n    avatarClassName = '',\r\n    textClassName = ''\r\n}: UserProfileProps) {\r\n    if (!user) return null;\r\n\r\n    const getFullName = () => {\r\n        if (user.firstName && user.lastName) {\r\n            return `${user.firstName} ${user.lastName}`;\r\n        }\r\n        return user.firstName || user.lastName || 'ผู้ใช้';\r\n    };\r\n\r\n    const getInitial = () => {\r\n        return user.firstName?.charAt(0) || user.lastName?.charAt(0) || '?';\r\n    };\r\n\r\n    const getRoleColorClass = () => {\r\n        const colors: Record<string, string> = {\r\n            orange: 'bg-orange-500',\r\n            teal: 'bg-teal-500',\r\n            blue: 'bg-blue-500',\r\n            green: 'bg-green-500',\r\n            purple: 'bg-purple-500',\r\n        };\r\n        return colors[roleColor] || 'bg-orange-500';\r\n    };\r\n\r\n    return (\r\n        <div className={`p-5 border-b border-gray-200 ${className}`}>\r\n            <div className=\"flex items-center gap-3\">\r\n                {user.pictureUrl ? (\r\n                    <img\r\n                        src={user.pictureUrl}\r\n                        alt={getFullName()}\r\n                        width={56}\r\n                        height={56}\r\n                        className={`w-14 h-14 rounded-full shadow-lg object-cover ${avatarClassName}`}\r\n                    />\r\n                ) : (\r\n                    <div className={`w-14 h-14 bg-gradient-to-br from-teal-400 to-teal-600 rounded-full flex items-center justify-center text-white font-bold shadow-lg text-xl ${avatarClassName}`}>\r\n                        {getInitial()}\r\n                    </div>\r\n                )}\r\n                <div className={`flex-1 min-w-0 ${textClassName}`}>\r\n                    <p className=\"font-bold text-gray-900 truncate text-base\">\r\n                        {getFullName()}\r\n                    </p>\r\n                    <p className=\"text-sm text-gray-500 flex items-center gap-1\">\r\n                        <span className={`w-2 h-2 ${getRoleColorClass()} rounded-full`}></span>\r\n                        {roleLabel}\r\n                    </p>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    );\r\n}\r\n","'use client';\r\n\r\nexport interface MenuItem {\r\n    id: string;\r\n    title: string;\r\n    path: string;\r\n    icon: React.ReactNode;\r\n}\r\n\r\ninterface MenuListProps {\r\n    menuItems: MenuItem[];\r\n    onItemClick: (path: string) => void;\r\n    itemClassName?: string;\r\n}\r\n\r\nexport default function MenuList({ menuItems, onItemClick, itemClassName = '' }: MenuListProps) {\r\n    return (\r\n        <nav className=\"flex-1 p-5 overflow-y-auto\">\r\n            <ul className=\"space-y-1\">\r\n                {menuItems.map((item) => (\r\n                    <li key={item.id}>\r\n                        <button\r\n                            onClick={() => onItemClick(item.path)}\r\n                            className={`w-full flex items-center gap-4 px-4 py-3.5 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors ${itemClassName}`}\r\n                        >\r\n                            <div className=\"w-8 h-8 flex items-center justify-center text-gray-600 flex-shrink-0\">{item.icon}</div>\r\n                            <span className=\"flex-1 text-left font-medium text-base\">\r\n                                {item.title}\r\n                            </span>\r\n                        </button>\r\n                    </li>\r\n                ))}\r\n            </ul>\r\n        </nav>\r\n    );\r\n}\r\n","'use client';\r\n\r\ninterface LogoutButtonProps {\r\n    onLogout: () => void;\r\n    className?: string;\r\n}\r\n\r\nexport default function LogoutButton({ onLogout, className = '' }: LogoutButtonProps) {\r\n    return (\r\n        <div className=\"p-5 border-t border-gray-200\">\r\n            <button\r\n                onClick={onLogout}\r\n                className={`w-full flex items-center gap-4 px-4 py-3.5 rounded-lg text-red-600 hover:bg-red-50 transition-colors ${className}`}\r\n            >\r\n                <svg className=\"w-5 h-5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\r\n                    <path\r\n                        strokeLinecap=\"round\"\r\n                        strokeLinejoin=\"round\"\r\n                        strokeWidth={2}\r\n                        d=\"M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1\"\r\n                    />\r\n                </svg>\r\n                <span className=\"flex-1 text-left font-medium text-base\">ออกจากระบบ</span>\r\n            </button>\r\n        </div>\r\n    );\r\n}\r\n","'use client';\r\n\r\nimport UserProfile from './UserProfile';\r\n\r\nimport MenuList from './MenuList';\r\nimport LogoutButton from './LogoutButton';\r\nimport type { MenuItem } from './MenuList';\r\n\r\ninterface User {\r\n    id?: string | number;\r\n    firstName?: string;\r\n    lastName?: string;\r\n    pictureUrl?: string;\r\n    role?: string;\r\n}\r\n\r\ninterface SharedSidebarProps {\r\n    user: User | null;\r\n    menuItems: MenuItem[];\r\n    sidebarId?: string;\r\n    overlayId?: string;\r\n\r\n    roleLabel: string;\r\n    roleColor?: string;\r\n    onNavigate: (path: string) => void;\r\n    onLogout: () => void;\r\n    // Customization Props\r\n    className?: string; // Sidebar container\r\n    menuItemClassName?: string;\r\n    logoutButtonClassName?: string;\r\n    // UserProfile Customization via Sidebar\r\n    userProfileClassName?: string;\r\n    userAvatarClassName?: string;\r\n    userTextClassName?: string;\r\n}\r\n\r\nexport default function SharedSidebar({\r\n    user,\r\n    menuItems,\r\n    sidebarId = 'sidebar',\r\n    overlayId = 'sidebar-overlay',\r\n\r\n    roleLabel,\r\n    roleColor = 'orange',\r\n    onNavigate,\r\n    onLogout,\r\n    // Styles\r\n    className = '',\r\n    menuItemClassName = '',\r\n    logoutButtonClassName = '',\r\n    userProfileClassName = '',\r\n    userAvatarClassName = '',\r\n    userTextClassName = ''\r\n}: SharedSidebarProps) {\r\n\r\n    const closeSidebar = () => {\r\n        const sidebar = document.getElementById(sidebarId);\r\n        if (sidebar) {\r\n            sidebar.classList.add('translate-x-full');\r\n            sidebar.classList.remove('translate-x-0');\r\n        }\r\n        const overlay = document.getElementById(overlayId);\r\n        if (overlay) {\r\n            overlay.classList.add('hidden');\r\n        }\r\n    };\r\n\r\n    const handleMenuItemClick = (path: string) => {\r\n        onNavigate(path);\r\n        closeSidebar();\r\n    };\r\n\r\n    const handleLogout = () => {\r\n        closeSidebar();\r\n        onLogout();\r\n    };\r\n\r\n    return (\r\n        <>\r\n            {/* Overlay */}\r\n            <div\r\n                id={overlayId}\r\n                className=\"fixed inset-0 bg-black/50 z-40 hidden\"\r\n                onClick={closeSidebar}\r\n            />\r\n\r\n            {/* Sidebar - Hidden by default, opened via toggle button in header */}\r\n            <aside\r\n                id={sidebarId}\r\n                className={`fixed top-0 right-0 h-full w-[80vw] max-w-80 bg-white shadow-2xl z-50 transform translate-x-full transition-transform duration-300 flex flex-col ${className}`}>\r\n\r\n                {/* User Profile Section */}\r\n                <UserProfile\r\n                    user={user}\r\n                    roleLabel={roleLabel}\r\n                    roleColor={roleColor}\r\n                    className={userProfileClassName}\r\n                    avatarClassName={userAvatarClassName}\r\n                    textClassName={userTextClassName}\r\n                />\r\n\r\n                {/* Menu Items */}\r\n                <MenuList\r\n                    menuItems={menuItems}\r\n                    onItemClick={handleMenuItemClick}\r\n                    itemClassName={menuItemClassName}\r\n                />\r\n\r\n                {/* Logout Button */}\r\n                <LogoutButton onLogout={handleLogout} className={logoutButtonClassName} />\r\n            </aside>\r\n        </>\r\n    );\r\n}\r\n\r\n// Re-export MenuItem type for convenience\r\nexport type { MenuItem };\r\n"]}

package/dist/index.mjs

@@ -0,0 +1,206 @@
+import 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/header/Header.tsx
+
+// src/sidebar/utils.ts
+function toggleSidebar(sidebarId = "sidebar", overlayId = "sidebar-overlay") {
+  const sidebar = document.getElementById(sidebarId);
+  const overlay = document.getElementById(overlayId);
+  if (sidebar && overlay) {
+    const isOpen = sidebar.classList.contains("translate-x-0");
+    if (isOpen) {
+      sidebar.classList.remove("translate-x-0");
+      sidebar.classList.add("translate-x-full");
+      overlay.classList.add("hidden");
+    } else {
+      sidebar.classList.remove("translate-x-full");
+      sidebar.classList.add("translate-x-0");
+      overlay.classList.remove("hidden");
+    }
+  }
+}
+function closeSidebar(sidebarId = "sidebar", overlayId = "sidebar-overlay") {
+  const sidebar = document.getElementById(sidebarId);
+  const overlay = document.getElementById(overlayId);
+  if (sidebar) {
+    sidebar.classList.remove("translate-x-0");
+    sidebar.classList.add("translate-x-full");
+  }
+  if (overlay) {
+    overlay.classList.add("hidden");
+  }
+}
+function openSidebar(sidebarId = "sidebar", overlayId = "sidebar-overlay") {
+  const sidebar = document.getElementById(sidebarId);
+  const overlay = document.getElementById(overlayId);
+  if (sidebar) {
+    sidebar.classList.remove("translate-x-full");
+    sidebar.classList.add("translate-x-0");
+  }
+  if (overlay) {
+    overlay.classList.remove("hidden");
+  }
+}
+function UserProfile({
+  user,
+  roleLabel,
+  roleColor = "orange",
+  className = "",
+  avatarClassName = "",
+  textClassName = ""
+}) {
+  if (!user) return null;
+  const getFullName = () => {
+    if (user.firstName && user.lastName) {
+      return `${user.firstName} ${user.lastName}`;
+    }
+    return user.firstName || user.lastName || "\u0E1C\u0E39\u0E49\u0E43\u0E0A\u0E49";
+  };
+  const getInitial = () => {
+    return user.firstName?.charAt(0) || user.lastName?.charAt(0) || "?";
+  };
+  const getRoleColorClass = () => {
+    const colors = {
+      orange: "bg-orange-500",
+      teal: "bg-teal-500",
+      blue: "bg-blue-500",
+      green: "bg-green-500",
+      purple: "bg-purple-500"
+    };
+    return colors[roleColor] || "bg-orange-500";
+  };
+  return /* @__PURE__ */ jsx("div", { className: `p-5 border-b border-gray-200 ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    user.pictureUrl ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: user.pictureUrl,
+        alt: getFullName(),
+        width: 56,
+        height: 56,
+        className: `w-14 h-14 rounded-full shadow-lg object-cover ${avatarClassName}`
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: `w-14 h-14 bg-gradient-to-br from-teal-400 to-teal-600 rounded-full flex items-center justify-center text-white font-bold shadow-lg text-xl ${avatarClassName}`, children: getInitial() }),
+    /* @__PURE__ */ jsxs("div", { className: `flex-1 min-w-0 ${textClassName}`, children: [
+      /* @__PURE__ */ jsx("p", { className: "font-bold text-gray-900 truncate text-base", children: getFullName() }),
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: `w-2 h-2 ${getRoleColorClass()} rounded-full` }),
+        roleLabel
+      ] })
+    ] })
+  ] }) });
+}
+function MenuList({ menuItems, onItemClick, itemClassName = "" }) {
+  return /* @__PURE__ */ jsx("nav", { className: "flex-1 p-5 overflow-y-auto", children: /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: menuItems.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: () => onItemClick(item.path),
+      className: `w-full flex items-center gap-4 px-4 py-3.5 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors ${itemClassName}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "w-8 h-8 flex items-center justify-center text-gray-600 flex-shrink-0", children: item.icon }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 text-left font-medium text-base", children: item.title })
+      ]
+    }
+  ) }, item.id)) }) });
+}
+function LogoutButton({ onLogout, className = "" }) {
+  return /* @__PURE__ */ jsx("div", { className: "p-5 border-t border-gray-200", children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: onLogout,
+      className: `w-full flex items-center gap-4 px-4 py-3.5 rounded-lg text-red-600 hover:bg-red-50 transition-colors ${className}`,
+      children: [
+        /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 text-left font-medium text-base", children: "\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E23\u0E30\u0E1A\u0E1A" })
+      ]
+    }
+  ) });
+}
+function SharedSidebar({
+  user,
+  menuItems,
+  sidebarId = "sidebar",
+  overlayId = "sidebar-overlay",
+  roleLabel,
+  roleColor = "orange",
+  onNavigate,
+  onLogout,
+  // Styles
+  className = "",
+  menuItemClassName = "",
+  logoutButtonClassName = "",
+  userProfileClassName = "",
+  userAvatarClassName = "",
+  userTextClassName = ""
+}) {
+  const closeSidebar2 = () => {
+    const sidebar = document.getElementById(sidebarId);
+    if (sidebar) {
+      sidebar.classList.add("translate-x-full");
+      sidebar.classList.remove("translate-x-0");
+    }
+    const overlay = document.getElementById(overlayId);
+    if (overlay) {
+      overlay.classList.add("hidden");
+    }
+  };
+  const handleMenuItemClick = (path) => {
+    onNavigate(path);
+    closeSidebar2();
+  };
+  const handleLogout = () => {
+    closeSidebar2();
+    onLogout();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: overlayId,
+        className: "fixed inset-0 bg-black/50 z-40 hidden",
+        onClick: closeSidebar2
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        id: sidebarId,
+        className: `fixed top-0 right-0 h-full w-[80vw] max-w-80 bg-white shadow-2xl z-50 transform translate-x-full transition-transform duration-300 flex flex-col ${className}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            UserProfile,
+            {
+              user,
+              roleLabel,
+              roleColor,
+              className: userProfileClassName,
+              avatarClassName: userAvatarClassName,
+              textClassName: userTextClassName
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MenuList,
+            {
+              menuItems,
+              onItemClick: handleMenuItemClick,
+              itemClassName: menuItemClassName
+            }
+          ),
+          /* @__PURE__ */ jsx(LogoutButton, { onLogout: handleLogout, className: logoutButtonClassName })
+        ]
+      }
+    )
+  ] });
+}
+
+export { LogoutButton, MenuList, SharedSidebar, UserProfile, closeSidebar, openSidebar, toggleSidebar };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/sidebar/utils.ts","../src/sidebar/UserProfile.tsx","../src/sidebar/MenuList.tsx","../src/sidebar/LogoutButton.tsx","../src/sidebar/SharedSidebar.tsx"],"names":["jsx","jsxs","closeSidebar"],"mappings":"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","file":"index.mjs","sourcesContent":["/**\r\n * Toggle sidebar visibility (Right side)\r\n * @param sidebarId - ID of the sidebar element\r\n * @param overlayId - ID of the overlay element\r\n */\r\nexport function toggleSidebar(sidebarId: string = 'sidebar', overlayId: string = 'sidebar-overlay') {\r\n    const sidebar = document.getElementById(sidebarId);\r\n    const overlay = document.getElementById(overlayId);\r\n\r\n    if (sidebar && overlay) {\r\n        const isOpen = sidebar.classList.contains('translate-x-0');\r\n\r\n        if (isOpen) {\r\n            // Close sidebar (slide to right)\r\n            sidebar.classList.remove('translate-x-0');\r\n            sidebar.classList.add('translate-x-full');\r\n            overlay.classList.add('hidden');\r\n        } else {\r\n            // Open sidebar (slide from right)\r\n            sidebar.classList.remove('translate-x-full');\r\n            sidebar.classList.add('translate-x-0');\r\n            overlay.classList.remove('hidden');\r\n        }\r\n    }\r\n}\r\n\r\n/**\r\n * Close sidebar (Right side)\r\n * @param sidebarId - ID of the sidebar element\r\n * @param overlayId - ID of the overlay element\r\n */\r\nexport function closeSidebar(sidebarId: string = 'sidebar', overlayId: string = 'sidebar-overlay') {\r\n    const sidebar = document.getElementById(sidebarId);\r\n    const overlay = document.getElementById(overlayId);\r\n\r\n    if (sidebar) {\r\n        sidebar.classList.remove('translate-x-0');\r\n        sidebar.classList.add('translate-x-full');\r\n    }\r\n\r\n    if (overlay) {\r\n        overlay.classList.add('hidden');\r\n    }\r\n}\r\n\r\n/**\r\n * Open sidebar (Right side)\r\n * @param sidebarId - ID of the sidebar element\r\n * @param overlayId - ID of the overlay element\r\n */\r\nexport function openSidebar(sidebarId: string = 'sidebar', overlayId: string = 'sidebar-overlay') {\r\n    const sidebar = document.getElementById(sidebarId);\r\n    const overlay = document.getElementById(overlayId);\r\n\r\n    if (sidebar) {\r\n        sidebar.classList.remove('translate-x-full');\r\n        sidebar.classList.add('translate-x-0');\r\n    }\r\n\r\n    if (overlay) {\r\n        overlay.classList.remove('hidden');\r\n    }\r\n}\r\n","'use client';\r\n\r\ninterface User {\r\n    id?: string | number;\r\n    firstName?: string;\r\n    lastName?: string;\r\n    pictureUrl?: string;\r\n    role?: string;\r\n}\r\n\r\ninterface UserProfileProps {\r\n    user: User | null;\r\n    roleLabel: string;\r\n    roleColor?: string;\r\n    // Styling\r\n    className?: string;\r\n    avatarClassName?: string;\r\n    textClassName?: string;\r\n}\r\n\r\nexport default function UserProfile({\r\n    user,\r\n    roleLabel,\r\n    roleColor = 'orange',\r\n    className = '',\r\n    avatarClassName = '',\r\n    textClassName = ''\r\n}: UserProfileProps) {\r\n    if (!user) return null;\r\n\r\n    const getFullName = () => {\r\n        if (user.firstName && user.lastName) {\r\n            return `${user.firstName} ${user.lastName}`;\r\n        }\r\n        return user.firstName || user.lastName || 'ผู้ใช้';\r\n    };\r\n\r\n    const getInitial = () => {\r\n        return user.firstName?.charAt(0) || user.lastName?.charAt(0) || '?';\r\n    };\r\n\r\n    const getRoleColorClass = () => {\r\n        const colors: Record<string, string> = {\r\n            orange: 'bg-orange-500',\r\n            teal: 'bg-teal-500',\r\n            blue: 'bg-blue-500',\r\n            green: 'bg-green-500',\r\n            purple: 'bg-purple-500',\r\n        };\r\n        return colors[roleColor] || 'bg-orange-500';\r\n    };\r\n\r\n    return (\r\n        <div className={`p-5 border-b border-gray-200 ${className}`}>\r\n            <div className=\"flex items-center gap-3\">\r\n                {user.pictureUrl ? (\r\n                    <img\r\n                        src={user.pictureUrl}\r\n                        alt={getFullName()}\r\n                        width={56}\r\n                        height={56}\r\n                        className={`w-14 h-14 rounded-full shadow-lg object-cover ${avatarClassName}`}\r\n                    />\r\n                ) : (\r\n                    <div className={`w-14 h-14 bg-gradient-to-br from-teal-400 to-teal-600 rounded-full flex items-center justify-center text-white font-bold shadow-lg text-xl ${avatarClassName}`}>\r\n                        {getInitial()}\r\n                    </div>\r\n                )}\r\n                <div className={`flex-1 min-w-0 ${textClassName}`}>\r\n                    <p className=\"font-bold text-gray-900 truncate text-base\">\r\n                        {getFullName()}\r\n                    </p>\r\n                    <p className=\"text-sm text-gray-500 flex items-center gap-1\">\r\n                        <span className={`w-2 h-2 ${getRoleColorClass()} rounded-full`}></span>\r\n                        {roleLabel}\r\n                    </p>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    );\r\n}\r\n","'use client';\r\n\r\nexport interface MenuItem {\r\n    id: string;\r\n    title: string;\r\n    path: string;\r\n    icon: React.ReactNode;\r\n}\r\n\r\ninterface MenuListProps {\r\n    menuItems: MenuItem[];\r\n    onItemClick: (path: string) => void;\r\n    itemClassName?: string;\r\n}\r\n\r\nexport default function MenuList({ menuItems, onItemClick, itemClassName = '' }: MenuListProps) {\r\n    return (\r\n        <nav className=\"flex-1 p-5 overflow-y-auto\">\r\n            <ul className=\"space-y-1\">\r\n                {menuItems.map((item) => (\r\n                    <li key={item.id}>\r\n                        <button\r\n                            onClick={() => onItemClick(item.path)}\r\n                            className={`w-full flex items-center gap-4 px-4 py-3.5 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors ${itemClassName}`}\r\n                        >\r\n                            <div className=\"w-8 h-8 flex items-center justify-center text-gray-600 flex-shrink-0\">{item.icon}</div>\r\n                            <span className=\"flex-1 text-left font-medium text-base\">\r\n                                {item.title}\r\n                            </span>\r\n                        </button>\r\n                    </li>\r\n                ))}\r\n            </ul>\r\n        </nav>\r\n    );\r\n}\r\n","'use client';\r\n\r\ninterface LogoutButtonProps {\r\n    onLogout: () => void;\r\n    className?: string;\r\n}\r\n\r\nexport default function LogoutButton({ onLogout, className = '' }: LogoutButtonProps) {\r\n    return (\r\n        <div className=\"p-5 border-t border-gray-200\">\r\n            <button\r\n                onClick={onLogout}\r\n                className={`w-full flex items-center gap-4 px-4 py-3.5 rounded-lg text-red-600 hover:bg-red-50 transition-colors ${className}`}\r\n            >\r\n                <svg className=\"w-5 h-5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\r\n                    <path\r\n                        strokeLinecap=\"round\"\r\n                        strokeLinejoin=\"round\"\r\n                        strokeWidth={2}\r\n                        d=\"M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1\"\r\n                    />\r\n                </svg>\r\n                <span className=\"flex-1 text-left font-medium text-base\">ออกจากระบบ</span>\r\n            </button>\r\n        </div>\r\n    );\r\n}\r\n","'use client';\r\n\r\nimport UserProfile from './UserProfile';\r\n\r\nimport MenuList from './MenuList';\r\nimport LogoutButton from './LogoutButton';\r\nimport type { MenuItem } from './MenuList';\r\n\r\ninterface User {\r\n    id?: string | number;\r\n    firstName?: string;\r\n    lastName?: string;\r\n    pictureUrl?: string;\r\n    role?: string;\r\n}\r\n\r\ninterface SharedSidebarProps {\r\n    user: User | null;\r\n    menuItems: MenuItem[];\r\n    sidebarId?: string;\r\n    overlayId?: string;\r\n\r\n    roleLabel: string;\r\n    roleColor?: string;\r\n    onNavigate: (path: string) => void;\r\n    onLogout: () => void;\r\n    // Customization Props\r\n    className?: string; // Sidebar container\r\n    menuItemClassName?: string;\r\n    logoutButtonClassName?: string;\r\n    // UserProfile Customization via Sidebar\r\n    userProfileClassName?: string;\r\n    userAvatarClassName?: string;\r\n    userTextClassName?: string;\r\n}\r\n\r\nexport default function SharedSidebar({\r\n    user,\r\n    menuItems,\r\n    sidebarId = 'sidebar',\r\n    overlayId = 'sidebar-overlay',\r\n\r\n    roleLabel,\r\n    roleColor = 'orange',\r\n    onNavigate,\r\n    onLogout,\r\n    // Styles\r\n    className = '',\r\n    menuItemClassName = '',\r\n    logoutButtonClassName = '',\r\n    userProfileClassName = '',\r\n    userAvatarClassName = '',\r\n    userTextClassName = ''\r\n}: SharedSidebarProps) {\r\n\r\n    const closeSidebar = () => {\r\n        const sidebar = document.getElementById(sidebarId);\r\n        if (sidebar) {\r\n            sidebar.classList.add('translate-x-full');\r\n            sidebar.classList.remove('translate-x-0');\r\n        }\r\n        const overlay = document.getElementById(overlayId);\r\n        if (overlay) {\r\n            overlay.classList.add('hidden');\r\n        }\r\n    };\r\n\r\n    const handleMenuItemClick = (path: string) => {\r\n        onNavigate(path);\r\n        closeSidebar();\r\n    };\r\n\r\n    const handleLogout = () => {\r\n        closeSidebar();\r\n        onLogout();\r\n    };\r\n\r\n    return (\r\n        <>\r\n            {/* Overlay */}\r\n            <div\r\n                id={overlayId}\r\n                className=\"fixed inset-0 bg-black/50 z-40 hidden\"\r\n                onClick={closeSidebar}\r\n            />\r\n\r\n            {/* Sidebar - Hidden by default, opened via toggle button in header */}\r\n            <aside\r\n                id={sidebarId}\r\n                className={`fixed top-0 right-0 h-full w-[80vw] max-w-80 bg-white shadow-2xl z-50 transform translate-x-full transition-transform duration-300 flex flex-col ${className}`}>\r\n\r\n                {/* User Profile Section */}\r\n                <UserProfile\r\n                    user={user}\r\n                    roleLabel={roleLabel}\r\n                    roleColor={roleColor}\r\n                    className={userProfileClassName}\r\n                    avatarClassName={userAvatarClassName}\r\n                    textClassName={userTextClassName}\r\n                />\r\n\r\n                {/* Menu Items */}\r\n                <MenuList\r\n                    menuItems={menuItems}\r\n                    onItemClick={handleMenuItemClick}\r\n                    itemClassName={menuItemClassName}\r\n                />\r\n\r\n                {/* Logout Button */}\r\n                <LogoutButton onLogout={handleLogout} className={logoutButtonClassName} />\r\n            </aside>\r\n        </>\r\n    );\r\n}\r\n\r\n// Re-export MenuItem type for convenience\r\nexport type { MenuItem };\r\n"]}

package/package.json

@@ -0,0 +1,50 @@
+{
+    "name": "@gov-components/layout-header-sidebar",
+    "version": "1.0.0",
+    "description": "Reusable Header and Sidebar components for React/Next.js projects",
+    "main": "./dist/index.js",
+    "module": "./dist/index.mjs",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.mjs",
+            "require": "./dist/index.js"
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "tsup",
+        "dev": "tsup --watch",
+        "lint": "eslint ."
+    },
+    "keywords": [
+        "react",
+        "components",
+        "sidebar",
+        "header",
+        "tailwind"
+    ],
+    "author": "Jakprim",
+    "license": "MIT",
+    "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+    },
+    "devDependencies": {
+        "@types/node": "^20.12.7",
+        "@types/react": "^18.3.1",
+        "autoprefixer": "^10.4.23",
+        "postcss": "^8.5.6",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "tailwindcss": "^3.4.17",
+        "tsup": "^8.0.2",
+        "typescript": "^5.4.5"
+    },
+    "dependencies": {
+        "@gov-components/design-tokens": "^1.0.13"
+    }
+}