ref(platform): Further streamlining of sidebar nav code

src/components/platformSelector/index.tsx

@@ -20,7 +20,7 @@ import {uniqByReference} from 'sentry-docs/utils';
 
 import styles from './style.module.scss';
 
-import {SidebarLink} from '../sidebarLink';
+import {SidebarLink, SidebarSeparator} from '../sidebar/sidebarLink';
 
 export function PlatformSelector({
   platforms,
@@ -240,19 +240,14 @@ export function PlatformSelector({
         </ComboboxProvider>
       </RadixSelect.Root>
       {showStoredPlatform && (
-        <div className={styles.toc}>
-          <ul>
-            <SidebarLink
-              to={storedPlatform.url}
-              title={`Sentry for ${storedPlatform.title ?? storedPlatform.key}`}
-              path=""
-              className={styles['active-platform-title']}
-            >
-              {/* display chevron icon by adding a child element */}
-              <Fragment />
-            </SidebarLink>
-          </ul>
-          <hr />
+        <div className="mt-3">
+          <SidebarLink
+            href={storedPlatform.url}
+            title={`Sentry for ${storedPlatform.title ?? storedPlatform.key}`}
+            collapsible
+            topLevel
+          />
+          <SidebarSeparator />
         </div>
       )}
     </div>

src/components/sidebarLink.tsx → src/components/sidebar/collapsibleSidebarLink.tsx

@@ -1,11 +1,10 @@
 'use client';
 
 import {Children, useState} from 'react';
-import styled from '@emotion/styled';
 
 import {getUnversionedPath} from 'sentry-docs/versioning';
 
-import {SmartLink} from './smartLink';
+import {SidebarLink} from './sidebarLink';
 
 interface SidebarLinkProps {
   /**
@@ -29,7 +28,11 @@ interface SidebarLinkProps {
   collapsed?: boolean | null;
 }
 
-export function SidebarLink({
+/**
+ * This client component is used to render a collapsible sidebar link.
+ * It is only used by the DynamicNav component.
+ */
+export function CollapsibleSidebarLink({
   to,
   title,
   children,
@@ -45,55 +48,20 @@ export function SidebarLink({
 
   return (
     <li className={`toc-item ${className}`} data-sidebar-branch data-path={path}>
-      <SidebarNavItem
-        to={to}
+      <SidebarLink
+        href={to}
         data-sidebar-link
         isActive={to === getUnversionedPath(path)}
+        collapsible={hasSubtree}
+        title={title}
         onClick={() => {
           // Allow toggling the sidebar subtree only if the item is selected
           if (path === to) {
             setShowSubtree(v => enableSubtree && !v);
           }
         }}
-      >
-        {title || children}
-        {hasSubtree && <Chevron direction={showSubtree ? 'down' : 'right'} />}
-      </SidebarNavItem>
-      {title && children && <ul data-sidebar-tree>{showSubtree && children}</ul>}
+      />
+      {showSubtree && <ul data-sidebar-tree>{children}</ul>}
     </li>
   );
 }
-
-const SidebarNavItem = styled(SmartLink)`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 4px;
-`;
-
-const rotation = {
-  down: 0,
-  right: 270,
-} as const;
-
-interface ChevronProps extends React.SVGAttributes<SVGElement> {
-  direction: keyof typeof rotation;
-}
-
-const Chevron = styled(({direction: _, ...props}: ChevronProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      d="M12.53 5.47a.75.75 0 0 1 0 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 1.06-1.06L8 8.94l3.47-3.47a.75.75 0 0 1 1.06 0Z"
-    />
-  </svg>
-))`
-  transition: transform 200ms;
-  transform: rotate(${p => rotation[p.direction]}deg);
-`;

src/components/sidebar/developDocsSidebar.tsx

@@ -2,9 +2,8 @@ import {DocNode, nodeForPath} from 'sentry-docs/docTree';
 
 import styles from './style.module.scss';
 
-import {SidebarLink} from '../sidebarLink';
-
 import {DynamicNav, toTree} from './dynamicNav';
+import {SidebarLink, SidebarSeparator} from './sidebarLink';
 import {NavNode} from './types';
 import {docNodeToNavNode, getNavNodes} from './utils';
 
@@ -23,7 +22,6 @@ const devDocsMenuItems: {root: string; title: string}[] = [
 ];
 
 export function DevelopDocsSidebar({
-  path,
   rootNode,
   sidebarToggleId,
 }: {
@@ -55,18 +53,13 @@ export function DevelopDocsSidebar({
               />
             ))}
           </ul>
-          <hr />
+          <SidebarSeparator />
           <ul data-sidebar-tree>
             <SidebarLink
-              to="https://open.sentry.io/code-of-conduct/"
+              href="https://open.sentry.io/code-of-conduct/"
               title="Code of Conduct"
-              path={path}
-            />
-            <SidebarLink
-              to="https://docs.sentry.io"
-              title="User Documentation"
-              path={path}
             />
+            <SidebarLink href="https://docs.sentry.io" title="User Documentation" />
           </ul>
         </div>
       </div>

src/components/sidebar/dynamicNav.tsx

@@ -4,12 +4,8 @@ import {serverContext} from 'sentry-docs/serverContext';
 import {sortPages} from 'sentry-docs/utils';
 import {getUnversionedPath, VERSION_INDICATOR} from 'sentry-docs/versioning';
 
-import styles from './style.module.scss';
-
-import {SidebarLink} from '../sidebarLink';
-import {SmartLink} from '../smartLink';
-
-import {NavChevron} from './navChevron';
+import {CollapsibleSidebarLink} from './collapsibleSidebarLink';
+import {SidebarLink} from './sidebarLink';
 
 type Node = {
   [key: string]: any;
@@ -83,15 +79,15 @@ export const renderChildren = (
       return null;
     }
     return (
-      <SidebarLink
+      <CollapsibleSidebarLink
         to={node.path}
         key={node.path}
         title={node.context.sidebar_title || node.context.title!}
         collapsed={depth >= showDepth}
         path={path}
       >
         {renderChildren(nodeChildren, exclude, path, showDepth, depth + 1)}
-      </SidebarLink>
+      </CollapsibleSidebarLink>
     );
   });
 };
@@ -142,6 +138,9 @@ export function DynamicNav({
   if (!title && entity.node) {
     title = entity.node.context.sidebar_title || entity.node.context.title || '';
   }
+  if (!title) {
+    return null;
+  }
   const parentNode = entity.children?.find((n: EntityTree) => n.name === '');
 
   if (!parentNode) {
@@ -153,15 +152,14 @@ export function DynamicNav({
   const linkPath = `/${path.join('/')}/`;
 
   const header = (
-    <SmartLink
-      to={`/${root}/`}
-      className={`${styles['sidebar-title']} flex items-center ${getUnversionedPath(path, false) === root ? 'active' : ''} justify-between`}
-      activeClassName="active"
+    <SidebarLink
+      href={`/${root}/`}
+      title={title}
+      collapsible={collapsible}
+      isActive={getUnversionedPath(path, false) === root}
+      topLevel
       data-sidebar-link
-    >
-      <strong>{title}</strong>
-      {collapsible && <NavChevron direction={isActive ? 'down' : 'right'} />}
-    </SmartLink>
+    />
   );
 
   return (

src/components/sidebar/index.tsx

@@ -15,7 +15,7 @@ import {PlatformSelector} from '../platformSelector';
 import {VersionSelector} from '../versionSelector';
 
 import {DevelopDocsSidebar} from './developDocsSidebar';
-import {SidebarLinks} from './sidebarLinks';
+import {SidebarNavigation} from './sidebarNavigation';
 import {SidebarProps} from './types';
 
 const activeLinkSelector = `.${styles.sidebar} .toc-item .active`;
@@ -100,7 +100,7 @@ export async function Sidebar({path, versions}: SidebarProps) {
         </div>
         <div className={`${styles.toc} px-3`}>
           <ScrollActiveLink activeLinkSelector={activeLinkSelector} />
-          <SidebarLinks path={path} />
+          <SidebarNavigation path={path} />
         </div>
       </div>
     </aside>

src/components/sidebar/productSidebar.tsx

@@ -1,8 +1,7 @@
 import {nodeForPath} from 'sentry-docs/docTree';
 
-import {SidebarLink} from '../sidebarLink';
-
 import {DynamicNav, toTree} from './dynamicNav';
+import {SidebarLink, SidebarSeparator} from './sidebarLink';
 import {NavNode, ProductSidebarProps} from './types';
 import {docNodeToNavNode, getNavNodes} from './utils';
 
@@ -34,26 +33,20 @@ export function ProductSidebar({rootNode, items}: ProductSidebarProps) {
           );
         })}
       </ul>
-      <hr />
+      <SidebarSeparator />
       <ul data-sidebar-tree>
         <li className="mb-3" data-sidebar-branch>
           <ul data-sidebar-tree>
-            <SidebarLink to="https://about.codecov.io/" title="Codecov" path="" />
-            <SidebarLink to="https://discord.gg/sentry" title="Discord" path="" />
-            <SidebarLink
-              to="https://sentry.zendesk.com/hc/en-us/"
-              title="Support"
-              path=""
-            />
+            <SidebarLink href="https://about.codecov.io/" title="Codecov" />
+            <SidebarLink href="https://discord.gg/sentry" title="Discord" />
+            <SidebarLink href="https://sentry.zendesk.com/hc/en-us/" title="Support" />
             <SidebarLink
-              to="https://develop.sentry.dev/self-hosted/"
+              href="https://develop.sentry.dev/self-hosted/"
               title="Self-Hosting Sentry"
-              path=""
             />
             <SidebarLink
-              to="https://develop.sentry.dev"
+              href="https://develop.sentry.dev"
               title="Developer Documentation"
-              path=""
             />
           </ul>
         </li>

src/components/sidebar/sidebarLink.tsx

@@ -0,0 +1,44 @@
+import Link from 'next/link';
+
+import styles from './style.module.scss';
+
+import {ExternalLink} from '../externalLink';
+
+import {NavChevron} from './navChevron';
+
+export function SidebarLink({
+  title,
+  href,
+  isActive,
+  collapsible,
+  onClick,
+  topLevel = false,
+}: {
+  href: string;
+  title: string;
+  collapsible?: boolean;
+  isActive?: boolean;
+  onClick?: () => void;
+  topLevel?: boolean;
+}) {
+  const isRemote = href.includes('://');
+  const LinkComponent = isRemote ? ExternalLink : Link;
+
+  return (
+    <LinkComponent
+      href={href}
+      onClick={onClick}
+      className={`${styles['sidebar-link']} ${isActive ? 'active' : ''} ${
+        topLevel ? styles['sidebar-link-top-level'] : ''
+      }`}
+      data-sidebar-link
+    >
+      <div>{title}</div>
+      {collapsible && <NavChevron direction={isActive ? 'down' : 'right'} />}
+    </LinkComponent>
+  );
+}
+
+export function SidebarSeparator() {
+  return <hr className={`${styles['sidebar-separator']} mt-3 mb-3`} />;
+}