shared-navigation-rafaelfvg

Este paquete proporciona un componente SidebarMenu que permite mostrar un menú de navegación con permisos de usuario y submenús. El componente es flexible y puede ser utilizado tanto con Pages Router como con App Router en Next.js.

Instalación

Primero, instala el paquete en tu proyecto:

npm install shared-navigation-rafaelfvg

Uso con Pages Router

Si estás utilizando el Pages Router de Next.js, puedes usar el hook useRouter de next/router para manejar la navegación programática. Aquí tienes un ejemplo de cómo usar el componente con Pages Router.

Ejemplo:

import React from "react";
import { SidebarMenu } from "shared-navigation-rafaelfvg";
import { useRouter } from "next/router";

const PageWithSidebar: React.FC = () => {
  const router = useRouter();
  const userPermissions = ["admin", "editor"]; // Simulación de permisos de usuario

  const items = [
    {
      name: "Dashboard",
      href: "/dashboard",
      permissions: ["admin", "editor"],
    },
    {
      name: "Settings",
      href: "/settings",
      permissions: ["admin"],
      submenu: [
        {
          name: "User Management",
          href: "/settings/users",
          permissions: ["admin"],
        },
        {
          name: "Roles",
          href: "/settings/roles",
          permissions: ["admin"],
        },
      ],
    },
  ];

  return (
    <div>
      <SidebarMenu
        items={items}
        userPermissions={userPermissions}
        router={router} // Pasando el router de Next.js Pages
      />
      <main>
        <h1>Contenido de la página</h1>
      </main>
    </div>
  );
};

export default PageWithSidebar;

Uso con App Router

Si estás utilizando el App Router de Next.js (introducido en Next.js 13), debes usar useRouter de next/navigation. Aquí tienes un ejemplo de cómo usar el componente con App Router.

Ejemplo:

import React from "react";
import { SidebarMenu } from "shared-navigation-rafaelfvg";
import { useRouter } from "next/navigation"; // Para App Router

const PageWithSidebarApp: React.FC = () => {
  const router = useRouter();
  const userPermissions = ["admin", "editor"]; // Simulación de permisos de usuario

  const items = [
    {
      name: "Dashboard",
      href: "/dashboard",
      permissions: ["admin", "editor"],
    },
    {
      name: "Settings",
      href: "/settings",
      permissions: ["admin"],
      submenu: [
        {
          name: "User Management",
          href: "/settings/users",
          permissions: ["admin"],
        },
        {
          name: "Roles",
          href: "/settings/roles",
          permissions: ["admin"],
        },
      ],
    },
  ];

  return (
    <div>
      <SidebarMenu
        items={items}
        userPermissions={userPermissions}
        router={router} // Pasando el router de Next.js App Router
      />
      <main>
        <h1>Contenido de la página</h1>
      </main>
    </div>
  );
};

export default PageWithSidebarApp;