Skip to content

Commit a3a507c

Browse files
dcramerdcramer
authored
feat: Switch to fixed navs with scrolling (#2387)
1 parent dd7208a commit a3a507c

File tree

10 files changed

+246
-199
lines changed

10 files changed

+246
-199
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
"jsdom": "^16.3.0",
6363
"nginx-conf": "^1.5.0",
6464
"node-sass": "^4.14.1",
65-
"platformicons": "^3.1.0",
65+
"platformicons": "^3.1.1",
6666
"prismjs": "^1.20.0",
6767
"prop-types": "^15.7.2",
6868
"query-string": "^6.13.1",

‎src/components/__tests__/__snapshots__/header.test.js.snap

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,41 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Header renders correctly 1`] = `
4-
<div
4+
<header
55
className="navbar navbar-expand-md navbar-light bg-white global-header"
66
>
7-
<a
8-
className="navbar-brand pb-0"
9-
href="/"
10-
title="Sentry error monitoring"
7+
<div
8+
className="navbar-brand"
119
>
12-
<svg
13-
viewBox="0 0 75 75"
14-
xmlns="http://www.w3.org/2000/svg"
10+
<a
11+
className=""
12+
href="/"
13+
title="Sentry error monitoring"
1514
>
16-
<g
17-
className="loader-spin"
18-
height="75"
19-
width="75"
15+
<svg
16+
viewBox="0 0 75 75"
17+
xmlns="http://www.w3.org/2000/svg"
2018
>
21-
<path
22-
className="loader-stroke loading"
23-
d="M7.8 49.78c-1.75 2.88-3.19 5.4-4.35 7.56a3.9 3.9 0 0 0 3.34 6h18.86a25.75 25.75 0 0 0-12.87-22.19c1.9-3.17 5.12-9 6.32-11a38.47 38.47 0 0 1 19.14 33.23h12.63a50.79 50.79 0 0 0-25.51-44C29.65 12 32.38 7 33.89 4.64a4 4 0 0 1 6.66 0C42 7 69.53 54.8 71 57.34a4 4 0 0 1-3.75 6h-6.79"
24-
fill="none"
25-
stroke="currentColor"
26-
strokeWidth="5"
27-
/>
28-
</g>
29-
</svg>
30-
<h6>
31-
Docs
32-
</h6>
33-
</a>
19+
<g
20+
className="loader-spin"
21+
height="75"
22+
width="75"
23+
>
24+
<path
25+
className="loader-stroke loading"
26+
d="M7.8 49.78c-1.75 2.88-3.19 5.4-4.35 7.56a3.9 3.9 0 0 0 3.34 6h18.86a25.75 25.75 0 0 0-12.87-22.19c1.9-3.17 5.12-9 6.32-11a38.47 38.47 0 0 1 19.14 33.23h12.63a50.79 50.79 0 0 0-25.51-44C29.65 12 32.38 7 33.89 4.64a4 4 0 0 1 6.66 0C42 7 69.53 54.8 71 57.34a4 4 0 0 1-3.75 6h-6.79"
27+
fill="none"
28+
stroke="currentColor"
29+
strokeWidth="5"
30+
/>
31+
</g>
32+
</svg>
33+
<h6>
34+
Docs
35+
</h6>
36+
</a>
37+
</div>
38+
<div />
3439
<button
3540
aria-controls="sidebar"
3641
aria-expanded="false"
@@ -41,5 +46,5 @@ exports[`Header renders correctly 1`] = `
4146
>
4247
Table of Contents
4348
</button>
44-
</div>
49+
</header>
4550
`;

‎src/components/__tests__/header.test.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,15 @@ import React from "react";
22
import renderer from "react-test-renderer";
33
import Header from "../header";
44

5+
jest.mock("../navbar", () => {
6+
return {
7+
__esModule: true,
8+
default: () => {
9+
return <div />;
10+
},
11+
};
12+
});
13+
514
describe("Header", () => {
615
it("renders correctly", () => {
716
const tree = renderer.create(<Header />).toJSON();

‎src/components/header.tsx

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,43 @@
11
import React from "react";
22

3+
import Navbar from "./navbar";
34
import SmartLink from "./smartLink";
45

5-
export default (): JSX.Element => {
6+
type Props = {
7+
platforms?: string[];
8+
};
9+
10+
export default ({ platforms }: Props): JSX.Element => {
611
return (
7-
<div className="navbar navbar-expand-md navbar-light bg-white global-header">
8-
<SmartLink
9-
to="/"
10-
title="Sentry error monitoring"
11-
className="navbar-brand pb-0"
12-
>
13-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 75">
14-
<g height="75" width="75" className="loader-spin">
15-
<path
16-
d="M7.8 49.78c-1.75 2.88-3.19 5.4-4.35 7.56a3.9 3.9 0 0 0 3.34 6h18.86a25.75 25.75 0 0 0-12.87-22.19c1.9-3.17 5.12-9 6.32-11a38.47 38.47 0 0 1 19.14 33.23h12.63a50.79 50.79 0 0 0-25.51-44C29.65 12 32.38 7 33.89 4.64a4 4 0 0 1 6.66 0C42 7 69.53 54.8 71 57.34a4 4 0 0 1-3.75 6h-6.79"
17-
fill="none"
18-
stroke="currentColor"
19-
className="loader-stroke loading"
20-
strokeWidth="5"
21-
/>
22-
</g>
23-
</svg>
24-
<h6>Docs</h6>
25-
</SmartLink>
12+
<header className="navbar navbar-expand-md navbar-light bg-white global-header">
13+
<div className="navbar-brand">
14+
<SmartLink to="/" title="Sentry error monitoring">
15+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 75">
16+
<g height="75" width="75" className="loader-spin">
17+
<path
18+
d="M7.8 49.78c-1.75 2.88-3.19 5.4-4.35 7.56a3.9 3.9 0 0 0 3.34 6h18.86a25.75 25.75 0 0 0-12.87-22.19c1.9-3.17 5.12-9 6.32-11a38.47 38.47 0 0 1 19.14 33.23h12.63a50.79 50.79 0 0 0-25.51-44C29.65 12 32.38 7 33.89 4.64a4 4 0 0 1 6.66 0C42 7 69.53 54.8 71 57.34a4 4 0 0 1-3.75 6h-6.79"
19+
fill="none"
20+
stroke="currentColor"
21+
className="loader-stroke loading"
22+
strokeWidth="5"
23+
/>
24+
</g>
25+
</svg>
26+
<h6>Docs</h6>
27+
</SmartLink>
28+
</div>
29+
30+
<Navbar platforms={platforms} />
2631

2732
<button
2833
className="d-md-none btn btn-outline-dark"
2934
type="button"
3035
onClick={() => {
3136
const el = document.getElementById("sidebar");
32-
if (el.style.display === "block") {
37+
if (el.style.display === "flex") {
3338
el.style.display = "none";
3439
} else {
35-
el.style.display = "block";
40+
el.style.display = "flex";
3641
}
3742
}}
3843
aria-controls="sidebar"
@@ -41,6 +46,6 @@ export default (): JSX.Element => {
4146
>
4247
Table of Contents
4348
</button>
44-
</div>
49+
</header>
4550
);
4651
};

‎src/components/layout.tsx

Lines changed: 23 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import React from "react";
33
import Breadcrumbs from "./breadcrumbs";
44
import Header from "./header";
55
import Sidebar from "./sidebar";
6-
import Navbar from "./navbar";
76

87
import "~src/css/screen.scss";
98

@@ -23,41 +22,34 @@ export default ({
2322
sidebar,
2423
pageContext = {},
2524
}: Props): JSX.Element => {
26-
return (
27-
<div className="document-wrapper">
28-
<div className="sidebar">
29-
<Header />
25+
const hasSidebar = !!sidebar;
3026

31-
<div
32-
className="d-md-flex flex-column align-items-stretch collapse navbar-collapse"
33-
id="sidebar"
34-
>
35-
<div className="toc">
36-
<div className="text-white p-3">
37-
{sidebar ? sidebar : <Sidebar />}
38-
</div>
27+
return (
28+
<div className={`document-wrapper ${hasSidebar ? "with-sidebar" : ""}`}>
29+
<Header
30+
{...(pageContext.platform && {
31+
platforms: [pageContext.platform.name],
32+
})}
33+
/>
34+
<main role="main">
35+
<section className="pt-3 px-3 content-max prose">
36+
<div className="pb-3">
37+
<Breadcrumbs />
3938
</div>
40-
</div>
41-
</div>
39+
{children}
40+
</section>
41+
</main>
4242

43-
<main role="main" className="px-0">
44-
<div className="flex-grow-1">
45-
<div className="d-none d-md-block">
46-
<Navbar
47-
{...(pageContext.platform && {
48-
platforms: [pageContext.platform.name],
49-
})}
50-
/>
43+
<div
44+
className="sidebar d-md-flex flex-column align-items-stretch collapse navbar-collapse"
45+
id="sidebar"
46+
>
47+
<div className="toc">
48+
<div className="text-white p-3">
49+
{sidebar ? sidebar : <Sidebar />}
5150
</div>
52-
53-
<section className="pt-3 px-3 content-max prose">
54-
<div className="pb-3">
55-
<Breadcrumbs />
56-
</div>
57-
{children}
58-
</section>
5951
</div>
60-
</main>
52+
</div>
6153
</div>
6254
);
6355
};

‎src/components/navbar.tsx

Lines changed: 69 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -17,82 +17,80 @@ export default ({ platforms }: Props): JSX.Element => {
1717
const [currentPlatform] = usePlatform(null, false);
1818

1919
return (
20-
<div className="navbar navbar-expand-md navbar-light global-header">
21-
<div className="collapse navbar-collapse content-max" id="navbar-menu">
22-
<Search path={location.pathname} platforms={platforms} />
23-
<Nav className="justify-content-end" style={{ flex: 1 }}>
24-
<Nav.Item>
25-
<SmartLink className="nav-link" to="/product/">
26-
Product
27-
</SmartLink>
28-
</Nav.Item>
29-
<NavDropdown
30-
title={
31-
currentPlatform ? (
32-
<React.Fragment>
33-
<PlatformIcon
34-
platform={currentPlatform.key}
35-
size={16}
36-
style={{ marginRight: "0.5rem" }}
37-
format="lg"
38-
/>
39-
{currentPlatform.title}
40-
</React.Fragment>
41-
) : (
42-
"Platforms"
43-
)
44-
}
45-
id="platforms"
46-
>
47-
{platformList.map(platform => (
48-
<SmartLink
49-
className={`dropdown-item ${
50-
currentPlatform && currentPlatform.key == platform.key
51-
? "active"
52-
: ""
53-
}`}
54-
key={platform.key}
55-
to={platform.url}
56-
>
20+
<nav className="collapse navbar-collapse content-max" id="navbar-menu">
21+
<Search path={location.pathname} platforms={platforms} />
22+
<Nav className="justify-content-end" style={{ flex: 1 }}>
23+
<Nav.Item>
24+
<SmartLink className="nav-link" to="/product/">
25+
Product
26+
</SmartLink>
27+
</Nav.Item>
28+
<NavDropdown
29+
title={
30+
currentPlatform ? (
31+
<React.Fragment>
5732
<PlatformIcon
58-
platform={platform.key}
33+
platform={currentPlatform.key}
5934
size={16}
6035
style={{ marginRight: "0.5rem" }}
6136
format="lg"
6237
/>
63-
{platform.title}
64-
</SmartLink>
65-
))}
66-
<NavDropdown.Divider />
67-
<SmartLink className="dropdown-item" to="/platforms/">
68-
Show all platforms
69-
</SmartLink>
70-
</NavDropdown>
71-
<Nav.Item>
72-
<SmartLink className="nav-link" to="/api/">
73-
API
38+
{currentPlatform.title}
39+
</React.Fragment>
40+
) : (
41+
"Platforms"
42+
)
43+
}
44+
id="platforms"
45+
>
46+
{platformList.map(platform => (
47+
<SmartLink
48+
className={`dropdown-item ${
49+
currentPlatform && currentPlatform.key == platform.key
50+
? "active"
51+
: ""
52+
}`}
53+
key={platform.key}
54+
to={platform.url}
55+
>
56+
<PlatformIcon
57+
platform={platform.key}
58+
size={16}
59+
style={{ marginRight: "0.5rem" }}
60+
format="lg"
61+
/>
62+
{platform.title}
7463
</SmartLink>
75-
</Nav.Item>
76-
<Nav.Item>
77-
<Nav.Link href="https://sentry.io/">
78-
Sign In
79-
<svg
80-
width="1em"
81-
height="1em"
82-
viewBox="0 0 16 16"
83-
className="bi bi-arrow-right-short"
84-
fill="currentColor"
85-
xmlns="http://www.w3.org/2000/svg"
86-
>
87-
<path
88-
fillRule="evenodd"
89-
d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"
90-
/>
91-
</svg>
92-
</Nav.Link>
93-
</Nav.Item>
94-
</Nav>
95-
</div>
96-
</div>
64+
))}
65+
<NavDropdown.Divider />
66+
<SmartLink className="dropdown-item" to="/platforms/">
67+
Show all platforms
68+
</SmartLink>
69+
</NavDropdown>
70+
<Nav.Item>
71+
<SmartLink className="nav-link" to="/api/">
72+
API
73+
</SmartLink>
74+
</Nav.Item>
75+
<Nav.Item>
76+
<Nav.Link href="https://sentry.io/">
77+
Sign In
78+
<svg
79+
width="1em"
80+
height="1em"
81+
viewBox="0 0 16 16"
82+
className="bi bi-arrow-right-short"
83+
fill="currentColor"
84+
xmlns="http://www.w3.org/2000/svg"
85+
>
86+
<path
87+
fillRule="evenodd"
88+
d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"
89+
/>
90+
</svg>
91+
</Nav.Link>
92+
</Nav.Item>
93+
</Nav>
94+
</nav>
9795
);
9896
};

0 commit comments

Comments
 (0)