From 3698d13e77bd7bb2b7b4a21ebcf460e910b7939e Mon Sep 17 00:00:00 2001
From: Will Ezell <will@dotcms.com>
Date: Wed, 15 Jan 2025 22:45:01 -0500
Subject: [PATCH 1/2] minor tweaks

---
 components/content-types/Documentation.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/content-types/Documentation.js b/components/content-types/Documentation.js
index 20b71d8..8fabf8a 100644
--- a/components/content-types/Documentation.js
+++ b/components/content-types/Documentation.js
@@ -34,7 +34,7 @@ const Documentation = ({ contentlet, sideNav }) => {
   return (
     <div className="container mx-auto flex min-h-screen gap-12 py-8">
       {/* Left Navigation */}
-      <div className="w-72 border-r pr-8">
+      <div className="w-64 border-r pr-8">
         <nav className="sticky top-8">
           <h2 className="mb-4 text-lg font-semibold">Documentation</h2>
           <NavTree 
@@ -45,7 +45,7 @@ const Documentation = ({ contentlet, sideNav }) => {
       </div>
 
       {/* Main Content */}
-      <div className="pl-8 flex-1 min-w-0 overflow-x-hidden" >
+      <div className="pl-4 flex-1 min-w-0 overflow-x-hidden" >
         <Breadcrumbs 
           items={sideNav[0]?.dotcmsdocumentationchildren || []} 
           currentPath={currentPath}
@@ -57,7 +57,7 @@ const Documentation = ({ contentlet, sideNav }) => {
       </div>
 
       {/* Right Sidebar - Table of Contents */}
-      <div className="max-w-8">
+      <div className="max-w-8 pl-4 flex min-w-16">
         <OnThisPage />
       </div>
     </div>

From d4104cb51988e7fb8dd3dc59de9d70c2ddeaa9f5 Mon Sep 17 00:00:00 2001
From: Will Ezell <will@dotcms.com>
Date: Thu, 16 Jan 2025 11:17:55 -0500
Subject: [PATCH 2/2] nav width

---
 components/content-types/Documentation.js | 13 ++++++-------
 components/navigation/NavTree.js          | 15 ++++++++-------
 components/navigation/OnThisPage.js       |  2 +-
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/components/content-types/Documentation.js b/components/content-types/Documentation.js
index 8fabf8a..42a69f6 100644
--- a/components/content-types/Documentation.js
+++ b/components/content-types/Documentation.js
@@ -32,11 +32,10 @@ const Documentation = ({ contentlet, sideNav }) => {
   const documentation = cleanMarkdown(contentlet.documentation, contentlet.identifier);
 
   return (
-    <div className="container mx-auto flex min-h-screen gap-12 py-8">
+    <div className="container flex min-h-svh py-4">
       {/* Left Navigation */}
-      <div className="w-64 border-r pr-8">
-        <nav className="sticky top-8">
-          <h2 className="mb-4 text-lg font-semibold">Documentation</h2>
+      <div className="w-96 border-r pr-8">
+        <nav >
           <NavTree 
             items={sideNav[0]?.dotcmsdocumentationchildren || []} 
             currentPath={currentPath}
@@ -45,7 +44,7 @@ const Documentation = ({ contentlet, sideNav }) => {
       </div>
 
       {/* Main Content */}
-      <div className="pl-4 flex-1 min-w-0 overflow-x-hidden" >
+      <div className="px-8 overflow-x-hidden" >
         <Breadcrumbs 
           items={sideNav[0]?.dotcmsdocumentationchildren || []} 
           currentPath={currentPath}
@@ -57,9 +56,9 @@ const Documentation = ({ contentlet, sideNav }) => {
       </div>
 
       {/* Right Sidebar - Table of Contents */}
-      <div className="max-w-8 pl-4 flex min-w-16">
+      <aside className="w-64" >
         <OnThisPage />
-      </div>
+      </aside>
     </div>
   );
 };
diff --git a/components/navigation/NavTree.js b/components/navigation/NavTree.js
index 0327756..4cabd3b 100644
--- a/components/navigation/NavTree.js
+++ b/components/navigation/NavTree.js
@@ -1,4 +1,4 @@
-"use client"
+
 import React, { useState, useCallback, useEffect } from 'react';
 import Link from 'next/link';
 import { ChevronRight } from 'lucide-react';
@@ -9,7 +9,7 @@ import {
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
 
-const NavTree = React.memo(({ items, currentPath }) => {
+const NavTree = React.memo(({ items, currentPath, level = 0 }) => {
   const [openSections, setOpenSections] = useState([]);
   const relevantPath = currentPath.replace(/^\/docs\/latest\//, '');
 
@@ -45,6 +45,7 @@ const NavTree = React.memo(({ items, currentPath }) => {
   const renderNavItem = useCallback((item) => {
     const isCurrentPage = item.urlTitle === relevantPath;
     const hasChildren = item.dotcmsdocumentationchildren && item.dotcmsdocumentationchildren.length > 0;
+    const paddingY = level === 0 ? 'py-3' : level === 1 ? 'py-2' : 'py-1';
 
     if (hasChildren) {
       return (
@@ -54,7 +55,7 @@ const NavTree = React.memo(({ items, currentPath }) => {
         >
           <div className="flex flex-col">
             <div className={cn(
-                "flex w-full items-center justify-between rounded-lg px-4 py-2 text-sm font-medium hover:bg-muted",
+                `flex w-full items-center justify-between rounded-lg px-4 ${paddingY} text-sm font-medium hover:bg-muted`,
                 isCurrentPage ? "bg-muted font-medium text-foreground" : "text-muted-foreground"
                 )}>
               <Link
@@ -66,7 +67,7 @@ const NavTree = React.memo(({ items, currentPath }) => {
               >
                 {item.title}
               </Link>
-              <CollapsibleTrigger className="p-1">
+              <CollapsibleTrigger className="p-0">
                 <ChevronRight
                   className={cn(
                     "h-4 w-4 transition-transform duration-200",
@@ -76,7 +77,7 @@ const NavTree = React.memo(({ items, currentPath }) => {
               </CollapsibleTrigger>
             </div>
             <CollapsibleContent className="pl-4">
-              <NavTree items={item.dotcmsdocumentationchildren} currentPath={currentPath} />
+              <NavTree items={item.dotcmsdocumentationchildren} currentPath={currentPath} level={level + 1}/>
             </CollapsibleContent>
           </div>
         </Collapsible>
@@ -86,7 +87,7 @@ const NavTree = React.memo(({ items, currentPath }) => {
         <Link
           href={`/docs/latest/${item.urlTitle}`}
           className={cn(
-            "block rounded-lg px-4 py-2 text-sm hover:bg-muted hover:text-foreground",
+            `block rounded-lg px-4 ${paddingY} text-sm hover:bg-muted hover:text-foreground`,
             isCurrentPage ? "bg-muted font-medium text-foreground" : "text-muted-foreground"
           )}
         >
@@ -97,7 +98,7 @@ const NavTree = React.memo(({ items, currentPath }) => {
   }, [relevantPath, openSections, toggleSection]);
 
   return (
-    <div className="space-y-2">
+    <div className="space-y-2 w-72">
       {items.map((item) => (
         <div key={item.title}>
           {renderNavItem(item)}
diff --git a/components/navigation/OnThisPage.js b/components/navigation/OnThisPage.js
index f54be32..d9a2b02 100644
--- a/components/navigation/OnThisPage.js
+++ b/components/navigation/OnThisPage.js
@@ -54,7 +54,7 @@ export const OnThisPage = () => {
   }
 
   return (
-    <div className="sticky top-8">
+    <div className="sticky top-8 w-64">
       <h3 className="mb-4 text-sm font-semibold">On This Page</h3>
       <nav className="text-sm">
         <ul className="space-y-2 text-muted-foreground">