Merge pull request #20 from dotCMS/sidenav-tweaks

JC added a cleaner look for the sidenav
dotCMS · Jan 21, 2025 · 899984e · 899984e
2 parents eda9a75 + 9dbcb00
commit 899984e
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 11 deletions.
diff --git a/components/content-types/Documentation.js b/components/content-types/Documentation.js
@@ -60,7 +60,7 @@ const Documentation = ({ contentlet, sideNav }) => {
       <div className="w-72 shrink-0">
         <nav 
           ref={navRef}
-          className="h-[calc(100vh-4rem)] overflow-y-auto sticky top-16 p-4 pt-8 
+          className="h-[calc(100vh-4rem)] overflow-y-auto sticky top-16 p-4 pt-8 px-2
             [&::-webkit-scrollbar]:w-1.5
             [&::-webkit-scrollbar-track]:bg-transparent
             [&::-webkit-scrollbar-thumb]:bg-muted-foreground/10

diff --git a/components/navigation/NavTree.js b/components/navigation/NavTree.js
@@ -6,10 +6,10 @@ const NavTree = React.memo(({ items, currentPath, level = 0 }) => {
 
   return (
     <div className="h-dvh">
-      <div className="space-y-2 min-w-64 pb-12">
+      <div className="space-t-2 min-w-64 pb-12">
         {items.map((item) => (
-          <div key={item.title}>
-            <div className="py-1 font-semibold">{item.title}</div>
+          <div key={item.title} className="mb-5">
+            <div className="py-1 px-2 font-semibold">{item.title}</div>
             <SubNavTree items={item.dotcmsdocumentationchildren} currentPath={currentPath} level="0"/>
           </div>
         ))}

diff --git a/components/navigation/SubNavTree.js b/components/navigation/SubNavTree.js
@@ -68,10 +68,9 @@ const SubNavTree = React.memo(({ items, currentPath, level = 0 }) => {
   }, [items, relevantPath]);
 
   const renderNavItem = useCallback((item) => {
-
     const isCurrentPage = item.urlTitle === relevantPath;
     const hasChildren = item.dotcmsdocumentationchildren && item.dotcmsdocumentationchildren.length > 0;
-    const paddingY =  'py-2' ;
+    const paddingY = 'py-1.5';
 
     if (hasChildren) {
       return (
@@ -81,7 +80,7 @@ const SubNavTree = React.memo(({ items, currentPath, level = 0 }) => {
         >
           <div className="flex flex-col">
             <div className={cn(
-                ` text-slate-400 flex px-1 w-full items-center justify-between rounded-lg ${paddingY} text-sm hover:bg-muted`,
+                `text-slate-400 flex px-2 w-full items-center justify-between rounded-lg ${paddingY} text-sm hover:bg-muted`,
                 isCurrentPage ? "bg-muted text-foreground" : "text-muted-foreground"
                 )}>
               <Link
@@ -102,7 +101,7 @@ const SubNavTree = React.memo(({ items, currentPath, level = 0 }) => {
                 />
               </CollapsibleTrigger>
             </div>
-            <CollapsibleContent className="pl-3">
+            <CollapsibleContent className="pl-3 border-l border-muted ml-2">
               <SubNavTree items={item.dotcmsdocumentationchildren} currentPath={currentPath} level={level + 1}/>
             </CollapsibleContent>
           </div>
@@ -113,8 +112,8 @@ const SubNavTree = React.memo(({ items, currentPath, level = 0 }) => {
         <Link
           href={`/docs/latest/${item.urlTitle}`}
           className={cn(
-            ` text-slate-400 block rounded-lg px-1 ${paddingY} text-sm hover:bg-muted hover:text-foreground`,
-            isCurrentPage ? "bg-muted  text-foreground" : "text-muted-foreground"
+            `text-slate-400 block rounded-lg px-2 ${paddingY} text-sm hover:bg-muted hover:text-foreground`,
+            isCurrentPage ? "bg-muted text-foreground" : "text-muted-foreground"
           )}
         >
           {item.title}
@@ -124,7 +123,7 @@ const SubNavTree = React.memo(({ items, currentPath, level = 0 }) => {
   }, [relevantPath, openSections, toggleSection]);
 
   return (
-    <div>
+    <div className="space-y-1 pt-1">
       {items.map((item) => (
         <div key={item.title}>
           {renderNavItem(item)}