From fc4e5b4ed45251ace23241a6ff3135f65d831132 Mon Sep 17 00:00:00 2001
From: Ethan Swan <ethanpswan@gmail.com>
Date: Mon, 6 Apr 2026 05:21:59 -0500
Subject: [PATCH 1/2] Split competitions dropdown into Private and Public
 sections

Competitions in the navbar dropdown are now grouped under "Private" and
"Public" headings. If the user has no private competitions, that section
is omitted entirely. Applies to both desktop and mobile navigation.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 components/navbar/dropdown-navbar-item.tsx | 63 ++++++++++++++--------
 components/navbar/mobile-dropdown-item.tsx | 47 ++++++++++------
 components/navbar/nav-types.ts             |  8 ++-
 components/navbar/navbar.tsx               | 24 ++++++---
 4 files changed, 99 insertions(+), 43 deletions(-)

diff --git a/components/navbar/dropdown-navbar-item.tsx b/components/navbar/dropdown-navbar-item.tsx
index 71615c6c..fb7bdc25 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 (
+    <li key={href}>
+      <NavigationMenuLink asChild>
+        <Link
+          href={href}
+          className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+        >
+          <div className="flex items-center space-x-2">
+            {icon}
+            <div className="text-sm font-medium leading-none">{label}</div>
+          </div>
+        </Link>
+      </NavigationMenuLink>
+    </li>
+  );
+}
+
 export function DropdownNavbarItem({
-  group: { label, links },
+  group: { label, links, sections },
 }: DropdownNavbarItemProps) {
   return (
     <NavigationMenuItem>
@@ -22,25 +40,28 @@ export function DropdownNavbarItem({
         {label}
       </NavigationMenuTrigger>
       <NavigationMenuContent>
-        <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
-          {links.map(({ href, label, icon }) => (
-            <li key={href}>
-              <NavigationMenuLink asChild>
-                <Link
-                  href={href}
-                  className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
-                >
-                  <div className="flex items-center space-x-2">
-                    {icon}
-                    <div className="text-sm font-medium leading-none">
-                      {label}
-                    </div>
-                  </div>
-                </Link>
-              </NavigationMenuLink>
-            </li>
-          ))}
-        </ul>
+        {sections ? (
+          <div className="flex w-[400px] gap-4 p-4 md:w-[500px] lg:w-[600px]">
+            {sections.map((section) => (
+              <div key={section.heading} className="flex-1">
+                <h4 className="mb-2 px-3 text-sm font-semibold text-muted-foreground">
+                  {section.heading}
+                </h4>
+                <ul className="grid gap-1">
+                  {section.links.map((link) => (
+                    <LinkItem key={link.href} {...link} />
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+            {links?.map((link) => (
+              <LinkItem key={link.href} {...link} />
+            ))}
+          </ul>
+        )}
       </NavigationMenuContent>
     </NavigationMenuItem>
   );
diff --git a/components/navbar/mobile-dropdown-item.tsx b/components/navbar/mobile-dropdown-item.tsx
index 65876383..f96e446e 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 (
+    <SheetClose asChild key={href}>
+      <Link href={href}>
+        <Button
+          variant="ghost"
+          className="w-full justify-start h-10 text-sm pl-6"
+        >
+          <span className="mr-3">{icon}</span>
+          {label}
+        </Button>
+      </Link>
+    </SheetClose>
+  );
+}
+
 export function MobileDropdownItem({
-  group: { label, links },
+  group: { label, links, sections },
   isExpanded,
   onToggle,
 }: MobileDropdownItemProps) {
@@ -33,19 +49,20 @@ export function MobileDropdownItem({
       </Button>
       {isExpanded && (
         <div className="space-y-1 pl-4">
-          {links.map(({ href, label, icon }) => (
-            <SheetClose asChild key={href}>
-              <Link href={href}>
-                <Button
-                  variant="ghost"
-                  className="w-full justify-start h-10 text-sm pl-6"
-                >
-                  <span className="mr-3">{icon}</span>
-                  {label}
-                </Button>
-              </Link>
-            </SheetClose>
-          ))}
+          {sections
+            ? sections.map((section) => (
+                <div key={section.heading} className="space-y-1">
+                  <div className="px-6 py-1 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                    {section.heading}
+                  </div>
+                  {section.links.map((link) => (
+                    <MobileLinkItem key={link.href} {...link} />
+                  ))}
+                </div>
+              ))
+            : links?.map((link) => (
+                <MobileLinkItem key={link.href} {...link} />
+              ))}
         </div>
       )}
     </div>
diff --git a/components/navbar/nav-types.ts b/components/navbar/nav-types.ts
index 9af54e66..70d89330 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 150fe426..6a6f0552 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: <Medal size={16} />,
+    });
+
+    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: <Medal size={16} />,
-      })),
+      sections,
     });
   }
 

From 4971348d6c383dd2cebf0dd44c519791d683489a Mon Sep 17 00:00:00 2001
From: Ethan Swan <ethanpswan@gmail.com>
Date: Mon, 6 Apr 2026 05:39:49 -0500
Subject: [PATCH 2/2] Make competitions dropdown width dynamic and improve line
 spacing

Use w-max with a max-w cap instead of fixed widths so the dropdown
panel shrinks to fit one section or expands for two. Also change
link label leading from none to snug for better readability when
competition names wrap to two lines.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 components/navbar/dropdown-navbar-item.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/navbar/dropdown-navbar-item.tsx b/components/navbar/dropdown-navbar-item.tsx
index fb7bdc25..354624b3 100644
--- a/components/navbar/dropdown-navbar-item.tsx
+++ b/components/navbar/dropdown-navbar-item.tsx
@@ -23,7 +23,7 @@ function LinkItem({ href, label, icon }: NavLink) {
         >
           <div className="flex items-center space-x-2">
             {icon}
-            <div className="text-sm font-medium leading-none">{label}</div>
+            <div className="text-sm font-medium leading-snug">{label}</div>
           </div>
         </Link>
       </NavigationMenuLink>
@@ -41,7 +41,7 @@ export function DropdownNavbarItem({
       </NavigationMenuTrigger>
       <NavigationMenuContent>
         {sections ? (
-          <div className="flex w-[400px] gap-4 p-4 md:w-[500px] lg:w-[600px]">
+          <div className="flex w-max max-w-[600px] gap-4 p-4">
             {sections.map((section) => (
               <div key={section.heading} className="flex-1">
                 <h4 className="mb-2 px-3 text-sm font-semibold text-muted-foreground">