devide SidebarNav

src/client/js/components/Sidebar.jsx

@@ -3,16 +3,13 @@ import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
 
-import AddIcon from '@atlaskit/icon/glyph/add';
 import BacklogIcon from '@atlaskit/icon/glyph/backlog';
 import BoardIcon from '@atlaskit/icon/glyph/board';
 import GraphLineIcon from '@atlaskit/icon/glyph/graph-line';
 import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
-import SearchIcon from '@atlaskit/icon/glyph/search';
-import { JiraIcon, JiraWordmark } from '@atlaskit/logo';
+import { JiraWordmark } from '@atlaskit/logo';
 
 import {
-  GlobalNav,
   GroupHeading,
   HeaderSection,
   Item,
@@ -22,106 +19,64 @@ import {
   Separator,
   Wordmark,
 } from '@atlaskit/navigation-next';
-import Drawer from '@atlaskit/drawer';
 
 import { createSubscribedElement } from './UnstatedUtils';
 import AppContainer from '../services/AppContainer';
 
-class GlobalNavigation extends React.Component {
-
-  state = {
-    isDrawerOpen: false,
-  };
-
-  openDrawer = () => this.setState({ isDrawerOpen: true });
-
-  closeDrawer = () => this.setState({ isDrawerOpen: false });
-
-  render() {
-    const { isDrawerOpen } = this.state;
-    return (
-      <div>
-        <GlobalNav
-          primaryItems={[
-            {
-              id: 'jira',
-              icon: () => <JiraIcon size="medium" label="Jira" />,
-              label: 'Jira',
-            },
-            {
-              id: 'search',
-              icon: SearchIcon,
-              label: 'Search',
-              onClick: this.openDrawer,
-            },
-            { id: 'create', icon: AddIcon, label: 'Add' },
-          ]}
-          secondaryItems={[]}
-        />
-        <Drawer onClose={this.closeDrawer} isOpen={isDrawerOpen} width="wide">
-          <code>Drawer contents</code>
-        </Drawer>
-      </div>
-    );
-  }
-
-}
-
+import SidebarNav from './Sidebar/SidebarNav';
 
 class Sidebar extends React.Component {
 
-  constructor(props) {
-    super(props);
+  static propTypes = {
+  };
 
-    this.state = {
-      isDrawerOpen: false,
-    };
+  state = {
+  };
 
-    this.renderContainerNavigation = this.renderContainerNavigation.bind(this);
-  }
-
-  renderContainerNavigation() {
-    return (
-      <div data-webdriver-test-key="container-navigation">
-        <HeaderSection>
-          { () => (
-            <Wordmark wordmark={JiraWordmark} />
-          ) }
-        </HeaderSection>
-        <MenuSection>
-          {({ className }) => (
-            <div className={className}>
-              <Item
-                before={BacklogIcon}
-                text="Backlog"
-                isSelected
-              />
-              <Item
-                before={BoardIcon}
-                text="Active sprints"
-              />
-              <Item
-                before={GraphLineIcon}
-                text="Reports"
-              />
-              <Separator />
-              <GroupHeading>Shortcuts</GroupHeading>
-              <Item before={ShortcutIcon} text="Project space" />
-              <Item before={ShortcutIcon} text="Project repo" />
-            </div>
-          )}
-        </MenuSection>
-      </div>
-    );
-  }
+  renderContainerNavigation = () => (
+    <div>
+      <HeaderSection>
+        { () => (
+          <Wordmark wordmark={JiraWordmark} />
+        ) }
+      </HeaderSection>
+      <MenuSection>
+        {({ className }) => (
+          <div className={className}>
+            <Item
+              before={BacklogIcon}
+              text="Backlog"
+              isSelected
+            />
+            <Item
+              before={BoardIcon}
+              text="Active sprints"
+            />
+            <Item
+              before={GraphLineIcon}
+              text="Reports"
+            />
+            <Separator />
+            <GroupHeading>Shortcuts</GroupHeading>
+            <Item before={ShortcutIcon} text="Project space" />
+            <Item before={ShortcutIcon} text="Project repo" />
+          </div>
+        )}
+      </MenuSection>
+    </div>
+  );
 
   render() {
     return (
       <NavigationProvider>
         <LayoutManager
-          globalNavigation={GlobalNavigation}
+          globalNavigation={SidebarNav}
           productNavigation={() => null}
           containerNavigation={this.renderContainerNavigation}
+          experimental_flyoutOnHover
+          experimental_alternateFlyoutBehaviour
+          experimental_fullWidthFlyout
+          showContextualNavigation
         >
         </LayoutManager>
       </NavigationProvider>
@@ -138,7 +93,4 @@ const SidebarWrapper = (props) => {
   return createSubscribedElement(Sidebar, props, [AppContainer]);
 };
 
-Sidebar.propTypes = {
-};
-
 export default withTranslation()(SidebarWrapper);

src/client/js/components/Sidebar/SidebarNav.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { withTranslation } from 'react-i18next';
+
+import AddIcon from '@atlaskit/icon/glyph/add';
+import SearchIcon from '@atlaskit/icon/glyph/search';
+import { JiraIcon } from '@atlaskit/logo';
+
+import { GlobalNav } from '@atlaskit/navigation-next';
+import Drawer from '@atlaskit/drawer';
+
+import { createSubscribedElement } from '../UnstatedUtils';
+import AppContainer from '../../services/AppContainer';
+
+class SidebarNav extends React.Component {
+
+  propTypes = {
+  };
+
+  state = {
+    isDrawerOpen: false,
+  };
+
+  openDrawer = () => this.setState({ isDrawerOpen: true });
+
+  closeDrawer = () => this.setState({ isDrawerOpen: false });
+
+  render() {
+    const { isDrawerOpen } = this.state;
+    return (
+      <div>
+        <GlobalNav
+          primaryItems={[
+            {
+              id: 'jira',
+              icon: () => <JiraIcon size="medium" label="Jira" />,
+              label: 'Jira',
+            },
+            {
+              id: 'search',
+              icon: SearchIcon,
+              label: 'Search',
+              onClick: this.openDrawer,
+            },
+            { id: 'create', icon: AddIcon, label: 'Add' },
+          ]}
+          secondaryItems={[]}
+        />
+        <Drawer onClose={this.closeDrawer} isOpen={isDrawerOpen} width="wide">
+          <code>Drawer contents</code>
+        </Drawer>
+      </div>
+    );
+  }
+
+}
+
+/**
+ * Wrapper component for using unstated
+ */
+const SidebarNavWrapper = (props) => {
+  return createSubscribedElement(SidebarNav, props, [AppContainer]);
+};
+
+export default withTranslation()(SidebarNavWrapper);