improve model picker

src/components/SidebarNav.tsx

@@ -34,6 +34,7 @@ export type SidebarNavItem = {
     showEE?: boolean;
     isBeta?: boolean;
     items?: SidebarNavItem[];
+    exact?: boolean;
 };
 
 export type SidebarNavSection = {
@@ -49,7 +50,14 @@ export interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
     notificationCounts?: Record<string, number | undefined>;
 }
 
-function isPathActive(pathname: string, href: string): boolean {
+function isPathActive(
+    pathname: string,
+    href: string,
+    exact?: boolean
+): boolean {
+    if (exact) {
+        return pathname === href;
+    }
     return pathname === href || pathname.startsWith(`${href}/`);
 }
 
@@ -289,7 +297,11 @@ function CollapsedNavItemWithPopover({
                                     childItem.href
                                 );
                                 const childIsActive = childHydratedHref
-                                    ? isPathActive(pathname, childHydratedHref)
+                                    ? isPathActive(
+                                          pathname,
+                                          childHydratedHref,
+                                          childItem.exact
+                                      )
                                     : false;
                                 const childIsEE =
                                     build === "enterprise" &&
@@ -396,7 +408,7 @@ export function SidebarNav({
 
     function isItemOrChildActive(item: SidebarNavItem): boolean {
         const hydratedHref = hydrateHref(item.href);
-        if (hydratedHref && isPathActive(pathname, hydratedHref)) {
+        if (hydratedHref && isPathActive(pathname, hydratedHref, item.exact)) {
             return true;
         }
         if (item.items) {
@@ -412,7 +424,7 @@ export function SidebarNav({
         const hydratedHref = hydrateHref(item.href);
         const hasNestedItems = item.items && item.items.length > 0;
         const isActive = hydratedHref
-            ? isPathActive(pathname, hydratedHref)
+            ? isPathActive(pathname, hydratedHref, item.exact)
             : false;
         const isChildActive = hasNestedItems
             ? isItemOrChildActive(item)