From 09b776e9f0bf85814586d566bf3027c197fd739e Mon Sep 17 00:00:00 2001
From: Bruno Schaatsbergen <git@bschaatsbergen.com>
Date: Sun, 1 Jun 2025 19:38:56 +0200
Subject: [PATCH 1/2] components: allow title clicks to toggle page tree

Clicking on a page title now expands or collapses the page tree. This improves navigation by making the title itself interactive, not just the expand/collapse icon.
---
 nextjs-base/components/sublink.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/nextjs-base/components/sublink.tsx b/nextjs-base/components/sublink.tsx
index b92f611..1b7f617 100644
--- a/nextjs-base/components/sublink.tsx
+++ b/nextjs-base/components/sublink.tsx
@@ -27,10 +27,24 @@ export default function SubLink({
     if (path == href || path.includes(href)) setIsOpen(true);
   }, [href, path]);
 
+  const handleTitleClick = () => {
+    if (items && items.length > 0) {
+      setIsOpen(!isOpen);
+    }
+  };
+
   const Comp = (
     <Anchor
       activeClassName="text-primary dark:font-medium font-semibold"
       href={href}
+      onClick={
+        items && items.length > 0
+          ? (e) => {
+              e.preventDefault();
+              handleTitleClick();
+            }
+          : undefined
+      }
     >
       {title}
       {tag && (
@@ -65,7 +79,7 @@ export default function SubLink({
   return (
     <div className="flex flex-col gap-1 w-full">
       <Collapsible open={isOpen} onOpenChange={setIsOpen}>
-        <CollapsibleTrigger className="w-full pr-5">
+        <CollapsibleTrigger className="w-full pr-5" onClick={handleTitleClick}>
           <div className="flex items-center justify-between cursor-pointer w-full">
             <span className="w-[95%] overflow-hidden text-ellipsis text-start">
               {titleOrLink}

From 46c5e20dbf12fbef2dffb918677cca3198d3523a Mon Sep 17 00:00:00 2001
From: Bruno Schaatsbergen <git@bschaatsbergen.com>
Date: Mon, 2 Jun 2025 12:35:31 +0200
Subject: [PATCH 2/2] components: improve navigation UX in SubLink component

---
 nextjs-base/components/sublink.tsx | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/nextjs-base/components/sublink.tsx b/nextjs-base/components/sublink.tsx
index 1b7f617..91923b2 100644
--- a/nextjs-base/components/sublink.tsx
+++ b/nextjs-base/components/sublink.tsx
@@ -9,7 +9,7 @@ import { cn } from "@/lib/utils";
 import { SheetClose } from "@/components/ui/sheet";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { useEffect, useState } from "react";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 
 export default function SubLink({
   title,
@@ -21,30 +21,31 @@ export default function SubLink({
   tag,
 }: EachRoute & { level: number; isSheet: boolean }) {
   const path = usePathname();
+  const router = useRouter();
   const [isOpen, setIsOpen] = useState(level == 0);
 
   useEffect(() => {
     if (path == href || path.includes(href)) setIsOpen(true);
   }, [href, path]);
 
-  const handleTitleClick = () => {
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Toggle collapsible if has items
     if (items && items.length > 0) {
       setIsOpen(!isOpen);
     }
+
+    // Always navigate to the page
+    router.push(href);
   };
 
   const Comp = (
     <Anchor
       activeClassName="text-primary dark:font-medium font-semibold"
       href={href}
-      onClick={
-        items && items.length > 0
-          ? (e) => {
-              e.preventDefault();
-              handleTitleClick();
-            }
-          : undefined
-      }
+      onClick={handleClick}
     >
       {title}
       {tag && (
@@ -79,8 +80,8 @@ export default function SubLink({
   return (
     <div className="flex flex-col gap-1 w-full">
       <Collapsible open={isOpen} onOpenChange={setIsOpen}>
-        <CollapsibleTrigger className="w-full pr-5" onClick={handleTitleClick}>
-          <div className="flex items-center justify-between cursor-pointer w-full">
+        <CollapsibleTrigger asChild>
+          <div className="flex items-center justify-between cursor-pointer w-full pr-5">
             <span className="w-[95%] overflow-hidden text-ellipsis text-start">
               {titleOrLink}
             </span>