base con autenticacion, registro, modulo encuestas

apps/web/components/nav-main.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@repo/shadcn/collapsible';
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from '@repo/shadcn/sidebar';
+import { ChevronRightIcon } from 'lucide-react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Icons } from './icons';
+// import { useSession } from 'next-auth/react';
+
+export function NavMain({
+  titleGroup,
+  items,
+  role
+}: {
+  titleGroup: string,
+  role: string,
+  items: {
+    title: string;
+    url: string;
+    icon?: keyof typeof Icons;
+    isActive?: boolean;
+    items?: {
+      title: string;
+      url: string;
+      icon?: keyof typeof Icons;
+      role?: string[];
+    }[];
+  }[];
+}) {
+  const pathname = usePathname();
+  // const { data: session } = useSession();
+
+  // const userRole = session?.user.role[0]?.rol ? session.user.role[0].rol :'';
+
+  // console.log(session?.user.role[0]?.rol);
+  return (
+    <SidebarGroup>
+
+      <SidebarGroupLabel>{titleGroup}</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => {
+          const Icon = item.icon ? Icons[item.icon] : Icons.logo;
+          return item?.items && item?.items?.length > 0 ? (
+            <Collapsible
+              key={item.title}
+              asChild
+              defaultOpen={item.isActive}
+              className="group/collapsible"
+            >
+              <SidebarMenuItem>
+                <CollapsibleTrigger asChild>
+                  <SidebarMenuButton
+                    tooltip={item.title}
+                    isActive={pathname === item.url}
+                  >
+                    {item.icon && <Icon />}
+                    <span>{item.title}</span>
+                    <ChevronRightIcon className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                  </SidebarMenuButton>
+                </CollapsibleTrigger>
+
+                <CollapsibleContent>
+                  <SidebarMenuSub>
+                    {item.items?.map((subItem) => (
+                      subItem.role?.includes(role) &&
+                      <SidebarMenuSubItem key={subItem.title}>
+                        <SidebarMenuSubButton
+                          asChild
+                          isActive={pathname === subItem.url}
+                        >
+                          <Link href={subItem.url}>
+                            <span>{subItem.title}</span>
+                          </Link>
+                        </SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    ))}
+                  </SidebarMenuSub>
+                </CollapsibleContent>
+              </SidebarMenuItem>
+            </Collapsible>
+          ) : (
+            <SidebarMenuItem key={item.title}>
+              <SidebarMenuButton
+                asChild
+                tooltip={item.title}
+                isActive={pathname === item.url}
+              >
+                <Link href={item.url}>
+                  <Icon />
+                  <span>{item.title}</span>
+                </Link>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          );
+        })}
+      </SidebarMenu>
+    </SidebarGroup>
+  );
+}