next-sidebar

A small, customizable React Sidebar component packaged as a library for Next.js / React apps.

Install

npm install @hbtoan/next-sidebar

Usage (Next.js / React)

Import và sử dụng Sidebar trong một page hoặc component:

import React from "react";
import { Sidebar } from "@hbtoan/next-sidebar";

const items = [
  { id: 1, label: "Home", href: "/" },
  { id: 2, label: "Reports", href: "/reports" },
];

export default function Page() {
  return (
    <div style={{ display: "flex", minHeight: "100vh" }}>
      <Sidebar items={items} width={220} />
      <main style={{ flex: 1, padding: 24 }}>Main content</main>
    </div>
  );
}

Props

• items: Mảng các item sidebar { id, label, href?, icon? }
• width: Chiều rộng sidebar (mặc định 240)
• collapsed: Trạng thái thu gọn (mặc định false)
• onToggle: Hàm callback khi toggle sidebar
• className, style: Tùy chỉnh CSS

Build

Từ thư mục package, chạy:

npm install
npm run build

Publish

1. Bump version trong package.json.
2. Đảm bảo đã build ra dist (npm run build).
3. Publish lên npm:

npm publish --access public

Liên hệ / Đóng góp

Repo: github.com/baotoan-dev/next-sidebar � �