@pagedotapp/page-sidebar

A responsive sidebar navigation component

Installation

npm install @pagedotapp/page-sidebar

Usage

import { PageSidebar } from "@pagedotapp/page-sidebar"

const items = [
	{ icon: "house", title: "Home", href: "/" },
	{ icon: "gear", title: "Settings", onClick: () => console.log("Settings") },
]

function App() {
	return <PageSidebar title="Page Studio" items={items} />
}

Props

| Prop | Type | Description | | ------- | ------------------- | ----------------------------------- | | title | React.ReactNode | Content shown in the sidebar header | | items | PageSidebarItem[] | Array of navigation items |

Each item in items has the following shape:

interface PageSidebarItem {
	icon: string
	title: React.ReactNode
	href?: string
	onClick?: () => void
	disabled?: boolean
	active?: boolean
}

Styling

This component uses CSS modules for styling. The styles are injected automatically when you use the component.

Dependencies

Peer Dependencies

• React >=16.8.0
• React DOM >=16.8.0

Required Dependencies

• @react-spring/web: ^10.0.1
• @use-gesture/react: ^10.3.1
• @pagedotapp/page-icon: ^0.1.0-alpha.0

License

MIT © PageStudio