Layout

Sidebar

A 56px icon rail. The active icon fills and a ◆ travels to it. Routing stays yours: pass active and your link component.

view .md

Preview

Installation

terminal

bash

npx @entrepta/cli@latest add sidebar

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

sidebar.tsx

tsx

import { Sidebar } from "@/components/entrepta/sidebar"
import { FileMdIcon, HouseLineIcon } from "@phosphor-icons/react"
import Link from "next/link"

const ITEMS = [
  { id: "home", label: "Home", href: "/", icon: HouseLineIcon },
  { id: "blog", label: "Blog", href: "/blog", icon: FileMdIcon },
]

<Sidebar items={ITEMS} active={current} linkComponent={Link} logo={<Logo />} />

Props

Prop	Type	Default	Description
items	{ id, label, href, icon }[]	-	Icons are Phosphor components
active	string	-	Id of the current item
linkComponent	ElementType	"a"	Your router's link
logo	ReactNode	-	Top of the rail