update package

apps/insights.saladeaula.digital/app/components/app-sidebar.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import {
+  Building2Icon,
+  DollarSign,
+  GraduationCap,
+  LayoutDashboard,
+  UsersIcon,
+  WebhookIcon
+} from 'lucide-react'
+
+import { NavMain } from '@/components/nav-main'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarRail
+} from '@repo/ui/components/ui/sidebar'
+
+const navMain = [
+  {
+    title: 'Visão geral',
+    url: '/',
+    icon: LayoutDashboard
+  },
+  {
+    title: 'Pagamentos',
+    url: '/payments',
+    icon: DollarSign
+  },
+  {
+    title: 'Matrículas',
+    url: '/enrollments',
+    icon: GraduationCap
+  },
+  {
+    title: 'Usuários',
+    url: '/users',
+    icon: UsersIcon
+  },
+  {
+    title: 'Empresas',
+    url: '/orgs',
+    icon: Building2Icon
+  },
+  {
+    title: 'Webhooks',
+    url: '/webhooks',
+    icon: WebhookIcon
+  }
+]
+
+export function AppSidebar() {
+  return (
+    <Sidebar collapsible="icon">
+      <SidebarContent>
+        <SidebarRail />
+        <NavMain navMain={navMain} />
+      </SidebarContent>
+      <SidebarFooter />
+    </Sidebar>
+  )
+}

apps/insights.saladeaula.digital/app/components/nav-main.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar
+} from '@repo/ui/components/ui/sidebar'
+import { useIsMobile } from '@repo/ui/hooks/use-mobile'
+
+import { type LucideIcon } from 'lucide-react'
+import { NavLink, useParams } from 'react-router'
+
+type NavItem = {
+  title: string
+  url: string
+  icon?: LucideIcon
+}
+
+export function NavMain({ navMain }: { navMain: NavItem[] }) {
+  return (
+    <>
+      <SidebarGroup>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            {navMain.map((props, idx) => (
+              <SidebarMenuItemLink key={idx} {...props} />
+            ))}
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </>
+  )
+}
+
+function SidebarMenuItemLink({ title, url, icon: Icon }: NavItem) {
+  const { toggleSidebar } = useSidebar()
+  const isMobile = useIsMobile()
+
+  const onToggle = () => (isMobile ? toggleSidebar() : null)
+
+  return (
+    <SidebarMenuItem key={title} onClick={onToggle}>
+      <NavLink to={url}>
+        {({ isActive }) => (
+          <SidebarMenuButton
+            asChild
+            className="data-[active=true]:text-lime-500"
+            isActive={isActive}
+            tooltip={title}
+          >
+            <span>
+              {Icon ? <Icon /> : null}
+              <span>{title}</span>
+            </span>
+          </SidebarMenuButton>
+        )}
+      </NavLink>
+    </SidebarMenuItem>
+  )
+}