feat: add chevron to dynamic nav

getsentry · Jul 25, 2024 · 143f4f0 · 143f4f0
1 parent 714c14a
commit 143f4f0
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 120 deletions.
diff --git a/src/components/dynamicNav.tsx b/src/components/dynamicNav.tsx
@@ -3,6 +3,7 @@ import {Fragment} from 'react';
 import {serverContext} from 'sentry-docs/serverContext';
 import {sortPages} from 'sentry-docs/utils';
 
+import {NavChevron} from './sidebar/navChevron';
 import {SidebarLink} from './sidebarLink';
 import {SmartLink} from './smartLink';
 
@@ -111,6 +112,7 @@ type Props = {
  showDepth?: number;
  suppressMissing?: boolean;
  title?: string;
+ withChevron?: boolean;
 };
 
 export function DynamicNav({
@@ -124,6 +126,7 @@ export function DynamicNav({
  suppressMissing = false,
  noHeadingLink = false,
  headerClassName,
+ withChevron = false,
 }: Props) {
  if (root.startsWith('/')) {
  root = root.substring(1);
@@ -161,11 +164,17 @@ export function DynamicNav({
  parentNode && !noHeadingLink ? (
  <SmartLink
  to={`/${root}/`}
- className={`${headerClassName} ${path.join('/') === root ? 'active' : ''}`}
+ className={`${headerClassName} ${path.join('/') === root ? 'active' : ''} justify-between`}
  activeClassName="active"
  data-sidebar-link
  >
  <h6>{title}</h6>
+ {withChevron && (
+ <NavChevron
+ className="w-4 h-4 font-normal"
+ direction={isActive ? 'down' : 'right'}
+ />
+ )}
  </SmartLink>
  ) : (
  <div className={headerClassName} data-sidebar-link>

diff --git a/src/components/sidebar/defaultSidebar.tsx b/src/components/sidebar/defaultSidebar.tsx
@@ -1,8 +1,9 @@
-import {Fragment, SVGAttributes} from 'react';
+import {Fragment} from 'react';
 import {Link} from 'react-feather';
 
 import styles from './style.module.scss';
 
+import {NavChevron} from './navChevron';
 import {DefaultSidebarProps, SidebarNode} from './types';
 
 export function DefaultSidebar({node, path}: DefaultSidebarProps) {
@@ -24,45 +25,14 @@ export function DefaultSidebar({node, path}: DefaultSidebarProps) {
  className={activeClassName(n, 'flex items-center justify-between gap-1')}
  >
  {n.frontmatter.sidebar_title || n.frontmatter.title}
- {n.children.length > 0 && <Chevron direction="down" />}
+ {n.children.length > 0 && <NavChevron direction="down" />}
  </Link>
  {renderChildren(n.children)}
  </li>
  ))}
  </ul>
  );
 
- const rotation = {
- down: 0,
- right: 270,
- } as const;
-
- function Chevron({
- direction,
- ...props
- }: SVGAttributes<SVGElement> & {
- direction: 'down' | 'right';
- }) {
- return (
- <svg
- xmlns="http://www.w3.org/2000/svg"
- width="16"
- height="16"
- viewBox="0 0 16 16"
- {...props}
- style={{
- transition: 'transform 200ms',
- transform: `rotate(${rotation[direction]}deg)`,
- }}
- >
- <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>
- );
- }
-
  return (
  <ul data-sidebar-tree>
  <li className="mb-3" data-sidebar-branch>

diff --git a/src/components/sidebar/developDocsSidebar.tsx b/src/components/sidebar/developDocsSidebar.tsx
@@ -8,6 +8,18 @@ import {SidebarLink} from '../sidebarLink';
 import {NavNode} from './types';
 import {docNodeToNavNode, getNavNodes} from './utils';
 
+const devDocsMenuItems: {root: string; title: string; hideChevron?: boolean}[] = [
+ {root: 'getting-started', title: 'Getting Started', hideChevron: true},
+ {root: 'development', title: 'Development'},
+ {root: 'application', title: 'Application'},
+ {root: 'frontend', title: 'Frontend'},
+ {root: 'backend', title: 'Backend'},
+ {root: 'sdk', title: 'SDK Development'},
+ {root: 'services', title: 'Services'},
+ {root: 'integrations', title: 'Integrations'},
+ {root: 'self-hosted', title: 'Self-Hosted Sentry'},
+];
+
 export function DevelopDocsSidebar({
  path,
  rootNode,
@@ -33,77 +45,17 @@ export function DevelopDocsSidebar({
  <div className="md:flex flex-col items-stretch">
  <div className={styles.toc}>
  <ul data-sidebar-tree>
- <DynamicNav
- root="getting-started"
- title="Getting Started"
- tree={getNavTree('getting-started')}
- headerClassName={headerClassName}
- collapse
- />
-
- <DynamicNav
- root="development"
- title="Development"
- tree={getNavTree('development')}
- headerClassName={headerClassName}
- collapse
- />
-
- <DynamicNav
- root="application"
- title="Application"
- tree={getNavTree('application')}
- headerClassName={headerClassName}
- collapse
- />
-
- <DynamicNav
- root="frontend"
- title="Frontend"
- tree={getNavTree('frontend')}
- headerClassName={headerClassName}
- collapse
- />
-
- <DynamicNav
- root="backend"
- title="Backend"
- tree={getNavTree('backend')}
- headerClassName={headerClassName}
- collapse
- />
-
- <DynamicNav
- root="sdk"
- title="SDK Development"
- tree={getNavTree('sdk')}
- headerClassName={headerClassName}
- collapse
- />
-
- <DynamicNav
- root="services"
- title="Services"
- tree={getNavTree('services')}
- headerClassName={headerClassName}
- collapse
- />
-
- <DynamicNav
- root="integrations"
- title="Integrations"
- tree={getNavTree('integrations')}
- headerClassName={headerClassName}
- collapse
- />
-
- <DynamicNav
- root="self-hosted"
- title="Self-Hosted Sentry"
- tree={getNavTree('self-hosted')}
- headerClassName={headerClassName}
- collapse
- />
+ {devDocsMenuItems.map(({root, title, hideChevron}) => (
+ <DynamicNav
+ key={root}
+ root={root}
+ title={title}
+ tree={getNavTree(root)}
+ headerClassName={headerClassName}
+ collapse
+ withChevron={!hideChevron}
+ />
+ ))}
  </ul>
  <hr />
  <ul data-sidebar-tree>

diff --git a/src/components/sidebar/navChevron.tsx b/src/components/sidebar/navChevron.tsx
@@ -0,0 +1,32 @@
+import {SVGAttributes} from 'react';
+
+const rotation = {
+ down: 0,
+ right: 270,
+} as const;
+
+export function NavChevron({
+ direction,
+ ...props
+}: SVGAttributes<SVGElement> & {
+ direction: 'down' | 'right';
+}) {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="16"
+ height="16"
+ viewBox="0 0 16 16"
+ {...props}
+ style={{
+ transition: 'transform 200ms',
+ transform: `rotate(${rotation[direction]}deg)`,
+ }}
+ >
+ <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>
+ );
+}
diff --git a/src/components/sidebar/productSidebar.tsx b/src/components/sidebar/productSidebar.tsx
@@ -30,6 +30,7 @@ export function ProductSidebar({rootNode, items, headerClassName}: ProductSideba
  tree={tree}
  headerClassName={headerClassName}
  collapse
+ withChevron
  />
  )
  );

diff --git a/src/components/sidebar/style.module.scss b/src/components/sidebar/style.module.scss
@@ -21,7 +21,7 @@
  height: calc(100vh - var(--header-height, 80px));
  display: flex;
 
- &+ :global(.main-content) {
+ & + :global(.main-content) {
  margin-left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));
  }
@@ -33,7 +33,7 @@
  &:has(> #navbar-menu-toggle:checked) {
  display: flex;
 
- &+ :global(.main-content) {
+ & + :global(.main-content) {
  margin-left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));
  }
@@ -42,20 +42,20 @@
  &:has(> #navbar-menu-toggle:not(:checked)) {
  display: none;
 
- &+ :global(.main-content) {
+ & + :global(.main-content) {
  margin-left: 0;
  }
  }
  }
 
  // 0 margin on mobile for main content
  @media only screen and (max-width: 768px) {
- &:has(> #navbar-menu-toggle:checked)+ :global(.main-content) {
+ &:has(> #navbar-menu-toggle:checked) + :global(.main-content) {
  margin-left: 0;
  }
  }
 
- ul+hr {
+ ul + hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  }
@@ -84,7 +84,7 @@
  padding-left: 0.75rem;
  }
 
- [data-sidebar-branch] [data-sidebar-branch]>[data-sidebar-tree] {
+ [data-sidebar-branch] [data-sidebar-branch] > [data-sidebar-tree] {
  margin-bottom: 0;
  }
 
@@ -117,15 +117,6 @@
  font-weight: 500;
  margin-bottom: 2px;
 
- svg {
- height: 100%;
- min-height: 1.5em;
- min-width: 1.5em;
- max-height: 1.5em;
- max-width: 1.5em;
- width: 100%;
- }
-
  &.active {
  background-color: var(--brandDecoration);