WIP: Experiment with navigation sidebar

src/components/dynamicNav.tsx

@@ -1,5 +1,3 @@
-import {Fragment} from 'react';
-
 import {serverContext} from 'sentry-docs/serverContext';
 import {sortPages} from 'sentry-docs/utils';
 import {getUnversionedPath, VERSION_INDICATOR} from 'sentry-docs/versioning';
@@ -100,8 +98,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 = {
@@ -171,25 +196,25 @@ export function DynamicNav({
         activeClassName="active"
         data-sidebar-link
       >
-        <h6>{title}</h6>
+        <strong>{title}</strong>
         {withChevron && <NavChevron direction={isActive ? 'down' : 'right'} />}
       </SmartLink>
     ) : (
       <div className={headerClassName} data-sidebar-link>
-        <h6>{title}</h6>
+        <strong>{title}</strong>
       </div>
     );
 
   return (
     <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 className="pl-2">
           {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/guideGrid.tsx

@@ -27,9 +27,7 @@ export function GuideGrid({platform, className}: Props) {
 
   return (
     <Fragment>
-      <div className="doc-toc-title">
-        <h6>Related Guides</h6>
-      </div>
+      <h2>Related Guides</h2>
       <ul className={className}>
         {currentPlatform.guides.map(guide => (
           <li key={guide.key}>

src/components/search/index.tsx

@@ -345,10 +345,10 @@ export function Search({
             >
               <MagicIcon className="size-6 text-[var(--sgs-color-hit-highlight)] flex-shrink-0" />
               <div className={styles['sgs-ai-button-content']}>
-                <h6>
+                <div className={styles['sgs-ai-button-heading']}>
                   Ask Sentry about{' '}
                   <span>{query.length > 30 ? query.slice(0, 30) + '...' : query}</span>
-                </h6>
+                </div>
                 <div className={styles['sgs-ai-hint']}>
                   Get an AI-powered answer to your question
                 </div>

src/components/search/search.module.scss

@@ -170,13 +170,6 @@
     padding: 0;
   }
 
-  h6 {
-    margin-top: 0;
-    margin-bottom: 0.25rem;
-    font-size: 0.875rem;
-    color: var(--sgs-color-hit-text);
-  }
-
   a {
     display: block;
     text-decoration: none;
@@ -192,6 +185,12 @@
   }
 }
 
+.sgs-hit-title {
+  margin-bottom: 0.25rem;
+  font-size: 0.875rem;
+  color: var(--sgs-color-hit-text);
+}
+
 .sgs-ai {
   color: var(--sgs-color-hit-text);
   padding: 0.25rem;
@@ -214,15 +213,17 @@
       flex-direction: column;
       align-items: flex-start;
       flex: 1;
+    }
 
-      h6 {
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-        margin: 0;
+    &-heading {
+      margin-bottom: 0.25rem;
+      font-size: 0.875rem;
+      color: var(--sgs-color-hit-text);
+      line-height: 1.25rem;
+      margin: 0;
 
-        span {
-          color: var(--sgs-color-hit-highlight);
-        }
+      span {
+        color: var(--sgs-color-hit-highlight);
       }
     }
   }

src/components/search/searchResultItems.tsx

@@ -67,15 +67,15 @@ export function SearchResultItems({
                     onClick={event => onSearchResultClick({event, hit, position: index})}
                   >
                     {hit.title && (
-                      <h6>
+                      <div className={styles['sgs-hit-title']}>
                         <span
                           dangerouslySetInnerHTML={{
                             __html: DOMPurify.sanitize(hit.title, {
                               ALLOWED_TAGS: ['mark'],
                             }),
                           }}
                         />
-                      </h6>
+                      </div>
                     )}
                     {hit.text && (
                       <span

src/components/sidebar/defaultSidebar.tsx

@@ -49,7 +49,9 @@ export function DefaultSidebar({node, path}: DefaultSidebarProps) {
             data-sidebar-link
             key={node.path}
           >
-            <h6>{node.frontmatter.sidebar_title || node.frontmatter.title}</h6>
+            <div className={styles['sidebar-link-heading']}>
+              {node.frontmatter.sidebar_title || node.frontmatter.title}
+            </div>
           </Link>
           {renderChildren(node.children)}
         </Fragment>

src/components/sidebar/platformSidebar.tsx

@@ -53,7 +53,6 @@ export function PlatformSidebar({
         title={`Sentry for ${(guide || platform).title}`}
         exclude={[`/${pathRoot}/guides/`]}
         headerClassName={headerClassName}
-        withChevron
       />
     </ul>
   );

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.5rem;
     }
   }
 }
@@ -128,16 +145,18 @@
   &.active {
     background-color: var(--brandDecoration);
 
-    h6 {
+    strong {
       color: #fff;
     }
   }
 
-  h6 {
+  strong {
+    display: block;
     margin-bottom: 0;
     font-size: 0.8rem;
     text-transform: uppercase;
     letter-spacing: 0.2px;
     color: inherit;
+    font-weight: inherit;
   }
 }

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>
   );
 }

src/components/sidebarTableOfContents/index.tsx

@@ -188,11 +188,7 @@ export function SidebarTableOfContents() {
 
   return (
     <div className={styles['doc-toc']}>
-      {!!tocItems.length && (
-        <div className={styles['doc-toc-title']}>
-          <h6>On this page</h6>
-        </div>
-      )}
+      {!!tocItems.length && <h2 className={styles['doc-toc-title']}>On this page</h2>}
       <ul className={styles['section-nav']}>{recursiveRender(buildTocTree(tocItems))}</ul>
     </div>
   );

src/components/sidebarTableOfContents/style.module.scss

@@ -83,12 +83,8 @@
 .doc-toc-title {
   font-weight: 500;
   margin-bottom: 0.25rem;
-
-  h6 {
-    margin-bottom: 0;
-    font-size: 0.8rem;
-    text-transform: uppercase;
-    letter-spacing: 0.2px;
-    color: inherit;
-  }
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.2px;
+  color: inherit;
 }