app/components/PrevNextLinks.tsx

@@ -68,6 +68,25 @@ export function PrevNextLinks() {
 	const pageContext = usePageContext();
 
 	const allLinks = navigation
+		.sort((a, b) => {
+			// positions order (for sorting):
+			// 1. start
+			// 2. auto | undefined
+			// 3. end
+
+			if (a.position === "start" && b.position !== "start") return -1;
+			if (a.position !== "start" && b.position === "start") return 1;
+
+			if (a.position === "end" && b.position !== "end") return 1;
+			if (a.position !== "end" && b.position === "end") return -1;
+
+			if (a.position === "auto" && b.position !== "auto") return -1;
+			if (a.position !== "auto" && b.position === "auto") return 1;
+
+			if (a.position === undefined && b.position !== undefined) return -1;
+			if (a.position !== undefined && b.position === undefined) return 1;
+			return 0;
+		})
 		.flatMap((section) => section.links)
 		.flatMap((link) => {
 			return link.subitems ? [link, ...link.subitems] : link;

app/layouts/DocsLayout.tsx

@@ -44,21 +44,23 @@ type DocsHeaderProps = {
 };
 
 export function DocsHeader(props: DocsHeaderProps) {
-	const { urlPathname } = usePageContext();
+	const pageContext = usePageContext();
 
-	const section = navigation.find((section) =>
+	const getSection = () => {
-		section.links.find((link) => link.href === urlPathname),
+		return navigation.find((section) =>
+			section.links.find((link) => link.href === pageContext.urlPathname),
 		);
+	};
 
-	if (!props.title && !section) {
+	if (!props.title && !getSection()) {
 		return null;
 	}
 
 	return (
 		<header class="mb-9 space-y-1">
-			{section && (
+			{getSection() && (
 				<p class="font-display text-sm font-medium text-violet-500">
-					{section.title}
+					{getSection()?.title}
 				</p>
 			)}
 			{props.title && (

app/partials/Navigation.tsx

@@ -1,3 +1,5 @@
+import type { NavigationLink } from "@/libs/navigation";
+
 import { chevronDown, chevronUp } from "solid-heroicons/solid";
 import { createEffect, createSignal, For } from "solid-js";
 import { usePageContext } from "vike-solid/usePageContext";
@@ -14,22 +16,32 @@ type NavigationItemProps = {
 function NavigationItem(props: NavigationItemProps) {
 	const pageContext = usePageContext();
 
-	const [isOpened, setIsOpened] = createSignal(
+	const checkIsLinkActive = (link: NavigationLink) => {
-		props.section.links.some(
+		return (
-			(link) =>
 			link.href === pageContext.urlPathname ||
-				link.subitems?.some(
+			link.subitems?.some((subitem) => subitem.href === pageContext.urlPathname)
-					(subitem) => subitem.href === pageContext.urlPathname,
-				),
-		),
 		);
+	};
+
+	const checkIsActive = () => {
+		return props.section.links.some((link) => checkIsLinkActive(link));
+	};
+
+	const [isOpened, setIsOpened] = createSignal(checkIsActive());
+
+	createEffect(() => {
+		// If the current URL path is the same as the link's href, set isOpened to true
+		if (!isOpened() && checkIsActive()) {
+			setIsOpened(true);
+		}
+	}, [pageContext.urlPathname]);
 
 	return (
 		<>
 			<h3
 				class={clsx(
 					"font-display font-medium cursor-pointer",
-					isOpened() ? "text-violet-600" : "text-slate-900",
+					checkIsActive() ? "text-violet-600" : "text-slate-900",
 				)}
 			>
 				<button
@@ -65,12 +77,7 @@ function NavigationItem(props: NavigationItemProps) {
 								<NavigationSubItem
 									link={link}
 									onLinkClick={props.onLinkClick}
-									isOpened={
+									isOpened={checkIsLinkActive(link)}
-										link.href === pageContext.urlPathname ||
-										link.subitems?.some(
-											(subitem) => subitem.href === pageContext.urlPathname,
-										)
-									}
 								/>
 							</li>
 						)}
@@ -82,7 +89,7 @@ function NavigationItem(props: NavigationItemProps) {
 }
 
 type NavigationSubItemProps = {
-	link: (typeof navigation)[number]["links"][number];
+	link: NavigationLink;
 	onLinkClick?: (event: MouseEvent) => void;
 	isOpened?: boolean;
 };
@@ -91,13 +98,15 @@ function NavigationSubItem(props: NavigationSubItemProps) {
 	const [isOpened, setIsOpened] = createSignal(props.isOpened);
 	const pageContext = usePageContext();
 
-	createEffect(() => {
+	const checkIsLinkActive = (link: NavigationLink) => {
-		setIsOpened(
+		return (
-			props.link.href === pageContext.urlPathname ||
+			link.href === pageContext.urlPathname ||
-				props.link.subitems?.some(
+			link.subitems?.some((subitem) => subitem.href === pageContext.urlPathname)
-					(subitem) => subitem.href === pageContext.urlPathname,
-				),
 		);
+	};
+
+	createEffect(() => {
+		setIsOpened(checkIsLinkActive(props.link) || props.isOpened);
 	}, [pageContext.urlPathname, props.link]);
 
 	return (
@@ -136,7 +145,7 @@ function NavigationSubItem(props: NavigationSubItemProps) {
 								props.link.subitems,
 						},
 						props.link.href !== pageContext.urlPathname && "before:hidden",
-						isOpened()
+						checkIsLinkActive(props.link)
 							? "text-violet-500 before:bg-violet-500"
 							: "text-slate-500 before:bg-slate-300 hover:text-slate-600 hover:before:block",
 					)}