diff --git a/components/navbar/dropdown-navbar-item.tsx b/components/navbar/dropdown-navbar-item.tsx index 71615c6..354624b 100644 --- a/components/navbar/dropdown-navbar-item.tsx +++ b/components/navbar/dropdown-navbar-item.tsx @@ -7,14 +7,32 @@ import { NavigationMenuLink, NavigationMenuTrigger, } from "@/components/ui/navigation-menu"; -import { NavLinkGroup } from "./nav-types"; +import { NavLink, NavLinkGroup } from "./nav-types"; interface DropdownNavbarItemProps { group: NavLinkGroup; } +function LinkItem({ href, label, icon }: NavLink) { + return ( +
  • + + +
    + {icon} +
    {label}
    +
    + +
    +
  • + ); +} + export function DropdownNavbarItem({ - group: { label, links }, + group: { label, links, sections }, }: DropdownNavbarItemProps) { return ( @@ -22,25 +40,28 @@ export function DropdownNavbarItem({ {label} - + {sections ? ( +
    + {sections.map((section) => ( +
    +

    + {section.heading} +

    +
      + {section.links.map((link) => ( + + ))} +
    +
    + ))} +
    + ) : ( + + )}
    ); diff --git a/components/navbar/mobile-dropdown-item.tsx b/components/navbar/mobile-dropdown-item.tsx index 6587638..f96e446 100644 --- a/components/navbar/mobile-dropdown-item.tsx +++ b/components/navbar/mobile-dropdown-item.tsx @@ -4,7 +4,7 @@ import Link from "next/link"; import { ChevronDown } from "lucide-react"; import { Button } from "@/components/ui/button"; import { SheetClose } from "@/components/ui/sheet"; -import { NavLinkGroup } from "./nav-types"; +import { NavLink, NavLinkGroup } from "./nav-types"; interface MobileDropdownItemProps { group: NavLinkGroup; @@ -12,8 +12,24 @@ interface MobileDropdownItemProps { onToggle: () => void; } +function MobileLinkItem({ href, label, icon }: NavLink) { + return ( + + + + + + ); +} + export function MobileDropdownItem({ - group: { label, links }, + group: { label, links, sections }, isExpanded, onToggle, }: MobileDropdownItemProps) { @@ -33,19 +49,20 @@ export function MobileDropdownItem({ {isExpanded && (
    - {links.map(({ href, label, icon }) => ( - - - - - - ))} + {sections + ? sections.map((section) => ( +
    +
    + {section.heading} +
    + {section.links.map((link) => ( + + ))} +
    + )) + : links?.map((link) => ( + + ))}
    )} diff --git a/components/navbar/nav-types.ts b/components/navbar/nav-types.ts index 9af54e6..70d8933 100644 --- a/components/navbar/nav-types.ts +++ b/components/navbar/nav-types.ts @@ -6,7 +6,13 @@ export type NavLink = { icon?: ReactElement; }; +export type NavLinkSection = { + heading: string; + links: NavLink[]; +}; + export type NavLinkGroup = { label: string; - links: NavLink[]; + links?: NavLink[]; + sections?: NavLinkSection[]; }; diff --git a/components/navbar/navbar.tsx b/components/navbar/navbar.tsx index 150fe42..6a6f055 100644 --- a/components/navbar/navbar.tsx +++ b/components/navbar/navbar.tsx @@ -33,7 +33,7 @@ import { useCurrentUser } from "@/hooks/useCurrentUser"; import { getCompetitions } from "@/lib/db_actions/competitions"; import { Competition } from "@/types/db_types"; import { getCompetitionStatusFromObject } from "@/lib/competition-status"; -import { NavLink, NavLinkGroup } from "./nav-types"; +import { NavLink, NavLinkGroup, NavLinkSection } from "./nav-types"; import { DropdownNavbarItem } from "./dropdown-navbar-item"; import { MobileDropdownItem } from "./mobile-dropdown-item"; @@ -78,13 +78,25 @@ export default function NavBar() { // Add competitions section if there are any competitions if (competitions.length > 0) { + const privateComps = competitions.filter((c) => c.is_private); + const publicComps = competitions.filter((c) => !c.is_private); + const toNavLink = (competition: Competition): NavLink => ({ + href: `/competitions/${competition.id}`, + label: competition.name, + icon: , + }); + + const sections: NavLinkSection[] = []; + if (privateComps.length > 0) { + sections.push({ heading: "Private", links: privateComps.map(toNavLink) }); + } + if (publicComps.length > 0) { + sections.push({ heading: "Public", links: publicComps.map(toNavLink) }); + } + links.push({ label: "Competitions", - links: competitions.map((competition) => ({ - href: `/competitions/${competition.id}`, - label: competition.name, - icon: , - })), + sections, }); }