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 (
+
+
+
+
+
+
+
+ );
+}
+
export function DropdownNavbarItem({
- group: { label, links },
+ group: { label, links, sections },
}: DropdownNavbarItemProps) {
return (
@@ -22,25 +40,28 @@ export function DropdownNavbarItem({
{label}
-
- {links.map(({ href, label, icon }) => (
- -
-
-
-
-
-
-
- ))}
-
+ {sections ? (
+
+ {sections.map((section) => (
+
+
+ {section.heading}
+
+
+ {section.links.map((link) => (
+
+ ))}
+
+
+ ))}
+
+ ) : (
+
+ {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,
});
}