Skip to content

Commit 464dfe2

Browse files
mydeamydea
authored
ref(platform): Further streamlining of sidebar nav code (#13370)
1 parent f50b052 commit 464dfe2

File tree

10 files changed

+115
-186
lines changed

10 files changed

+115
-186
lines changed

‎src/components/platformSelector/index.tsx‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {uniqByReference} from 'sentry-docs/utils';
2020

2121
import styles from './style.module.scss';
2222

23-
import {SidebarLink} from '../sidebarLink';
23+
import {SidebarLink, SidebarSeparator} from '../sidebar/sidebarLink';
2424

2525
export function PlatformSelector({
2626
platforms,
@@ -243,19 +243,14 @@ export function PlatformSelector({
243243
</ComboboxProvider>
244244
</RadixSelect.Root>
245245
{showStoredPlatform && (
246-
<div className={styles.toc}>
247-
<ul>
248-
<SidebarLink
249-
to={storedPlatform.url}
250-
title={`Sentry for ${storedPlatform.title ?? storedPlatform.key}`}
251-
path=""
252-
className={styles['active-platform-title']}
253-
>
254-
{/* display chevron icon by adding a child element */}
255-
<Fragment />
256-
</SidebarLink>
257-
</ul>
258-
<hr />
246+
<div className="mt-3">
247+
<SidebarLink
248+
href={storedPlatform.url}
249+
title={`Sentry for ${storedPlatform.title ?? storedPlatform.key}`}
250+
collapsible
251+
topLevel
252+
/>
253+
<SidebarSeparator />
259254
</div>
260255
)}
261256
</div>

‎src/components/sidebarLink.tsx‎ renamed to ‎src/components/sidebar/collapsibleSidebarLink.tsx‎

Lines changed: 12 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
'use client';
22

33
import {Children, useState} from 'react';
4-
import styled from '@emotion/styled';
54

65
import {getUnversionedPath} from 'sentry-docs/versioning';
76

8-
import {SmartLink} from './smartLink';
7+
import {SidebarLink} from './sidebarLink';
98

109
interface SidebarLinkProps {
1110
/**
@@ -29,7 +28,11 @@ interface SidebarLinkProps {
2928
collapsed?: boolean | null;
3029
}
3130

32-
export function SidebarLink({
31+
/**
32+
* This client component is used to render a collapsible sidebar link.
33+
* It is only used by the DynamicNav component.
34+
*/
35+
export function CollapsibleSidebarLink({
3336
to,
3437
title,
3538
children,
@@ -45,55 +48,20 @@ export function SidebarLink({
4548

4649
return (
4750
<li className={`toc-item ${className}`} data-sidebar-branch data-path={path}>
48-
<SidebarNavItem
49-
to={to}
51+
<SidebarLink
52+
href={to}
5053
data-sidebar-link
5154
isActive={to === getUnversionedPath(path)}
55+
collapsible={hasSubtree}
56+
title={title}
5257
onClick={() => {
5358
// Allow toggling the sidebar subtree only if the item is selected
5459
if (path === to) {
5560
setShowSubtree(v => enableSubtree && !v);
5661
}
5762
}}
58-
>
59-
{title || children}
60-
{hasSubtree && <Chevron direction={showSubtree ? 'down' : 'right'} />}
61-
</SidebarNavItem>
62-
{title && children && <ul data-sidebar-tree>{showSubtree && children}</ul>}
63+
/>
64+
{showSubtree && <ul data-sidebar-tree>{children}</ul>}
6365
</li>
6466
);
6567
}
66-
67-
const SidebarNavItem = styled(SmartLink)`
68-
display: flex;
69-
align-items: center;
70-
justify-content: space-between;
71-
gap: 4px;
72-
`;
73-
74-
const rotation = {
75-
down: 0,
76-
right: 270,
77-
} as const;
78-
79-
interface ChevronProps extends React.SVGAttributes<SVGElement> {
80-
direction: keyof typeof rotation;
81-
}
82-
83-
const Chevron = styled(({direction: _, ...props}: ChevronProps) => (
84-
<svg
85-
xmlns="http://www.w3.org/2000/svg"
86-
width="16"
87-
height="16"
88-
viewBox="0 0 16 16"
89-
{...props}
90-
>
91-
<path
92-
fill="currentColor"
93-
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"
94-
/>
95-
</svg>
96-
))`
97-
transition: transform 200ms;
98-
transform: rotate(${p => rotation[p.direction]}deg);
99-
`;

‎src/components/sidebar/defaultSidebar.tsx‎

Lines changed: 0 additions & 61 deletions
This file was deleted.

‎src/components/sidebar/developDocsSidebar.tsx‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@ import {DocNode, nodeForPath} from 'sentry-docs/docTree';
22

33
import styles from './style.module.scss';
44

5-
import {SidebarLink} from '../sidebarLink';
6-
75
import {DynamicNav, toTree} from './dynamicNav';
6+
import {SidebarLink, SidebarSeparator} from './sidebarLink';
87
import {NavNode} from './types';
98
import {docNodeToNavNode, getNavNodes} from './utils';
109

@@ -23,7 +22,6 @@ const devDocsMenuItems: {root: string; title: string}[] = [
2322
];
2423

2524
export function DevelopDocsSidebar({
26-
path,
2725
rootNode,
2826
sidebarToggleId,
2927
}: {
@@ -55,18 +53,13 @@ export function DevelopDocsSidebar({
5553
/>
5654
))}
5755
</ul>
58-
<hr />
56+
<SidebarSeparator />
5957
<ul data-sidebar-tree>
6058
<SidebarLink
61-
to="https://open.sentry.io/code-of-conduct/"
59+
href="https://open.sentry.io/code-of-conduct/"
6260
title="Code of Conduct"
63-
path={path}
64-
/>
65-
<SidebarLink
66-
to="https://docs.sentry.io"
67-
title="User Documentation"
68-
path={path}
6961
/>
62+
<SidebarLink href="https://docs.sentry.io" title="User Documentation" />
7063
</ul>
7164
</div>
7265
</div>

‎src/components/sidebar/dynamicNav.tsx‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,8 @@ import {serverContext} from 'sentry-docs/serverContext';
44
import {sortPages} from 'sentry-docs/utils';
55
import {getUnversionedPath, VERSION_INDICATOR} from 'sentry-docs/versioning';
66

7-
import styles from './style.module.scss';
8-
9-
import {SidebarLink} from '../sidebarLink';
10-
import {SmartLink} from '../smartLink';
11-
12-
import {NavChevron} from './navChevron';
7+
import {CollapsibleSidebarLink} from './collapsibleSidebarLink';
8+
import {SidebarLink} from './sidebarLink';
139

1410
type Node = {
1511
[key: string]: any;
@@ -83,15 +79,15 @@ export const renderChildren = (
8379
return null;
8480
}
8581
return (
86-
<SidebarLink
82+
<CollapsibleSidebarLink
8783
to={node.path}
8884
key={node.path}
8985
title={node.context.sidebar_title || node.context.title!}
9086
collapsed={depth >= showDepth}
9187
path={path}
9288
>
9389
{renderChildren(nodeChildren, exclude, path, showDepth, depth + 1)}
94-
</SidebarLink>
90+
</CollapsibleSidebarLink>
9591
);
9692
});
9793
};
@@ -142,6 +138,9 @@ export function DynamicNav({
142138
if (!title && entity.node) {
143139
title = entity.node.context.sidebar_title || entity.node.context.title || '';
144140
}
141+
if (!title) {
142+
return null;
143+
}
145144
const parentNode = entity.children?.find((n: EntityTree) => n.name === '');
146145

147146
if (!parentNode) {
@@ -153,15 +152,14 @@ export function DynamicNav({
153152
const linkPath = `/${path.join('/')}/`;
154153

155154
const header = (
156-
<SmartLink
157-
to={`/${root}/`}
158-
className={`${styles['sidebar-title']} flex items-center ${getUnversionedPath(path, false) === root ? 'active' : ''} justify-between`}
159-
activeClassName="active"
155+
<SidebarLink
156+
href={`/${root}/`}
157+
title={title}
158+
collapsible={collapsible}
159+
isActive={getUnversionedPath(path, false) === root}
160+
topLevel
160161
data-sidebar-link
161-
>
162-
<strong>{title}</strong>
163-
{collapsible && <NavChevron direction={isActive ? 'down' : 'right'} />}
164-
</SmartLink>
162+
/>
165163
);
166164

167165
return (

‎src/components/sidebar/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {PlatformSelector} from '../platformSelector';
1515
import {VersionSelector} from '../versionSelector';
1616

1717
import {DevelopDocsSidebar} from './developDocsSidebar';
18-
import {SidebarLinks} from './sidebarLinks';
18+
import {SidebarNavigation} from './sidebarNavigation';
1919
import {SidebarProps} from './types';
2020

2121
const activeLinkSelector = `.${styles.sidebar} .toc-item .active`;
@@ -100,7 +100,7 @@ export async function Sidebar({path, versions}: SidebarProps) {
100100
</div>
101101
<div className={`${styles.toc} px-3`}>
102102
<ScrollActiveLink activeLinkSelector={activeLinkSelector} />
103-
<SidebarLinks path={path} />
103+
<SidebarNavigation path={path} />
104104
</div>
105105
</div>
106106
</aside>

‎src/components/sidebar/productSidebar.tsx‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import {nodeForPath} from 'sentry-docs/docTree';
22

3-
import {SidebarLink} from '../sidebarLink';
4-
53
import {DynamicNav, toTree} from './dynamicNav';
4+
import {SidebarLink, SidebarSeparator} from './sidebarLink';
65
import {NavNode, ProductSidebarProps} from './types';
76
import {docNodeToNavNode, getNavNodes} from './utils';
87

@@ -34,26 +33,20 @@ export function ProductSidebar({rootNode, items}: ProductSidebarProps) {
3433
);
3534
})}
3635
</ul>
37-
<hr />
36+
<SidebarSeparator />
3837
<ul data-sidebar-tree>
3938
<li className="mb-3" data-sidebar-branch>
4039
<ul data-sidebar-tree>
41-
<SidebarLink to="https://about.codecov.io/" title="Codecov" path="" />
42-
<SidebarLink to="https://discord.gg/sentry" title="Discord" path="" />
43-
<SidebarLink
44-
to="https://sentry.zendesk.com/hc/en-us/"
45-
title="Support"
46-
path=""
47-
/>
40+
<SidebarLink href="https://about.codecov.io/" title="Codecov" />
41+
<SidebarLink href="https://discord.gg/sentry" title="Discord" />
42+
<SidebarLink href="https://sentry.zendesk.com/hc/en-us/" title="Support" />
4843
<SidebarLink
49-
to="https://develop.sentry.dev/self-hosted/"
44+
href="https://develop.sentry.dev/self-hosted/"
5045
title="Self-Hosting Sentry"
51-
path=""
5246
/>
5347
<SidebarLink
54-
to="https://develop.sentry.dev"
48+
href="https://develop.sentry.dev"
5549
title="Developer Documentation"
56-
path=""
5750
/>
5851
</ul>
5952
</li>

‎src/components/sidebar/sidebarLink.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import Link from 'next/link';
2+
3+
import styles from './style.module.scss';
4+
5+
import {ExternalLink} from '../externalLink';
6+
7+
import {NavChevron} from './navChevron';
8+
9+
export function SidebarLink({
10+
title,
11+
href,
12+
isActive,
13+
collapsible,
14+
onClick,
15+
topLevel = false,
16+
}: {
17+
href: string;
18+
title: string;
19+
collapsible?: boolean;
20+
isActive?: boolean;
21+
onClick?: () => void;
22+
topLevel?: boolean;
23+
}) {
24+
const isRemote = href.includes('://');
25+
const LinkComponent = isRemote ? ExternalLink : Link;
26+
27+
return (
28+
<LinkComponent
29+
href={href}
30+
onClick={onClick}
31+
className={`${styles['sidebar-link']} ${isActive ? 'active' : ''} ${
32+
topLevel ? styles['sidebar-link-top-level'] : ''
33+
}`}
34+
data-sidebar-link
35+
>
36+
<div>{title}</div>
37+
{collapsible && <NavChevron direction={isActive ? 'down' : 'right'} />}
38+
</LinkComponent>
39+
);
40+
}
41+
42+
export function SidebarSeparator() {
43+
return <hr className={`${styles['sidebar-separator']} mt-3 mb-3`} />;
44+
}

0 commit comments

Comments
 (0)