From a7a27c6b690580a5ba94edd7e42cd4ab3e0c1d29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Rafael=20Siqueira?= Date: Wed, 5 Nov 2025 21:39:06 -0300 Subject: [PATCH] update menu --- .../app/components/app-sidebar.tsx | 6 +- .../app/components/org-switcher.tsx | 16 +- .../_.$orgid.enrollments._index/route.tsx | 2 +- packages/ui/package.json | 1 + .../ui/src/components/ui/navigation-menu.tsx | 168 ++++++++++++++++++ 5 files changed, 187 insertions(+), 6 deletions(-) create mode 100644 packages/ui/src/components/ui/navigation-menu.tsx diff --git a/apps/admin.saladeaula.digital/app/components/app-sidebar.tsx b/apps/admin.saladeaula.digital/app/components/app-sidebar.tsx index 767ae3c..24207e6 100644 --- a/apps/admin.saladeaula.digital/app/components/app-sidebar.tsx +++ b/apps/admin.saladeaula.digital/app/components/app-sidebar.tsx @@ -68,11 +68,11 @@ const data = { export function AppSidebar({ orgs = [] }) { return ( - - + + - + diff --git a/apps/admin.saladeaula.digital/app/components/org-switcher.tsx b/apps/admin.saladeaula.digital/app/components/org-switcher.tsx index 690bed2..5cbc35a 100644 --- a/apps/admin.saladeaula.digital/app/components/org-switcher.tsx +++ b/apps/admin.saladeaula.digital/app/components/org-switcher.tsx @@ -18,8 +18,10 @@ import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, + SidebarRail, useSidebar } from '@repo/ui/components/ui/sidebar' +import { initials } from '@repo/ui/lib/utils' type Org = { id: string @@ -29,7 +31,7 @@ type Org = { export function OrgSwitcher({ orgs }: { orgs: Org[] }) { const location = useLocation() - const { isMobile } = useSidebar() + const { isMobile, state } = useSidebar() const { orgid } = useParams() const org = orgs.find((org) => org.id === orgid) as Org const [activeOrg, setActiveOrg] = useState(org) @@ -47,8 +49,14 @@ export function OrgSwitcher({ orgs }: { orgs: Org[] }) { +
+ {initials(activeOrg?.name)} +
{activeOrg?.name} @@ -74,6 +82,9 @@ export function OrgSwitcher({ orgs }: { orgs: Org[] }) { className="group gap-2 p-2 cursor-pointer aria-selected:pointer-events-none" aria-selected={org.id === activeOrg.id} > +
+ {initials(org?.name)} +
{org?.name} @@ -97,6 +108,7 @@ export function OrgSwitcher({ orgs }: { orgs: Org[] }) { + ) } diff --git a/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments._index/route.tsx b/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments._index/route.tsx index 9b6ece1..341c5e4 100644 --- a/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments._index/route.tsx +++ b/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments._index/route.tsx @@ -1,6 +1,6 @@ import type { Route } from './+types' -import { BookCopyIcon, PlusCircleIcon, PlusIcon } from 'lucide-react' +import { PlusCircleIcon, PlusIcon } from 'lucide-react' import { DateTime } from 'luxon' import { MeiliSearchFilterBuilder } from 'meilisearch-helper' import { Suspense, useState } from 'react' diff --git a/packages/ui/package.json b/packages/ui/package.json index c8955a0..165bc30 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -20,6 +20,7 @@ "@radix-ui/react-dialog": "^1.1.15", "@radix-ui/react-dropdown-menu": "^2.1.16", "@radix-ui/react-label": "^2.1.7", + "@radix-ui/react-navigation-menu": "^1.2.14", "@radix-ui/react-popover": "^1.1.15", "@radix-ui/react-progress": "^1.1.8", "@radix-ui/react-select": "^2.2.6", diff --git a/packages/ui/src/components/ui/navigation-menu.tsx b/packages/ui/src/components/ui/navigation-menu.tsx new file mode 100644 index 0000000..1199945 --- /dev/null +++ b/packages/ui/src/components/ui/navigation-menu.tsx @@ -0,0 +1,168 @@ +import * as React from "react" +import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu" +import { cva } from "class-variance-authority" +import { ChevronDownIcon } from "lucide-react" + +import { cn } from "@/lib/utils" + +function NavigationMenu({ + className, + children, + viewport = true, + ...props +}: React.ComponentProps & { + viewport?: boolean +}) { + return ( + + {children} + {viewport && } + + ) +} + +function NavigationMenuList({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function NavigationMenuItem({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +const navigationMenuTriggerStyle = cva( + "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1" +) + +function NavigationMenuTrigger({ + className, + children, + ...props +}: React.ComponentProps) { + return ( + + {children}{" "} + + ) +} + +function NavigationMenuContent({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function NavigationMenuViewport({ + className, + ...props +}: React.ComponentProps) { + return ( +
+ +
+ ) +} + +function NavigationMenuLink({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function NavigationMenuIndicator({ + className, + ...props +}: React.ComponentProps) { + return ( + +
+ + ) +} + +export { + NavigationMenu, + NavigationMenuList, + NavigationMenuItem, + NavigationMenuContent, + NavigationMenuTrigger, + NavigationMenuLink, + NavigationMenuIndicator, + NavigationMenuViewport, + navigationMenuTriggerStyle, +}