SIDAC/diplomas/src/components/app-sidebar.jsx

import * as React from "react";
import { GalleryVerticalEnd } from "lucide-react";

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarRail,
} from "@/components/ui/sidebar";
import Link from "next/link";

// This is sample data.
const data = {
  navMain: [
    {
      title: "Alumnos",
      items: [
        {
          title: "Vista de alumnos",
          url: "/alumnosVista",
        },
        {
          title: "Agregar manualmente",
          url: "/alumnosManual",
        },
        {
          title: "Agregar desde archivo",
          url: "/alumnosArchivo",
        },
      ],
    },
    /*{
      title: "Vista general",
      items: [
        {
          title: "Vista general",
          url: "/vistaGeneral",
        },
      ],
    },*/
    {
      title: "Cursos",
      items: [
        {
          title: "Vista de cursos",
          url: "/cursosVista",
        },
        {
          title: "Agregar manualmente",
          url: "/cursosManual",
        },
        {
          title: "Agregar desde archivo",
          url: "/cursosArchivo",
        },
      ],
    },
    {
      title: "Inyecciones",
      items: [
        {
          title: "Vista de inyecciones",
          url: "/inyeccionesVista",
        },
        {
          title: "Agregar manualmente",
          url: "/inyeccionesManual",
        },
        {
          title: "Agregar desde archivo",
          url: "/inyeccionesArchivo",
        },
      ],
    },
    {
      title: "Pildoras",
      items: [
        {
          title: "Vista de pildoras",
          url: "/pildorasVista",
        },
        {
          title: "Agregar manualmente",
          url: "/pildorasManual",
        },
        {
          title: "Agregar desde archivo",
          url: "/pildorasArchivo",
        },
      ],
    },
    {
      title: "Diplomas",
      items: [
        {
          title: "Creación de diplomas",
          url: "/diplomasVista",
        },
      ],
    },
  ],
};

export function AppSidebar({ ...props }) {
  return (
    <Sidebar {...props}>
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" asChild>
              <a href="/">
                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
                  <GalleryVerticalEnd className="size-4" />
                </div>
                <div className="flex flex-col gap-0.5 leading-none">
                  <span className="font-medium">SIDAC</span>
                  <span className="">v1.0.0</span>
                </div>
              </a>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarMenu>
            {data.navMain.map((item) => (
              <SidebarMenuItem key={item.title}>
                <SidebarMenuButton asChild>
                  <h1 className="text-xl font-medium">{item.title}</h1>
                </SidebarMenuButton>
                {item.items?.length ? (
                  <SidebarMenuSub>
                    {item.items.map((item) => (
                      <SidebarMenuSubItem key={item.title}>
                        <SidebarMenuSubButton
                          asChild
                          isActive={item.isActive}
                          className="py-5"
                        >
                          <Link href={item.url}>{item.title}</Link>
                        </SidebarMenuSubButton>
                      </SidebarMenuSubItem>
                    ))}
                  </SidebarMenuSub>
                ) : null}
              </SidebarMenuItem>
            ))}
          </SidebarMenu>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  );
}