Magnify Dock

Gắn stylesheet và script một lần, rồi dựng dock bằng các link và nút. Mỗi mục đặt tên trước, icon sau:

<link rel="stylesheet" href="magnify-dock.css" />
<script src="magnify-dock.js" defer></script>

<div class="magnify-dock" data-magnify-dock aria-label="Ứng dụng">
  <a class="magnify-dock__item" href="/files" data-running>
    <span class="magnify-dock__label">Tệp</span>
    <span class="magnify-dock__icon"><svg aria-hidden="true">…</svg></span>
  </a>
  <button class="magnify-dock__item" type="button">
    <span class="magnify-dock__label">Thư</span>
    <span class="magnify-dock__icon"><svg aria-hidden="true">…</svg><span class="magnify-dock__badge">3</span></span>
  </button>
  <span class="magnify-dock__separator"></span>
  <button class="magnify-dock__item" type="button">…</button>
</div>

Tuỳ chọn qua data attribute đặt trên dock: data-edge (mặc định bottom, hoặc top, left, right), data-magnify-dock-max-scale (1.8 — icon dưới con trỏ to đến mức nào; 1 là tắt kính lúp), data-magnify-dock-range (160, đơn vị px — cách con trỏ bao xa thì icon vẫn còn phồng), data-magnify-dock-curve (cosine, hoặc gaussian cho đỉnh nhọn hơn), data-magnify-dock-smoothing (0.22 — mỗi khung hình icon đi được bao nhiêu phần quãng đường; càng nhỏ càng mềm) và data-magnify-dock-bounce="false" nếu không muốn hiệu ứng nảy.

Trên từng mục: data-running hiện chấm báo; aria-current="page" trên link và aria-pressed="true" trên nút bật/tắt cũng hiện chấm đó. Muốn đổi số đếm sau này: MagnifyDock.setBadge(item, 5) (0 là gỡ đi, quá 99 thì hiện "99+"). Dock thêm vào sau khi trang đã tải: MagnifyDock.init(container) — hàm này trả về một hàm để gỡ ra.

Dock được gán role="toolbar" nếu bạn chưa đặt role nào, nên nhớ thêm aria-label cho nó.

Chép MagnifyDock.tsx, magnify-dock.css và thư mục core vào dự án:

import { Dock, DockItem, DockSeparator } from "./MagnifyDock";

<Dock aria-label="Ứng dụng" maxScale={1.8}>
  <DockItem label="Tệp" icon={<FilesIcon aria-hidden />} href="/files" running />
  <DockItem label="Thư" icon={<MailIcon aria-hidden />} badge={unread} onClick={openMail} />
  <DockSeparator />
  <DockItem label="Thùng rác" icon={<TrashIcon aria-hidden />} onClick={openTrash} />
</Dock>

<Dock edge="left" aria-label="Các mục">…</Dock>

Dock nhận edge, maxScale, range, curve, smoothing và bounce, khớp với các data attribute. DockItem có href thì là link, không có thì là <button type="button">; các prop khác được chuyển xuống thẻ đó (aria-current, aria-pressed, disabled, onClick…). React 18 hoặc 19.

File bắt đầu bằng "use client", nên dùng được trong mọi page hay server component. Với App Router không cần làm gì thêm. Với Pages Router, chuyển dòng import CSS vào pages/_app.

Đặt các biến sau trên .magnify-dock (hoặc class của bạn):

Biến	Đổi gì
--dock-size, --dock-gap, --dock-padding	Kích thước icon lúc nghỉ, khoảng cách giữa các icon và xung quanh
--dock-radius, --dock-icon-radius	Bo góc của tấm kính và của icon
--dock-glass, --dock-glass-edge, --dock-sheen, --dock-blur	Tấm kính mờ
--dock-shadow, --dock-separator	Bóng đổ và vạch ngăn
--dock-label-bg, --dock-label-text, --dock-label-gap	Tooltip tên
--dock-dot, --dock-badge-bg, --dock-badge-text	Chấm báo và huy hiệu đếm số
--dock-ring, --dock-highlight	Viền focus, và quầng sáng thay cho độ phồng khi giảm chuyển động
--dock-press	Icon thu nhỏ bao nhiêu khi bị ngón tay nhấn
--dock-bounce-height, --dock-bounce-duration	Hiệu ứng nảy
--dock-fade, --dock-ease	Tooltip hiện ra thế nào

Màu dùng light-dark(): tự theo color-scheme của trang. Độ phồng là tuỳ chọn chứ không phải biến CSS: script tính lại nó từng khung hình.