From 6723e21e998187665a3803b6dc73ce914b5f6057 Mon Sep 17 00:00:00 2001
From: Emre K <110906681+kocaemre@users.noreply.github.com>
Date: Sun, 26 Jul 2026 20:08:36 +0200
Subject: [PATCH] fix: select reference sidebar on direct loads

---
 osmium/src/ui/layout/main-navigation.tsx    | 14 +++++-------
 osmium/src/ui/layout/navigation-tab.test.ts | 24 +++++++++++++++++++++
 osmium/src/ui/layout/navigation-tab.ts      |  5 +++++
 3 files changed, 34 insertions(+), 9 deletions(-)
 create mode 100644 osmium/src/ui/layout/navigation-tab.test.ts
 create mode 100644 osmium/src/ui/layout/navigation-tab.ts

diff --git a/osmium/src/ui/layout/main-navigation.tsx b/osmium/src/ui/layout/main-navigation.tsx
index b9426b143..6a9e7590e 100644
--- a/osmium/src/ui/layout/main-navigation.tsx
+++ b/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 (
diff --git a/osmium/src/ui/layout/navigation-tab.test.ts b/osmium/src/ui/layout/navigation-tab.test.ts
new file mode 100644
index 000000000..232e2ed61
--- /dev/null
+++ b/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");
+});
diff --git a/osmium/src/ui/layout/navigation-tab.ts b/osmium/src/ui/layout/navigation-tab.ts
new file mode 100644
index 000000000..516b8aabd
--- /dev/null
+++ b/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";
+}