@kittlekit/next-sidebar

Next.js sidebar package for Kittlekit applications.

What This Package Is

Use this package when you want:

• a production-oriented sidebar for a Next app
• nested menu support
• search and hotkeys
• collapsed flyout behavior
• optional secondary navigation stack
• injected theme/language/organization slots

It is intentionally Next-specific and uses:

• next/link
• next/navigation

Install

npm install @kittlekit/next-sidebar @kittlekit/sidebar-core next react react-dom

Quick Start

import { Sidebar } from "@kittlekit/next-sidebar"

<Sidebar
  menuItems={menuItems}
  title="My App"
  t={(_key, fallback) => fallback}
>
  <div>Page content</div>
</Sidebar>

Main Props

• menuItems
• children
• ability
• slots
• title
• homeLink
• showSearch
• showHotkeys
• showCollapse
• showOrganizationSwitcher
• density
• secondarySidebar
• onLogout
• t
• classNameJoin

Slots

Optional injected slots:

• OrganizationSwitcher
• ThemeSwitch
• LanguageSwitcher

These let each host app keep its own shell controls without forking the sidebar package.

Ability Integration

Pass an object with:

{ can(action, subject) => boolean }

This is enough for permission-aware menu filtering.

Relationship to Other Packages

sidebar-core -> next-sidebar

Out of Scope

• non-Next runtimes
• opinionated auth/session providers
• persistence of collapse state

Publish

npm run build --workspace @kittlekit/next-sidebar
npm publish --workspace @kittlekit/next-sidebar --access public

Examples

• smoke app: sandbox/sidebar-smoke
• app wrapper reference: web/src/components/sidebar/Sidebar.tsx

Release Notes

0.1.0

• first public extraction of Next sidebar runtime with slots and nested navigation