Set up scaffolding for new drawer

3 files changed, 28 insertions, 9 deletions

diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 5fde007d6..7d5d05c9f 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -18,6 +18,7 @@ import { Dispatcher } from 'ts/redux/dispatcher';
 import { Deco, Key, ProviderType, WebsiteLegacyPaths, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
+import { utils } from 'ts/utils/utils';
 
 export enum TopBarDisplayType {
     Default,
@@ -202,6 +203,8 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
             </div>
         );
         const popoverContent = <Menu style={{ color: colors.darkGrey }}>{developerSectionMenuItems}</Menu>;
+        // TODO : Remove this once we ship portal v2
+        const shouldShowPortalV2Drawer = this._isViewingPortal() && utils.shouldShowPortalV2();
         return (
             <div style={{ ...styles.topBar, ...bottomBorderStyle, ...this.props.style, ...{ height } }} className="pb1">
                 <div className={parentClassNames}>
@@ -274,10 +277,22 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                         </div>
                     </div>
                 </div>
-                {this._renderDrawer()}
+                {shouldShowPortalV2Drawer ? this._renderPortalV2Drawer() : this._renderDrawer()}
             </div>
         );
     }
+    private _renderPortalV2Drawer(): React.ReactNode {
+        return (
+            <Drawer
+                open={this.state.isDrawerOpen}
+                docked={false}
+                openSecondary={true}
+                onRequestChange={this._onMenuButtonClick.bind(this)}
+            >
+                <div />
+            </Drawer>
+        );
+    }
     private _renderDrawer(): React.ReactNode {
         return (
             <Drawer
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index f255f81e7..7fc180449 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -34,14 +34,15 @@ import 'less/all.less';
 // cause we only want to import the module when the user navigates to the page.
 // At the same time webpack statically parses for System.import() to determine bundle chunk split points
 // so each lazy import needs it's own `System.import()` declaration.
-const LazyPortal =
-    utils.isDevelopment() || utils.isStaging() || utils.isDogfood()
-        ? createLazyComponent('Portal', async () =>
-              System.import<any>(/* webpackChunkName: "portal" */ 'ts/containers/portal'),
-          )
-        : createLazyComponent('LegacyPortal', async () =>
-              System.import<any>(/* webpackChunkName: "legacyPortal" */ 'ts/containers/legacy_portal'),
-          );
+
+// TODO: Remove this once we ship V2
+const LazyPortal = utils.shouldShowPortalV2()
+    ? createLazyComponent('Portal', async () =>
+          System.import<any>(/* webpackChunkName: "portal" */ 'ts/containers/portal'),
+      )
+    : createLazyComponent('LegacyPortal', async () =>
+          System.import<any>(/* webpackChunkName: "legacyPortal" */ 'ts/containers/legacy_portal'),
+      );
 const LazyZeroExJSDocumentation = createLazyComponent('Documentation', async () =>
     System.import<any>(/* webpackChunkName: "zeroExDocs" */ 'ts/containers/zero_ex_js_documentation'),
 );
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index 3c99bd2fe..c370ac90c 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -314,4 +314,7 @@ export const utils = {
         return _.includes(window.location.href, configs.DOMAIN_STAGING);
     },
     isDogfood,
+    shouldShowPortalV2(): boolean {
+        return this.isDevelopment() || this.isStaging() || this.isDogfood();
+    },
 };