From 0de654bbd52f7d4702cec9f1a9a5a2cbb793181b Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Fri, 19 Oct 2018 17:40:55 +0100
Subject: fix: scroll lag on doc reference and wiki pages by using react-scroll
 `spy` and only updating the sidebar menu items whose active state had changed

---
 .../website/ts/components/nested_sidebar_menu.tsx  | 92 ++++++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 packages/website/ts/components/nested_sidebar_menu.tsx

(limited to 'packages/website/ts/components/nested_sidebar_menu.tsx')

diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx
new file mode 100644
index 000000000..7de91bf8c
--- /dev/null
+++ b/packages/website/ts/components/nested_sidebar_menu.tsx
@@ -0,0 +1,92 @@
+import { ALink, colors, Link, utils as sharedUtils } from '@0x/react-shared';
+import { ObjectMap } from '@0x/types';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Button } from 'ts/components/ui/button';
+import { Text } from 'ts/components/ui/text';
+
+export interface NestedSidebarMenuProps {
+    sectionNameToLinks: ObjectMap<ALink[]>;
+    sidebarHeader?: React.ReactNode;
+    shouldReformatMenuItemNames?: boolean;
+}
+
+export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => {
+    const navigation = _.map(props.sectionNameToLinks, (links: ALink[], sectionName: string) => {
+        const finalSectionName = sharedUtils.convertCamelCaseToSpaces(sectionName);
+        const menuItems = _.map(links, (link, i) => {
+            const menuItemTitle = props.shouldReformatMenuItemNames
+                ? _.capitalize(sharedUtils.convertDashesToSpaces(link.title))
+                : link.title;
+            const finalLink = {
+                ...link,
+                title: menuItemTitle,
+            };
+            return <MenuItem key={`menu-item-${menuItemTitle}`} link={finalLink} />;
+        });
+        // tslint:disable-next-line:no-unused-variable
+        return (
+            <div key={`section-${sectionName}`} className="py1" style={{ color: colors.greyTheme }}>
+                <div style={{ fontSize: 14, letterSpacing: 0.5 }} className="py1 pl1">
+                    {finalSectionName.toUpperCase()}
+                </div>
+                {menuItems}
+            </div>
+        );
+    });
+    return (
+        <div>
+            {props.sidebarHeader}
+            <div>{navigation}</div>
+        </div>
+    );
+};
+
+export interface MenuItemProps {
+    link: ALink;
+}
+
+export interface MenuItemState {
+    isActive: boolean;
+}
+
+export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
+    constructor(props: MenuItemProps) {
+        super(props);
+        const isActive = window.location.hash.slice(1) === props.link.to;
+        this.state = {
+            isActive,
+        };
+    }
+    public render(): React.ReactNode {
+        const isActive = this.state.isActive;
+        return (
+            <Link
+                to={this.props.link.to}
+                shouldOpenInNewTab={this.props.link.shouldOpenInNewTab}
+                onActivityChanged={this._onActivityChanged.bind(this)}
+            >
+                <Button
+                    borderRadius="4px"
+                    padding="0.4em 6px"
+                    width="100%"
+                    backgroundColor={isActive ? colors.lightLinkBlue : 'rgb(245, 245, 245)'}
+                    fontSize="14px"
+                    textAlign="left"
+                >
+                    <Text
+                        fontWeight={isActive ? 'bold' : 'normal'}
+                        fontColor={isActive ? colors.white : colors.grey800}
+                    >
+                        {this.props.link.title}
+                    </Text>
+                </Button>
+            </Link>
+        );
+    }
+    private _onActivityChanged(isActive: boolean): void {
+        this.setState({
+            isActive,
+        });
+    }
+}
-- 
cgit v1.2.3


From bce90318687b38c35af75cd78bf3ee69271b42ad Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Fri, 19 Oct 2018 17:44:49 +0100
Subject: chore: use `colors` module

---
 packages/website/ts/components/nested_sidebar_menu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/components/nested_sidebar_menu.tsx')

diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx
index 7de91bf8c..f83833d69 100644
--- a/packages/website/ts/components/nested_sidebar_menu.tsx
+++ b/packages/website/ts/components/nested_sidebar_menu.tsx
@@ -70,7 +70,7 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
                     borderRadius="4px"
                     padding="0.4em 6px"
                     width="100%"
-                    backgroundColor={isActive ? colors.lightLinkBlue : 'rgb(245, 245, 245)'}
+                    backgroundColor={isActive ? colors.lightLinkBlue : colors.grey100}
                     fontSize="14px"
                     textAlign="left"
                 >
-- 
cgit v1.2.3


From ce4da870d79a589913d1660de8cf012b894357c6 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Fri, 19 Oct 2018 19:38:12 +0100
Subject: chore: use Text

---
 packages/website/ts/components/nested_sidebar_menu.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/components/nested_sidebar_menu.tsx')

diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx
index f83833d69..021e3f0e5 100644
--- a/packages/website/ts/components/nested_sidebar_menu.tsx
+++ b/packages/website/ts/components/nested_sidebar_menu.tsx
@@ -27,9 +27,9 @@ export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => {
         // tslint:disable-next-line:no-unused-variable
         return (
             <div key={`section-${sectionName}`} className="py1" style={{ color: colors.greyTheme }}>
-                <div style={{ fontSize: 14, letterSpacing: 0.5 }} className="py1 pl1">
+                <Text fontSize="14px" letterSpacing="0.5" className="py1 pl1">
                     {finalSectionName.toUpperCase()}
-                </div>
+                </Text>
                 {menuItems}
             </div>
         );
-- 
cgit v1.2.3


From b49e5c76e485beead2554027a3ff8af101bce1d5 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Fri, 19 Oct 2018 19:38:20 +0100
Subject: Use em for all

---
 packages/website/ts/components/nested_sidebar_menu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/components/nested_sidebar_menu.tsx')

diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx
index 021e3f0e5..db7d55261 100644
--- a/packages/website/ts/components/nested_sidebar_menu.tsx
+++ b/packages/website/ts/components/nested_sidebar_menu.tsx
@@ -68,7 +68,7 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
             >
                 <Button
                     borderRadius="4px"
-                    padding="0.4em 6px"
+                    padding="0.4em 0.375em"
                     width="100%"
                     backgroundColor={isActive ? colors.lightLinkBlue : colors.grey100}
                     fontSize="14px"
-- 
cgit v1.2.3