feat(wip): Update sidebar nav to be more explorable

Author: mydea

src/components/dynamicNav.tsx

@@ -100,8 +100,35 @@ type ChildrenProps = {
   showDepth?: number;
 };
 
-export function Children({tree, path, exclude = [], showDepth = 0}: ChildrenProps) {
-  return <Fragment>{renderChildren(tree, exclude, path, showDepth)}</Fragment>;
+function TopLevelChildren({tree, path, exclude = [], showDepth = 0}: ChildrenProps) {
+  return sortPages(
+    tree.filter(
+      ({name, node}) =>
+        node &&
+        !!node.context.title &&
+        name !== '' &&
+        exclude.indexOf(node.path) === -1 &&
+        !node.context.sidebar_hidden
+    ),
+    ({node}) => node!
+  ).map(({node, children: nodeChildren}) => {
+    // will not be null because of the filter above
+    if (!node) {
+      return null;
+    }
+    return (
+      <SidebarLink
+        to={node.path}
+        key={node.path}
+        title={node.context.sidebar_title || node.context.title!}
+        collapsed={false}
+        path={path}
+        showChevron={false}
+      >
+        {renderChildren(nodeChildren, exclude, path, showDepth, 1)}
+      </SidebarLink>
+    );
+  });
 }
 
 type Props = {
@@ -184,12 +211,12 @@ export function DynamicNav({
     <li className="mb-3" data-sidebar-branch>
       {header}
       {(!collapse || isActive) && entity.children && (
-        <ul data-sidebar-tree className="pl-3">
+        <ul data-sidebar-tree data-sidebar-tree-root>
           {prependLinks &&
             prependLinks.map(link => (
               <SidebarLink to={link[0]} key={link[0]} title={link[1]} path={linkPath} />
             ))}
-          <Children
+          <TopLevelChildren
             tree={entity.children}
             exclude={exclude}
             showDepth={showDepth}

src/components/sidebar/style.module.scss

@@ -69,6 +69,10 @@
     border-top: 1px solid var(--border-color);
   }
 
+  [data-sidebar-tree-root] > li > [data-sidebar-link] {
+    font-weight: 500;
+  }
+
   .toc {
     font-size: 0.875rem;
     flex: 1;
@@ -89,7 +93,19 @@
     padding-left: 0;
   }
 
-  :global(.toc-item) :global(.toc-item) {
+  [data-sidebar-tree-root] {
+    margin-bottom: 1rem;
+  }
+
+  [data-sidebar-tree-root] > [data-sidebar-branch-has-subtree='true']:not(:first-child) {
+    margin-top: 1rem;
+  }
+
+  [data-sidebar-tree-root] > [data-sidebar-branch-has-subtree='true']:not(:last-child) {
+    margin-bottom: 1rem;
+  }
+
+  :global(.toc-item) :global(.toc-item) :global(.toc-item) {
     padding-left: 0.75rem;
   }
 
@@ -100,23 +116,24 @@
   [data-sidebar-link] {
     position: relative;
     line-height: 1.5;
-    border-radius: 4px;
-    padding: 0.5rem;
+    border-radius: 0;
+    padding: 0.1rem 0rem;
+    margin: 0.4rem 0;
     opacity: 0.8;
     text-decoration: none;
     transition: var(--transition-time) ease-out;
+    border-left: 3px solid transparent;
 
     &:hover {
       opacity: 1;
-      text-decoration: none;
-      color: var(--sidebar-item-color);
-      background-color: var(--sidebar-item-bg-hover);
+      color: var(--accent-purple);
     }
 
     &:global(.active) {
       opacity: 1;
-      color: var(--white);
-      background-color: var(--accent-purple);
+      color: var(--accent-purple);
+      border-left-color: var(--accent-purple);
+      padding-left: 0.3rem;
     }
   }
 }
@@ -128,7 +145,7 @@
   &.active {
     background-color: var(--brandDecoration);
 
-   strong {
+    strong {
       color: #fff;
     }
   }

src/components/sidebarLink.tsx

@@ -27,6 +27,11 @@ interface SidebarLinkProps {
    * Indicates that the links are currently hidden. Overriden by isActive
    */
   collapsed?: boolean | null;
+
+  /**
+   * Whether to show the chevron, if the page has children
+   */
+  showChevron?: boolean;
 }
 
 export function SidebarLink({
@@ -36,6 +41,7 @@ export function SidebarLink({
   path,
   collapsed = null,
   className = '',
+  showChevron = true,
 }: SidebarLinkProps) {
   const isActive = path?.indexOf(to) === 0;
   const enableSubtree = isActive || collapsed === false;
@@ -44,10 +50,16 @@ export function SidebarLink({
   const [showSubtree, setShowSubtree] = useState(enableSubtree);
 
   return (
-    <li className={`toc-item ${className}`} data-sidebar-branch data-path={path}>
+    <li
+      className={`toc-item ${className}`}
+      data-sidebar-branch
+      data-sidebar-branch-has-subtree={hasSubtree}
+      data-path={path}
+    >
       <SidebarNavItem
         to={to}
         data-sidebar-link
+        data-sidebar-link-has-subtree={hasSubtree}
         isActive={to === getUnversionedPath(path)}
         onClick={() => {
           // Allow toggling the sidebar subtree only if the item is selected
@@ -57,9 +69,13 @@ export function SidebarLink({
         }}
       >
         {title || children}
-        {hasSubtree && <Chevron direction={showSubtree ? 'down' : 'right'} />}
+        {hasSubtree && showChevron && (
+          <Chevron direction={showSubtree ? 'down' : 'right'} />
+        )}
       </SidebarNavItem>
-      {title && children && <ul data-sidebar-tree>{showSubtree && children}</ul>}
+      {title && children && hasSubtree && (
+        <ul data-sidebar-tree>{showSubtree && children}</ul>
+      )}
     </li>
   );
 }