Skip to content

Commit cad6d70

Browse files
dcramerdcramer
committed
Revert "feat: Switch to fixed navs with scrolling (#2387)"
This reverts commit a3a507c.
1 parent a3a507c commit cad6d70

File tree

10 files changed

+199
-246
lines changed

10 files changed

+199
-246
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.1",
65+
"platformicons": "^3.1.0",
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: 26 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,36 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Header renders correctly 1`] = `
4-
<header
4+
<div
55
className="navbar navbar-expand-md navbar-light bg-white global-header"
66
>
7-
<div
8-
className="navbar-brand"
7+
<a
8+
className="navbar-brand pb-0"
9+
href="/"
10+
title="Sentry error monitoring"
911
>
10-
<a
11-
className=""
12-
href="/"
13-
title="Sentry error monitoring"
12+
<svg
13+
viewBox="0 0 75 75"
14+
xmlns="http://www.w3.org/2000/svg"
1415
>
15-
<svg
16-
viewBox="0 0 75 75"
17-
xmlns="http://www.w3.org/2000/svg"
16+
<g
17+
className="loader-spin"
18+
height="75"
19+
width="75"
1820
>
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 />
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>
3934
<button
4035
aria-controls="sidebar"
4136
aria-expanded="false"
@@ -46,5 +41,5 @@ exports[`Header renders correctly 1`] = `
4641
>
4742
Table of Contents
4843
</button>
49-
</header>
44+
</div>
5045
`;

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

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,6 @@ 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-
145
describe("Header", () => {
156
it("renders correctly", () => {
167
const tree = renderer.create(<Header />).toJSON();

‎src/components/header.tsx‎

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

3-
import Navbar from "./navbar";
43
import SmartLink from "./smartLink";
54

6-
type Props = {
7-
platforms?: string[];
8-
};
9-
10-
export default ({ platforms }: Props): JSX.Element => {
5+
export default (): JSX.Element => {
116
return (
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} />
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>
3126

3227
<button
3328
className="d-md-none btn btn-outline-dark"
3429
type="button"
3530
onClick={() => {
3631
const el = document.getElementById("sidebar");
37-
if (el.style.display === "flex") {
32+
if (el.style.display === "block") {
3833
el.style.display = "none";
3934
} else {
40-
el.style.display = "flex";
35+
el.style.display = "block";
4136
}
4237
}}
4338
aria-controls="sidebar"
@@ -46,6 +41,6 @@ export default ({ platforms }: Props): JSX.Element => {
4641
>
4742
Table of Contents
4843
</button>
49-
</header>
44+
</div>
5045
);
5146
};

‎src/components/layout.tsx‎

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

78
import "~src/css/screen.scss";
89

@@ -22,34 +23,41 @@ export default ({
2223
sidebar,
2324
pageContext = {},
2425
}: Props): JSX.Element => {
25-
const hasSidebar = !!sidebar;
26-
2726
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 />
38-
</div>
39-
{children}
40-
</section>
41-
</main>
27+
<div className="document-wrapper">
28+
<div className="sidebar">
29+
<Header />
4230

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 />}
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>
5039
</div>
5140
</div>
5241
</div>
42+
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+
/>
51+
</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>
59+
</div>
60+
</main>
5361
</div>
5462
);
5563
};

‎src/components/navbar.tsx‎

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

1919
return (
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>
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+
>
3257
<PlatformIcon
33-
platform={currentPlatform.key}
58+
platform={platform.key}
3459
size={16}
3560
style={{ marginRight: "0.5rem" }}
3661
format="lg"
3762
/>
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}
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
6374
</SmartLink>
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>
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>
9597
);
9698
};

0 commit comments

Comments
 (0)