Sidebar (SideNav)

Barre de navigation latérale avec header, sous-menus imbriqués, footer et branding configurable. Compatible Next.js, Vite et React Router.

Étape 1 — Fichier de configuration

Créer un fichier dédié dans src (ex: config/side-nav.config.ts) avec createSideNav. Cette approche centralise la config et évite de répéter les props.

// config/side-nav.ts
import { createSideNav } from "@ramses1er/cbk-toolkit";

export const MySideNav = createSideNav({
  brand: {
    name: "Mon App",
    tagline: "Slogan",
    logo: "/logo.png",
  },
  mainItems: [
    {
      id: "dashboard",
      label: "Dashboard",
      icon: "🏠",
      href: "/dashboard",
    },
    {
      id: "students",
      label: "Élèves",
      icon: "🎓",
      href: "/students",
      subItems: [
        { id: "list", label: "Liste", href: "/students" },
        { id: "classes", label: "Classes", href: "/students/classes" },
      ],
    },
  ],
  footer: [
    { icon: "⚙️", label: "Paramètres", href: "/settings" },
  ],
});

Icônes :Vous pouvez passer une icône de trois façons :

Chaîne (emoji) : icon: "🏠"
JSX (.tsx) : icon: <Plug size={20} />
Composant (.ts) : icon: Plug— devient automatiquement <Plug size={20} /> au rendu

Compatible avec les icônes lucide-react, react-icons et tout composant React acceptant { size?: number }.

Étape 2 — Intégration dans le layout

Dans le layout racine, importer usePathname de Next.js et MySideNav. Le SideNav enveloppe tout le contenu.

// app/layout.tsx
"use client";

import { usePathname } from "next/navigation";
import { MySideNav } from "@/config/side-nav.config";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();

  return (
    <html lang="fr">
      <body>
        <MySideNav currentPath={pathname}>
          {children}
        </MySideNav>
      </body>
    </html>
  );
}

Note : Le layout doit être en "use client" à cause de usePathname.

Rappel : L'import du CSS @ramses1er/cbk-toolkit/styles.cssdoit être fait dans le layout avant votre CSS local. Voir la section Police pour le détail.

3 — Imports de référence

Import depuis le package (déjà vu étape 1) :

import { createSideNav } from "@ramses1er/cbk-toolkit";

Pour une utilisation directe (sans factory) ou pour typer :

import { SideNav, createSideNav } from "@ramses1er/cbk-toolkit";
import type { NavItem } from "@ramses1er/cbk-toolkit";

4 — Titre dynamique du header

Le titre affiché en haut de la page est déterminé automatiquement selon cet ordre :

title explicite (prop de SideNav ou createSideNav)
title optionnel dans le NavItem actif
label du NavItemactif (par défaut)

mainItems: [
  {
    id: "dashboard",
    label: "Accueil",           // titre par défaut = "Accueil"
    title: "Tableau de bord",   // si défini → titre = "Tableau de bord"
    href: "/dashboard",
  },
];

5 — API directe (sans factory)

Utilisation directe du composant SideNavsans passer par createSideNav. Utile pour des configurations jetables ou prototypes.

<SideNav
  currentPath={pathname}
  brand={{ name: "Mon App", logo: "/logo.svg", tagline: "Slogan" }}
  mainItems={[
    { id: "dashboard", label: "Dashboard", icon: "🏠", href: "/dashboard" },
  ]}
  title="Dashboard"
>
  <YourContent />
</SideNav>

6 — Props

Prop	Type	Défaut	Description
mainItems	NavItem[]	requis	Entrées de navigation
brand	{ logo?, name?, tagline? }	—	Branding en haut de la sidebar
footer	{ icon?, label, href }[]	—	Liens en pied de sidebar
title	string	—	Override le titre du header
toggleIcon	ReactNode	"▼"/"▶"	Icône de toggle des sous-menus
children	ReactNode	requis	Contenu principal
currentPath	string	requis	Chemin actif pour le surlignage

7 — Type NavItem

type IconType = ReactNode | React.ComponentType<{ size?: number }>;

type NavItem = {
  id: string;
  label: string;
  title?: string;        // Optionnel : surcharge le titre du header
  icon?: IconType;
  href: string;
  subItems?: NavItem[];
};