diff --git a/package.json b/package.json index dcdb4f7d832a1e..8934f009bb5bf8 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ "jsdom": "^16.3.0", "nginx-conf": "^1.5.0", "node-sass": "^4.14.1", - "platformicons": "^3.1.0", + "platformicons": "^3.1.1", "prismjs": "^1.20.0", "prop-types": "^15.7.2", "query-string": "^6.13.1", diff --git a/src/components/__tests__/__snapshots__/header.test.js.snap b/src/components/__tests__/__snapshots__/header.test.js.snap index 9c9201d55c6bc7..f66dc36f704cb1 100644 --- a/src/components/__tests__/__snapshots__/header.test.js.snap +++ b/src/components/__tests__/__snapshots__/header.test.js.snap @@ -1,36 +1,41 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Header renders correctly 1`] = ` -
- - - - - - -
- Docs -
- + + + + +
+ Docs +
+ +
+
-
+ `; diff --git a/src/components/__tests__/header.test.js b/src/components/__tests__/header.test.js index ed376580a1e456..aaa9a75182e5b5 100644 --- a/src/components/__tests__/header.test.js +++ b/src/components/__tests__/header.test.js @@ -2,6 +2,15 @@ import React from "react"; import renderer from "react-test-renderer"; import Header from "../header"; +jest.mock("../navbar", () => { + return { + __esModule: true, + default: () => { + return
; + }, + }; +}); + describe("Header", () => { it("renders correctly", () => { const tree = renderer.create(
).toJSON(); diff --git a/src/components/header.tsx b/src/components/header.tsx index e16a73f7c00389..6bfe1e938b2675 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -1,38 +1,43 @@ import React from "react"; +import Navbar from "./navbar"; import SmartLink from "./smartLink"; -export default (): JSX.Element => { +type Props = { + platforms?: string[]; +}; + +export default ({ platforms }: Props): JSX.Element => { return ( -
- - - - - - -
Docs
- +
+
+ + + + + + +
Docs
+ +
+ + -
+
); }; diff --git a/src/components/layout.tsx b/src/components/layout.tsx index 118973b6112a2c..cf0b2b300acebd 100644 --- a/src/components/layout.tsx +++ b/src/components/layout.tsx @@ -3,7 +3,6 @@ import React from "react"; import Breadcrumbs from "./breadcrumbs"; import Header from "./header"; import Sidebar from "./sidebar"; -import Navbar from "./navbar"; import "~src/css/screen.scss"; @@ -23,41 +22,34 @@ export default ({ sidebar, pageContext = {}, }: Props): JSX.Element => { - return ( -
-
-
+ const hasSidebar = !!sidebar; -
); }; diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx index 168b2c99049b4c..453762724862d0 100644 --- a/src/components/navbar.tsx +++ b/src/components/navbar.tsx @@ -17,82 +17,80 @@ export default ({ platforms }: Props): JSX.Element => { const [currentPlatform] = usePlatform(null, false); return ( -
- -
+ ))} + + + Show all platforms + + + + + API + + + + + Sign In + + + + + + + ); }; diff --git a/src/css/_includes/global-header.scss b/src/css/_includes/global-header.scss index 961a1a481dab7b..ff146ff6da161a 100644 --- a/src/css/_includes/global-header.scss +++ b/src/css/_includes/global-header.scss @@ -1,6 +1,7 @@ .navbar { box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 3px 5px 0 rgba(0, 0, 0, 0.02); z-index: 1; + padding: 0 1.5rem; } .global-header { @@ -9,29 +10,36 @@ .navbar-brand { display: flex; - flex-direction: row; - justify-content: center; height: 100%; - margin-right: 0; - font-size: 0.5rem; - padding-bottom: 0.7em; - padding-top: 0.7em; - svg { - display: block; + a { + display: flex; + flex-direction: row; + align-items: center; + color: #333; height: 100%; - margin-right: 0.7rem; - } + margin-right: 0; + font-size: 0.5rem; + padding-bottom: 0.7em; + padding-top: 0.7em; + + svg { + display: block; + height: 75%; + color: inherit; + margin-right: 0.7rem; + } - h6 { - line-height: 32px; - font-size: 18px; - margin: 0; - font-weight: 300; - color: #666; - flex: 1; - white-space: nowrap; - overflow: hidden; + h6 { + line-height: 32px; + font-size: 18px; + margin: 0; + font-weight: 300; + color: inherit; + flex: 1; + white-space: nowrap; + overflow: hidden; + } } } } diff --git a/src/css/_includes/grid.scss b/src/css/_includes/grid.scss index bfd4b74f2ac22c..3a6578dd834e5a 100644 --- a/src/css/_includes/grid.scss +++ b/src/css/_includes/grid.scss @@ -20,29 +20,68 @@ body { height: 100%; } + .document-wrapper { - display: flex; - min-height: 100%; - flex-direction: column; - overflow: hidden; + display: grid; + grid-template-areas: + "header header" + "main main"; + grid-template-columns: 245px 1fr; + grid-template-rows: 64px 1fr; + + > header { + display: grid; + grid-area: header; + grid-template-columns: 245px 1fr; + grid-template-areas: + "brand navbar"; + position: fixed; + + > .navbar-brand { + grid-area: brand; + } + + > nav { + grid-area: navbar; + } + } > main { - display: flex; - flex-direction: column; - flex: 1 1 auto; - min-width: 0; + grid-area: main; + } + + > .sidebar { + grid-area: sidebar; + margin-top: 64px; + position: fixed; + overflow: auto; + height: 100%; + } + + &.with-sidebar { + grid-template-areas: + "header header" + "sidebar main"; } } -@include media-breakpoint-up(md) { +@media (max-width: 768px) { .document-wrapper { - flex-direction: row; - max-height: 100%; - } + grid-template-columns: 1fr; + grid-template-areas: + "header" + "main" + "sidebar" !important; + + &.with-sidebar { + } - .sidebar { - flex-basis: 270px; - flex-shrink: 0; + > .sidebar { + width: 100%; + background: #fff; + grid-column: 1; + grid-row: 2; + } } } diff --git a/src/css/_includes/sidebar.scss b/src/css/_includes/sidebar.scss index 5803aa1a87c9f9..36b79bdfa25f26 100644 --- a/src/css/_includes/sidebar.scss +++ b/src/css/_includes/sidebar.scss @@ -1,6 +1,4 @@ .sidebar { - position: relative; - min-height: 100%; flex-direction: column; display: flex; @@ -148,13 +146,6 @@ margin-bottom: 0.25rem; } -#sidebar { - // Work around Firefox bug - // https://moduscreate.com/blog/how-to-fix-overflow-issues-in-css-flex-layouts/ - min-height: 0; - margin-top: 2px; -} - .section-nav { list-style-type: none; padding-left: 0; diff --git a/yarn.lock b/yarn.lock index d84d90083f5f8a..d93cae4f1cc9c1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13872,10 +13872,10 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0: dependencies: find-up "^4.0.0" -platformicons@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/platformicons/-/platformicons-3.1.0.tgz#a3fa2fba83d3304c06a7c5b4502b34bbb0663505" - integrity sha512-HVjDjE/1M2yhL+wt2RHjgjo2g9Yo0y7sJdM4ZHISE7tuPwr43A9TSHOeRgocs1whNayQpIcnLPMCb6MS0/mwVg== +platformicons@^3.1.1: + version "3.1.1" + resolved "https://registry.yarnpkg.com/platformicons/-/platformicons-3.1.1.tgz#ca50a544230b5656e012ed775957ffe88b6f938e" + integrity sha512-EdC6ig6jnOgx8Zx8Uw5LgALzX7EXCNGXzDO/eT2O1AXeJs+MTIpK3ULT3PT8HXDbPQ/1j3Fwh4CPctof9N0CvA== dependencies: "@types/node" "*" "@types/react" "^16 || ^17"