Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Improved hamburger menu (#1619)
  • Loading branch information
rstaib committed Mar 29, 2020
1 parent 8eeee0d commit 6232a53
Show file tree
Hide file tree
Showing 9 changed files with 425 additions and 150 deletions.
279 changes: 180 additions & 99 deletions website/graphql-types.ts

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions website/src/components/misc/doc-page-aside.tsx
Expand Up @@ -61,15 +61,15 @@ export const DocPageAsideGraphQLFragment = graphql`
`;

const Aside = styled.aside`
display: flex;
display: none;
flex: 0 0 250px;
flex-direction: column;
* {
user-select: none;
}
@media only screen and (min-width: 992px) {
@media only screen and (min-width: 1300px) {
display: flex;
}
`;
Expand Down
48 changes: 48 additions & 0 deletions website/src/components/misc/doc-page-legacy.tsx
@@ -0,0 +1,48 @@
import React, { FunctionComponent } from "react";
import styled from "styled-components";
import { Link } from "./link";

export const DocPageLegacy: FunctionComponent = () => {
return (
<Dialog
role="dialog"
aria-live="polite"
aria-label="legacydoc"
aria-describedby="legacydoc:desc"
>
<Container>
<Message id="legacydoc:desc">
<strong>Important:</strong> This documentation covers Hot Chocolate
11. For version 10 and lower click{" "}
<LegacyDocLink to="https://hotchocolate.io">here</LegacyDocLink>.
</Message>
</Container>
</Dialog>
);
};

const Dialog = styled.div`
background-color: #ffb806;
`;

const Container = styled.div`
display: flex;
flex-direction: column;
padding: 10px 20px;
@media only screen and (min-width: 800px) {
padding: 10px 50px;
}
`;

const Message = styled.div`
flex: 0 1 auto;
font-size: 0.889em;
line-height: 1.667em;
color: #4f3903;
`;

const LegacyDocLink = styled(Link)`
text-decoration: underline;
color: #4f3903;
`;
38 changes: 36 additions & 2 deletions website/src/components/misc/doc-page-navigation.tsx
Expand Up @@ -10,6 +10,7 @@ import { Link } from "./link";

import ArrowDownIconSvg from "../../images/arrow-down.svg";
import ArrowUpIconSvg from "../../images/arrow-up.svg";
import ProductSwitcherIconSvg from "../../images/th-large.svg";

interface DocPageNavigationProperties {
data: DocPageNavigationFragment;
Expand Down Expand Up @@ -64,6 +65,15 @@ export const DocPageNavigation: FunctionComponent<DocPageNavigationProperties> =
return (
<Navigation>
<FixedContainer>
<ProductSwitcher>
{data.config?.products &&
data.config.products.find(
(product) => product?.path === "hotchocolate"
)?.title}
<IconContainer size={16}>
<ProductSwitcherIconSvg />
</IconContainer>
</ProductSwitcher>
{data.config?.products &&
data.config.products[0]?.items &&
buildNavigationStructure(
Expand Down Expand Up @@ -118,15 +128,15 @@ interface Item {
}

const Navigation = styled.nav`
display: flex;
display: none;
flex: 0 0 250px;
flex-direction: column;
* {
user-select: none;
}
@media only screen and (min-width: 992px) {
@media only screen and (min-width: 1050px) {
display: flex;
}
`;
Expand All @@ -137,6 +147,30 @@ const FixedContainer = styled.div`
width: 250px;
`;

const ProductSwitcher = styled.div`
display: flex;
flex-direction: row;
align-items: center;
border: 1px solid #ccc;
border-radius: 5px;
margin: 6px 14px 20px;
padding: 7px 5px;
font-size: 0.833em;
transition: background-color 0.2s ease-in-out;
> ${IconContainer} {
margin-left: auto;
> svg {
fill: #666;
}
}
:hover {
background-color: #ddd;
}
`;

const NavigationList = styled.ol`
display: flex;
flex-direction: column;
Expand Down

0 comments on commit 6232a53

Please sign in to comment.