fix: select reference sidebar on direct loads

osmium/src/ui/layout/main-navigation.tsx

@@ -1,5 +1,5 @@
 import { createMemo, createSignal, For, Show } from "solid-js";
-import { useBeforeLeave, useLocation, useMatch } from "@solidjs/router";
+import { useBeforeLeave, useLocation } from "@solidjs/router";
 import { Icon } from "solid-heroicons";
 import { chevronDown } from "solid-heroicons/solid";
 import { setIsOpen } from "./mobile-navigation";
@@ -12,6 +12,7 @@ import {
 import { Collapsible } from "@kobalte/core/collapsible";
 import { Tabs } from "@kobalte/core/tabs";
 import VersionSelector from "./version-selector";
+import { getNavigationTabForPath } from "./navigation-tab";
 
 interface MainNavigationProps {}
 
@@ -89,9 +90,8 @@ function DirList(props: { items: SidebarItem[] }) {
 }
 
 export function MainNavigation(_props: MainNavigationProps) {
-	const isReference = useMatch(() => "*/reference/*?");
-
-	const initialTab = () => (isReference() ? "reference" : "learn");
+	const location = useLocation();
+	const initialTab = () => getNavigationTabForPath(location.pathname);
 
 	const [selectedTab, setSelectedTab] = createSignal(initialTab());
 
@@ -110,11 +110,7 @@ export function MainNavigation(_props: MainNavigationProps) {
 	useBeforeLeave(({ to }) => {
 		if (typeof to === "number") return;
 
-		if (to.includes("/reference/")) {
-			setSelectedTab("reference");
-		} else {
-			setSelectedTab("learn");
-		}
+		setSelectedTab(getNavigationTabForPath(to));
 	});
 
 	return (

osmium/src/ui/layout/navigation-tab.test.ts

@@ -0,0 +1,24 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+
+import { getNavigationTabForPath } from "./navigation-tab";
+
+test("selects reference tab for direct reference page loads", () => {
+	assert.equal(
+		getNavigationTabForPath("/reference/secondary-primitives/create-selector"),
+		"reference"
+	);
+});
+
+test("selects reference tab for localized direct reference page loads", () => {
+	assert.equal(
+		getNavigationTabForPath(
+			"/fr/reference/secondary-primitives/create-selector"
+		),
+		"reference"
+	);
+});
+
+test("selects learn tab for non-reference page loads", () => {
+	assert.equal(getNavigationTabForPath("/learn/quick-start"), "learn");
+});

osmium/src/ui/layout/navigation-tab.ts

@@ -0,0 +1,5 @@
+export type NavigationTab = "learn" | "reference";
+
+export function getNavigationTabForPath(pathname: string): NavigationTab {
+	return /(^|\/)reference(\/|$)/.test(pathname) ? "reference" : "learn";
+}