Set up scaffolding for new drawer

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

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'),
 );

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();
+    },
 };