create-wakii-stack 0.0.0-stage → 0.1.1

package/stack-template/app/ui-kit/src/ui/menu/index.tsx

@@ -0,0 +1,256 @@
+// Menu — antd parity: items đệ quy { key, label, icon?, children?, disabled? },
+// submenu lồng không giới hạn cấp; mode vertical (inline expand) | horizontal
+// (dropdown/flyout). Ngôn ngữ nút design-system: item thường transparent +
+// hover:bg-s3, selected = nền accent đặc + chữ trắng font-medium (pagination/
+// calendar), disabled = text-ink4 không hover. Motion CSS thuần: expand/collapse
+// animate grid-template-rows 0fr→1fr + opacity (không JS đo chiều cao).
+// a11y: role menu/menuitem, aria-expanded, aria-haspopup, aria-current='true'.
+import { createContext, useContext, useState } from 'react';
+import type { ReactNode } from 'react';
+import { Icon } from '../icons/index.js';
+
+export interface MenuItemData {
+  key: string;
+  label: ReactNode;
+  icon?: ReactNode;
+  children?: MenuItemData[];
+  disabled?: boolean;
+}
+
+export interface MenuProps {
+  items: MenuItemData[];
+  mode?: 'vertical' | 'horizontal';
+  selectedKey?: string;
+  onSelect?: (key: string) => void;
+  className?: string;
+}
+
+/** Sidebar collapsed → Menu icon-only (label fade). Sidebar set qua provider. */
+// Context + util là public API có chủ đích (fast-refresh warning chấp nhận)
+// eslint-disable-next-line react-refresh/only-export-components
+export const MenuCompactContext = createContext(false);
+
+function ChevronRightIcon() {
+  return <Icon name="chevron-right" size={12} />;
+}
+function ChevronDownIcon() {
+  return <Icon name="chevron-down" size={12} />;
+}
+
+/* Ngôn ngữ nút — khớp pagination/calendar: transparent+hover s3 / accent fill /
+ * ink4 disabled. 3 biến thể viết tường minh (không ghép chuỗi kiểu surgery).
+ * Compact (sidebar icon-only, fix phản hồi user 2026-10-18): item = Ô VUÔNG
+ * size-8 như antd sider thu gọn; căn giữa cột do UL (items-center) + LI
+ * (flex-col items-center) lo — KHÔNG dùng mx-auto (class mới có thể chưa vào
+ * CSS build của consumer; chỉ dùng class đã tồn tại từ batch trước). */
+function itemCls(kind: 'normal' | 'selected' | 'disabled', compact: boolean): string {
+  const base = 'flex items-center rounded-lg border-none text-body transition-colors';
+  const fit = compact ? 'size-8 justify-center px-0' : 'w-full cursor-pointer gap-2 px-3 py-1.5';
+  if (kind === 'disabled') return `${base} cursor-not-allowed bg-transparent text-ink4 ${fit}`;
+  if (kind === 'selected') return `${base} cursor-pointer bg-accent font-medium text-white hover:bg-accent ${fit}`;
+  return `${base} cursor-pointer bg-transparent text-ink hover:bg-s3 ${fit}`;
+}
+
+/** Đường đi các key submenu cha của selectedKey (không gồm leaf) — auto-open lần đầu. */
+// eslint-disable-next-line react-refresh/only-export-components
+export function findPath(items: MenuItemData[], selected?: string, trail: string[] = []): string[] | null {
+  if (!selected) return null;
+  for (const item of items) {
+    if (item.key === selected) return trail;
+    if (item.children) {
+      const found = findPath(item.children, selected, [...trail, item.key]);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+interface LevelProps {
+  items: MenuItemData[];
+  mode: 'vertical' | 'horizontal';
+  depth: number;
+  ulCls: string;
+  selectedKey?: string;
+  onSelect?: (key: string) => void;
+  openKeys: Set<string>;
+  toggle: (key: string) => void;
+}
+
+function MenuLevel({ items, mode, depth, ulCls, selectedKey, onSelect, openKeys, toggle }: LevelProps) {
+  const compact = useContext(MenuCompactContext);
+  const vertical = mode === 'vertical';
+
+  return (
+    <ul role="menu" aria-orientation={vertical ? 'vertical' : 'horizontal'} className={`m-0 list-none p-0 ${ulCls}`}>
+      {items.map((item) => {
+        const hasChildren = !!item.children?.length;
+        const open = openKeys.has(item.key);
+        const selected = item.key === selectedKey;
+
+        const label = (
+          <span
+            className={`min-w-0 truncate text-left transition-[width,opacity] duration-200 ${
+              compact ? 'w-0 opacity-0' : 'flex-1 opacity-100'
+            }`}
+          >
+            {item.label}
+          </span>
+        );
+
+
+        return (
+          <li role="none" key={item.key} className={`relative${compact ? ' flex flex-col items-center' : ''}`}>
+            {hasChildren ? (
+              <button
+                type="button"
+                role="menuitem"
+                aria-expanded={open}
+                aria-haspopup="menu"
+                disabled={item.disabled}
+                className={itemCls(item.disabled ? 'disabled' : 'normal', compact)}
+                onClick={() => !item.disabled && toggle(item.key)}
+              >
+                {item.icon ? (
+                  <span aria-hidden="true" className="relative flex size-4 shrink-0 items-center justify-center text-base leading-none">
+                    {item.icon}
+                    {/* Compact: chấm nhỏ góc phải icon cha = còn con (fix ⑥-6). */}
+                    {compact && (
+                      <span aria-hidden="true" className="absolute -bottom-1 -right-1 size-1 rounded-full bg-ink3" />
+                    )}
+                  </span>
+                ) : (
+                  compact && (
+                    <span aria-hidden="true" className="relative flex size-4 shrink-0 items-center justify-center text-[10px] font-semibold leading-none">
+                      {typeof item.label === 'string' ? item.label.trim().charAt(0).toUpperCase() : '•'}
+                      <span aria-hidden="true" className="absolute -bottom-1 -right-1 size-1 rounded-full bg-ink3" />
+                    </span>
+                  )
+                )}
+                {label}
+                {!compact && (
+                  <span
+                    aria-hidden="true"
+                    className={`shrink-0 text-ink3 transition-transform duration-200 ${
+                      vertical && open ? 'rotate-90' : ''
+                    }`}
+                  >
+                    {vertical || depth > 0 ? <ChevronRightIcon /> : <ChevronDownIcon />}
+                  </span>
+                )}
+              </button>
+            ) : (
+              <button
+                type="button"
+                role="menuitem"
+                aria-current={selected ? 'true' : undefined}
+                disabled={item.disabled}
+                className={itemCls(item.disabled ? 'disabled' : selected ? 'selected' : 'normal', compact)}
+                onClick={() => {
+                  if (item.disabled) return;
+                  onSelect?.(item.key);
+                }}
+              >
+                {item.icon ? (
+                  <span aria-hidden="true" className="flex size-4 shrink-0 items-center justify-center text-base leading-none">
+                    {item.icon}
+                  </span>
+                ) : (
+                  compact && (
+                    /* Compact không có icon → chữ cái đầu làm đại diện (ô vuông
+                     * không được trống — mọi icon thẳng hàng cột, yêu cầu user). */
+                    <span aria-hidden="true" className="flex size-4 shrink-0 items-center justify-center text-[10px] font-semibold leading-none">
+                      {typeof item.label === 'string' ? item.label.trim().charAt(0).toUpperCase() : '•'}
+                    </span>
+                  )
+                )}
+                {label}
+              </button>
+            )}
+
+            {hasChildren && vertical && (
+              /* Expand/collapse CSS thuần: grid-template-rows 0fr→1fr + opacity.
+               * Compact (user 2026-10-18): con ẪN mặc định như thường, bấm cha
+               * mở ra — nhưng KHÔNG indent ml-4, icon con thẳng cột icon cha. */
+              <div
+                className={`grid min-h-0 overflow-hidden transition-[grid-template-rows,opacity] duration-200 ease-out ${
+                  open ? '[grid-template-rows:1fr] opacity-100' : '[grid-template-rows:0fr] opacity-0'
+                }`}
+              >
+                <div className="min-h-0 overflow-hidden">
+                  <MenuLevel
+                    items={item.children!}
+                    mode={mode}
+                    depth={depth + 1}
+                    ulCls={compact ? 'flex flex-col items-center gap-1' : 'ml-4 flex flex-col gap-1'}
+                    selectedKey={selectedKey}
+                    onSelect={onSelect}
+                    openKeys={openKeys}
+                    toggle={toggle}
+                  />
+                </div>
+              </div>
+            )}
+
+            {hasChildren && !vertical && open && (
+              /* Horizontal: depth 0 = dropdown bên dưới; sâu hơn = flyout bên phải. */
+              <MenuLevel
+                items={item.children!}
+                mode={mode}
+                depth={depth + 1}
+                ulCls={`absolute z-[var(--z-popover)] origin-top-left flex flex-col gap-1 rounded-lg border border-line bg-s2 p-1 shadow-[var(--shadow-pop)] animate-[bp-zoom-in_var(--motion-fast)_var(--ease-enter)] ${
+                  depth === 0 ? 'left-0 top-full min-w-[180px]' : 'left-full top-0 min-w-[160px]'
+                }`}
+                selectedKey={selectedKey}
+                onSelect={onSelect}
+                openKeys={openKeys}
+                toggle={toggle}
+              />
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+export function Menu({ items, mode = 'vertical', selectedKey, onSelect, className }: MenuProps) {
+  /* Auto-open lần đầu: nhánh chứa selectedKey mở sẵn (useState initializer — chạy 1 lần). */
+  const compact = useContext(MenuCompactContext);
+  const [openKeys, setOpenKeys] = useState<Set<string>>(() => new Set(findPath(items, selectedKey) ?? []));
+
+  const toggle = (key: string) =>
+    setOpenKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+
+  const handleSelect = (key: string) => {
+    onSelect?.(key);
+    if (mode === 'horizontal') setOpenKeys(new Set()); // chọn xong đóng dropdown như antd
+  };
+
+  return (
+    <nav className={className}>
+      <MenuLevel
+        items={items}
+        mode={mode}
+        depth={0}
+        /* Compact: root ul tự items-center — ô vuông icon căn giữa cột bằng
+         * flexbox thuần (mx-auto phụ thuộc CSS class có trong build consumer). */
+        ulCls={
+          mode === 'horizontal'
+            ? 'flex items-center gap-1'
+            : compact
+              ? 'flex flex-col items-center gap-1'
+              : 'flex flex-col gap-1'
+        }
+        selectedKey={selectedKey}
+        onSelect={handleSelect}
+        openKeys={openKeys}
+        toggle={toggle}
+      />
+    </nav>
+  );
+}

package/stack-template/app/ui-kit/src/ui/menu/menu.stories.tsx

@@ -0,0 +1,124 @@
+// Menu stories — multi-level vertical, horizontal flyout, controlled selection.
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Menu, MenuCompactContext, type MenuItemData } from './index';
+import { Icon } from '../icons/index.js';
+
+/** Vertical/horizontal nav menu with nested submenus. */
+const meta = { title: 'Navigation/Menu', tags: ['autodocs'] } satisfies Meta;
+export default meta;
+type S = StoryObj<typeof meta>;
+
+const baCap: MenuItemData[] = [
+  { key: 'home', label: 'Home', icon: <Icon name="home" size={14} /> },
+  {
+    key: 'manage',
+    label: 'Manage',
+    icon: <Icon name="folder" size={14} />,
+    children: [
+      {
+        key: 'accounts',
+        label: 'Accounts',
+        icon: <Icon name="users" size={14} />,
+        children: [
+          { key: 'accounts-list', label: 'List', icon: <Icon name="file" size={14} /> },
+          { key: 'accounts-roles', label: 'Roles', icon: <Icon name="file" size={14} /> },
+        ],
+      },
+      { key: 'tasks', label: 'Tasks', icon: <Icon name="file" size={14} /> },
+      { key: 'reports', label: 'Reports', icon: <Icon name="file" size={14} /> },
+    ],
+  },
+  { key: 'settings', label: 'Settings', icon: <Icon name="file" size={14} />, disabled: true },
+];
+
+export const ThreeLevels: S = {
+  name: 'Three levels — vertical + icons + animation',
+  render: () => <Menu items={baCap} className="w-56" />,
+};
+
+export const Horizontal: S = {
+  name: 'Horizontal — dropdown + flyout',
+  render: () => <Menu items={baCap} mode="horizontal" />,
+};
+
+function ActiveKeyDemo() {
+  const [selected, setSelected] = useState('accounts-list');
+  return (
+    <div className="flex flex-col gap-2">
+      <span className="text-meta text-ink2">selectedKey: {selected}</span>
+      <Menu items={baCap} selectedKey={selected} onSelect={setSelected} className="w-56" />
+    </div>
+  );
+}
+
+export const ActiveKey: S = {
+  name: 'Active key — selected + onSelect',
+  render: () => <ActiveKeyDemo />,
+};
+
+export const DisabledItem: S = {
+  name: 'Disabled item — not clickable',
+  render: () => (
+    <Menu
+      items={[{ key: 'a', label: 'Normal' }, { key: 'b', label: 'Locked', disabled: true }]}
+      className="w-56"
+    />
+  ),
+};
+
+export const DarkTheme: S = {
+  name: 'Dark theme',
+  render: () => (
+    <div data-bp-theme="dark" className="w-fit rounded-xl bg-canvas p-4">
+      <Menu items={baCap} className="w-56" />
+    </div>
+  ),
+};
+
+// ── Real-world usage (2026-10-25): app sidebar navigation ──
+
+const ADMIN_NAV: MenuItemData[] = [
+  { key: 'dashboard', label: 'Bảng điều khiển', icon: <Icon name="home" size={14} /> },
+  {
+    key: 'work',
+    label: 'Công việc',
+    icon: <Icon name="folder" size={14} />,
+    children: [
+      { key: 'work-list', label: 'Danh sách' },
+      { key: 'work-board', label: 'Bảng' },
+      { key: 'work-kanban', label: 'Kanban' },
+    ],
+  },
+  { key: 'reports', label: 'Báo cáo', icon: <Icon name="file" size={14} /> },
+  { key: 'settings', label: 'Cài đặt', icon: <Icon name="settings" size={14} /> },
+];
+
+/** AdminSidebar — vertical two-level menu with controlled selection (the branch
+ * containing the selected key opens automatically). */
+export const AdminSidebar: S = {
+  name: 'Admin sidebar — two-level groups, controlled selectedKey',
+  render: () => <AdminSidebarDemo />,
+};
+
+function AdminSidebarDemo() {
+  const [selected, setSelected] = useState('work-board');
+  return (
+    <div className="w-56 rounded-xl border border-line bg-s1 p-2">
+      <Menu items={ADMIN_NAV} selectedKey={selected} onSelect={setSelected} />
+    </div>
+  );
+}
+
+/** AdminSidebarCompact — the same menu rendered icon-only via MenuCompactContext —
+ * exactly what Sidebar shows when collapsed to 80px. */
+export const AdminSidebarCompact: S = {
+  name: 'Admin sidebar compact — icon-only via MenuCompactContext',
+  render: () => (
+    <MenuCompactContext.Provider value={true}>
+      <div className="w-fit rounded-xl border border-line bg-s1 p-2">
+        <Menu items={ADMIN_NAV} selectedKey="dashboard" mode="vertical" />
+      </div>
+    </MenuCompactContext.Provider>
+  ),
+};

package/stack-template/app/ui-kit/src/ui/menu/menu.test.tsx

@@ -0,0 +1,251 @@
+// Menu tests — hành vi thật: render đa cấp, toggle submenu (aria-expanded +
+// animate class), select lá (onSelect + aria-current + accent), disabled không
+// fire, auto-open nhánh chứa selectedKey, horizontal khác vertical.
+// Ghi chú: children submenu luôn ở trong DOM (collapse bằng grid-rows 0fr +
+// opacity-0 để animate) — "hiện/ẩn" assert qua aria-expanded + class animate.
+import { cleanup, render, screen, fireEvent } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Menu, MenuCompactContext, findPath, type MenuItemData } from './index.js';
+import { Icon } from '../icons/index.js';
+
+afterEach(cleanup);
+
+// ul role=menu lồng luôn trong DOM (animate grid-rows) — root luôn là match đầu theo document order.
+const rootMenu = () => screen.getAllByRole('menu')[0];
+
+const threeLevels: MenuItemData[] = [
+  { key: 'dash', label: 'Dashboard' },
+  {
+    key: 'ql',
+    label: 'Quản lý',
+    children: [
+      {
+        key: 'ql-tk',
+        label: 'Tài khoản',
+        children: [
+          { key: 'ql-tk-ds', label: 'Danh sách' },
+          { key: 'ql-tk-vt', label: 'Vai trò' },
+        ],
+      },
+      { key: 'ql-cv', label: 'Công việc' },
+    ],
+  },
+  { key: 'settings', label: 'Cài đặt', disabled: true },
+];
+
+describe('Menu — render', () => {
+  it('render đa cấp — label mọi cấp present, role menu/menuitem', () => {
+    render(<Menu items={threeLevels} />);
+    expect(screen.getAllByRole('menu')[0]).toBeInTheDocument(); // [0] = root (nested ul role=menu luôn trong DOM để animate)
+    expect(screen.getByRole('menuitem', { name: 'Dashboard' })).toBeInTheDocument();
+    expect(screen.getByRole('menuitem', { name: 'Danh sách' })).toBeInTheDocument();
+    expect(screen.getByRole('menuitem', { name: 'Vai trò' })).toBeInTheDocument();
+  });
+
+  it('selectedKey → aria-current=true + accent đặc trắng chữ', () => {
+    render(<Menu items={threeLevels} selectedKey="dash" />);
+    const active = screen.getByRole('menuitem', { name: 'Dashboard' });
+    expect(active).toHaveAttribute('aria-current', 'true');
+    expect(active).toHaveClass('bg-accent', 'text-white', 'font-medium');
+  });
+});
+
+describe('Menu — submenu', () => {
+  it('click submenu → aria-expanded true + animate class mở', () => {
+    render(<Menu items={threeLevels} />);
+    const trigger = screen.getByRole('menuitem', { name: 'Quản lý' });
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    // assert wrapper qua con TRỰC TIẾP 'Công việc' (Danh sách nằm dưới Tài khoản — cấp riêng)
+    const wrapperOf = (name: string) =>
+      screen.getByRole('menuitem', { name }).closest('ul')!.parentElement!.parentElement!;
+    expect(wrapperOf('Công việc').className).toContain('[grid-template-rows:0fr]');
+    fireEvent.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    expect(trigger).toHaveAttribute('aria-haspopup', 'menu');
+    // wrapper animate chuyển 0fr→1fr qua class grid-template-rows
+    expect(wrapperOf('Công việc').className).toContain('[grid-template-rows:1fr]');
+    expect(wrapperOf('Công việc').className).toContain('opacity-100');
+  });
+
+  it('click lần nữa → collapse (aria-expanded false + class 0fr)', () => {
+    render(<Menu items={threeLevels} />);
+    const trigger = screen.getByRole('menuitem', { name: 'Quản lý' });
+    fireEvent.click(trigger);
+    fireEvent.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    const nested = screen.getByRole('menuitem', { name: 'Công việc' }).closest('ul')!.parentElement!.parentElement!;
+    expect(nested.className).toContain('[grid-template-rows:0fr]');
+    expect(nested.className).toContain('opacity-0');
+  });
+
+  it('auto-open lần đầu — nhánh chứa selectedKey mở sẵn cả 2 cấp', () => {
+    render(<Menu items={threeLevels} selectedKey="ql-tk-ds" />);
+    expect(screen.getByRole('menuitem', { name: 'Quản lý' })).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByRole('menuitem', { name: 'Tài khoản' })).toHaveAttribute('aria-expanded', 'true');
+  });
+});
+
+describe('Menu — select & disabled', () => {
+  it('click item lá → onSelect(key)', () => {
+    const onSelect = vi.fn();
+    render(<Menu items={threeLevels} onSelect={onSelect} />);
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Công việc' }));
+    expect(onSelect).toHaveBeenCalledWith('ql-cv');
+  });
+
+  it('click lá sau khi mở submenu cha', () => {
+    const onSelect = vi.fn();
+    render(<Menu items={threeLevels} onSelect={onSelect} />);
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Tài khoản' }));
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Danh sách' }));
+    expect(onSelect).toHaveBeenCalledWith('ql-tk-ds');
+  });
+
+  it('disabled → attr disabled, click không fire', () => {
+    const onSelect = vi.fn();
+    render(<Menu items={threeLevels} onSelect={onSelect} />);
+    const btn = screen.getByRole('menuitem', { name: 'Cài đặt' });
+    expect(btn).toBeDisabled();
+    expect(btn).toHaveClass('text-ink4', 'cursor-not-allowed');
+    expect(btn).not.toHaveClass('hover:bg-s3');
+    fireEvent.click(btn);
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it('selected item không mất active khi hover (hover:bg-accent)', () => {
+    render(<Menu items={threeLevels} selectedKey="dash" />);
+    expect(screen.getByRole('menuitem', { name: 'Dashboard' })).toHaveClass('hover:bg-accent');
+  });
+});
+
+describe('Menu — horizontal vs vertical', () => {
+  it('horizontal: root flex-row; panel dropdown absolute dưới (top-full)', () => {
+    render(<Menu items={threeLevels} mode="horizontal" />);
+    expect(rootMenu()).toHaveClass('flex items-center gap-1');
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Quản lý' }));
+    const panel = screen.getByRole('menuitem', { name: 'Công việc' }).closest('ul')!;
+    expect(panel).toHaveClass('absolute', 'top-full', 'left-0');
+    expect(panel).toHaveClass('shadow-[var(--shadow-pop)]');
+  });
+
+  it('horizontal cấp 2 → flyout bên phải (left-full top-0)', () => {
+    render(<Menu items={threeLevels} mode="horizontal" />);
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Quản lý' }));
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Tài khoản' }));
+    const flyout = screen.getByRole('menuitem', { name: 'Danh sách' }).closest('ul')!;
+    expect(flyout).toHaveClass('left-full', 'top-0');
+  });
+
+  it('horizontal chọn lá → đóng toàn bộ panel (unmount)', () => {
+    const onSelect = vi.fn();
+    render(<Menu items={threeLevels} mode="horizontal" onSelect={onSelect} />);
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Quản lý' }));
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Công việc' }));
+    expect(onSelect).toHaveBeenCalledWith('ql-cv');
+    // horizontal panel đóng = unmount (không giữ DOM như vertical animate)
+    expect(screen.queryByRole('menuitem', { name: 'Tài khoản' })).toBeNull();
+    expect(screen.queryByRole('menuitem', { name: 'Công việc' })).toBeNull();
+  });
+
+  it('vertical: root flex-col; submenu inline (không absolute)', () => {
+    render(<Menu items={threeLevels} />);
+    expect(rootMenu()).toHaveClass('flex flex-col gap-1');
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Quản lý' }));
+    const nested = screen.getByRole('menuitem', { name: 'Công việc' }).closest('ul')!;
+    expect(nested).toHaveClass('ml-4');
+    expect(nested).not.toHaveClass('absolute');
+  });
+});
+
+describe('findPath', () => {
+  it('trả trail các cha (không gồm leaf)', () => {
+    expect(findPath(threeLevels, 'ql-tk-ds')).toEqual(['ql', 'ql-tk']);
+  });
+  it('không có selected → null; leaf cấp 1 → []', () => {
+    expect(findPath(threeLevels, undefined)).toBeNull();
+    expect(findPath(threeLevels, 'dash')).toEqual([]);
+  });
+});
+
+describe('Menu — compact (sidebar icon-only, fix ⑥ 2026-10-18)', () => {
+  it('item = ô vuông size-8 căn giữa cột (mx-auto) — kiểu antd sider thu gọn', () => {
+    render(
+      <MenuCompactContext.Provider value={true}>
+        <Menu items={threeLevels} />
+      </MenuCompactContext.Provider>,
+    );
+    const item = screen.getByRole('menuitem', { name: 'Dashboard' });
+    expect(item).toHaveClass('size-8', 'justify-center', 'px-0');
+    expect(item).toHaveClass('hover:bg-s3');
+    expect(item).not.toHaveClass('w-full');
+  });
+
+  it('submenu cha compact → chấm chỉ báo con (dot) + không chevron', () => {
+    // dot gắn trên ICON cha — fixture có icon (như AdminLayout dùng Icon users)
+    const withIcon: MenuItemData[] = [
+      {
+        key: 'ql',
+        label: 'Quản lý',
+        icon: <Icon name="users" size={16} />,
+        children: [{ key: 'a', label: 'Con' }],
+      },
+    ];
+    render(
+      <MenuCompactContext.Provider value={true}>
+        <Menu items={withIcon} />
+      </MenuCompactContext.Provider>,
+    );
+    const trigger = screen.getByRole('menuitem', { name: 'Quản lý' });
+    const dot = trigger.querySelector('span.relative > span');
+    expect(dot).not.toBeNull();
+    expect(dot).toHaveClass('size-1', 'rounded-full', 'bg-ink3');
+    expect(trigger.querySelector('svg')).not.toBeNull(); // svg duy nhất = icon users
+    expect(trigger.querySelectorAll('svg')).toHaveLength(1); // chevron đã ẩn khi compact
+  });
+
+
+  it('compact: con ẨN mặc định trong collapse — bấm cha mở ra, icon thẳng cột cha (không indent)', () => {
+    render(
+      <MenuCompactContext.Provider value={true}>
+        <Menu items={threeLevels} />
+      </MenuCompactContext.Provider>,
+    );
+    const trigger = screen.getByRole('menuitem', { name: 'Quản lý' });
+    const wrapperOf = (name: string) =>
+      screen.getByRole('menuitem', { name }).closest('ul')!.parentElement!.parentElement!;
+    // mặc định con ẪN (wrapper 0fr) — nằm trong collapse như mode thường
+    expect(wrapperOf('Công việc').className).toContain('[grid-template-rows:0fr]');
+    fireEvent.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    expect(wrapperOf('Công việc').className).toContain('[grid-template-rows:1fr]');
+    // mở ra: icon con thẳng CỘT cha — nested ul items-center, KHÔNG ml-4
+    const nested = screen.getByRole('menuitem', { name: 'Công việc' }).closest('ul')!;
+    expect(nested).toHaveClass('items-center');
+    expect(nested).not.toHaveClass('ml-4');
+    expect(screen.getByRole('menuitem', { name: 'Công việc' })).toHaveClass('size-8');
+    // item con không có icon → chữ cái đầu đại diện (ô vuông không trống)
+    expect(screen.getByRole('menuitem', { name: 'Công việc' }).textContent).toContain('C');
+  });
+
+  it('compact: parent CÓ aria-expanded (con ẩn mặc định — bấm cha mở)', () => {
+    render(
+      <MenuCompactContext.Provider value={true}>
+        <Menu items={threeLevels} />
+      </MenuCompactContext.Provider>,
+    );
+    const trigger = screen.getByRole('menuitem', { name: 'Quản lý' });
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    expect(trigger).toHaveAttribute('aria-haspopup', 'menu');
+    fireEvent.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    fireEvent.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('expanded giữ layout cũ: px-3 gap-2, không dot', () => {
+    render(<Menu items={threeLevels} />);
+    const item = screen.getByRole('menuitem', { name: 'Dashboard' });
+    expect(item).toHaveClass('px-3', 'py-1.5', 'gap-2');
+    expect(item).not.toHaveClass('justify-center');
+  });
+});

package/stack-template/app/ui-kit/src/ui/menubar/index.tsx

@@ -0,0 +1,42 @@
+// Menubar — horizontal menu bar (hover dropdown).
+import { useState, type ReactNode } from 'react';
+
+export interface MenubarItem {
+  key: string;
+  label: ReactNode;
+  children?: Array<{ key: string; label: string; danger?: boolean; onClick?: () => void }>;
+  onClick?: () => void;
+}
+
+export interface MenubarProps { items: MenubarItem[]; className?: string }
+
+export function Menubar({ items, className }: MenubarProps) {
+  const [openKey, setOpenKey] = useState<string | null>(null);
+  return (
+    <nav className={`flex items-center gap-1 border-b border-line bg-s1 px-4 py-1.5${className ? ` ${className}` : ''}`}>
+      {items.map((item) => (
+        <div key={item.key} className="relative"
+          onMouseEnter={() => item.children && setOpenKey(item.key)}
+          onMouseLeave={() => item.children && setOpenKey(null)}>
+          <button type="button" onClick={item.onClick}
+            className={`cursor-pointer rounded-lg border-none bg-transparent px-3 py-1.5 text-body transition-colors ${openKey === item.key ? 'text-accent' : 'text-ink hover:text-accent'}`}>
+            {item.label}
+          </button>
+          {item.children && openKey === item.key && (
+            <ul className="absolute left-0 top-full z-[var(--z-dropdown)] m-0 min-w-[160px] origin-top-left list-none rounded-xl border border-line bg-s2 p-1 shadow-[var(--shadow-pop)] animate-[bp-zoom-in_var(--motion-fast)_var(--ease-enter)]">
+              {item.children.map((sub) => (
+                <li key={sub.key}>
+                  <button type="button"
+                    className={`w-full cursor-pointer rounded-lg border-none bg-transparent px-3 py-1.5 text-left text-body transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ${sub.danger ? 'text-st-fail hover:bg-st-fail/12' : 'text-ink hover:bg-s3'}`}
+                    onClick={() => { sub.onClick?.(); setOpenKey(null); }}>
+                    {sub.label}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      ))}
+    </nav>
+  );
+}