Merge pull request #1897 from weseek/feat/switch-sidebar-content

Feat/switch sidebar content

package.json

@@ -155,7 +155,6 @@
     ],
     "@alienfast/i18next-loader": "^1.0.16",
     "@atlaskit/drawer": "^5.3.5",
-    "@atlaskit/logo": "^12.3.3",
     "@atlaskit/navigation-next": "^8.0.2",
     "@babel/core": "^7.4.5",
     "@babel/plugin-proposal-class-properties": "^7.8.3",

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

@@ -3,12 +3,9 @@ import React from 'react';
 
 import { withTranslation } from 'react-i18next';
 
-import { JiraWordmark } from '@atlaskit/logo';
-
 import {
   HeaderSection,
   MenuSection,
-  Wordmark,
 } from '@atlaskit/navigation-next';
 
 import { createSubscribedElement } from '../UnstatedUtils';
@@ -22,19 +19,25 @@ class CustomSidebar extends React.Component {
   state = {
   };
 
+  renderHeaderWordmark() {
+    return <h3>Custom Sidebar</h3>;
+  }
+
   render() {
     return (
       <>
         <HeaderSection>
           { () => (
-            <div className="grw-product-nav-header">
-              <Wordmark wordmark={JiraWordmark} />
+            <div className="grw-sidebar-header-container">
+              {this.renderHeaderWordmark()}
             </div>
           ) }
         </HeaderSection>
         <MenuSection>
           { () => (
-            <span>(TBD) CustomSidebar Contents</span>
+            <div className="grw-sidebar-content-container">
+              <span>(TBD) CustomSidebar Contents</span>
+            </div>
           ) }
         </MenuSection>
       </>

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

@@ -3,12 +3,9 @@ import React from 'react';
 
 import { withTranslation } from 'react-i18next';
 
-import { JiraWordmark } from '@atlaskit/logo';
-
 import {
   HeaderSection,
   MenuSection,
-  Wordmark,
 } from '@atlaskit/navigation-next';
 
 import { createSubscribedElement } from '../UnstatedUtils';
@@ -22,19 +19,25 @@ class History extends React.Component {
   state = {
   };
 
+  renderHeaderWordmark() {
+    return <h3>History</h3>;
+  }
+
   render() {
     return (
       <>
         <HeaderSection>
           { () => (
-            <div className="grw-product-nav-header">
-              <Wordmark wordmark={JiraWordmark} />
+            <div className="grw-sidebar-header-container">
+              {this.renderHeaderWordmark()}
             </div>
           ) }
         </HeaderSection>
         <MenuSection>
           { () => (
-            <span>(TBD) History Contents</span>
+            <div className="grw-sidebar-content-container">
+              <span>(TBD) History Contents</span>
+            </div>
           ) }
         </MenuSection>
       </>

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

@@ -3,9 +3,6 @@ import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
 
-import EditIcon from '@atlaskit/icon/glyph/edit';
-import TrayIcon from '@atlaskit/icon/glyph/tray';
-
 import {
   GlobalNav,
 } from '@atlaskit/navigation-next';
@@ -31,7 +28,7 @@ class SidebarNav extends React.Component {
     }
   }
 
-  generateSidebarItemObj(id, icon, label) {
+  generateSidebarItemObj(id, label, icon) {
     return {
       id,
       icon,
@@ -41,12 +38,16 @@ class SidebarNav extends React.Component {
     };
   }
 
+  generateIconFactory(classNames) {
+    return () => <i className={classNames}></i>;
+  }
+
   render() {
     return (
       <GlobalNav
         primaryItems={[
-          this.generateSidebarItemObj('custom', EditIcon, 'Custom Sidebar'),
-          this.generateSidebarItemObj('history', TrayIcon, 'History'),
+          this.generateSidebarItemObj('custom', 'Custom Sidebar', this.generateIconFactory('fa fa-2x fa-code')),
+          this.generateSidebarItemObj('history', 'History', this.generateIconFactory('icon-clock fa-2x')),
         ]}
         secondaryItems={[]}
       />

src/client/styles/scss/_layout.scss

@@ -36,6 +36,17 @@
   }
 }
 
+.grw-sidebar-header-container {
+  padding: 10px;
+
+  h3 {
+    margin-bottom: 0;
+  }
+}
+
+.grw-sidebar-content-container {
+}
+
 /*
   * header
   */
@@ -90,11 +101,11 @@ header {
   }
 }
 
-  .revision-toc {
-    // to get on the Attachment row
-    z-index: 1;
-    overflow: hidden;
-    font-size: 0.9em;
+.revision-toc {
+  // to get on the Attachment row
+  z-index: 1;
+  overflow: hidden;
+  font-size: 0.9em;
 
   .revision-toc-content {
     padding: 10px;

yarn.lock

@@ -90,14 +90,6 @@
     react-addons-text-content "^0.0.4"
     uuid "^3.1.0"
 
-"@atlaskit/logo@^12.3.3":
-  version "12.3.3"
-  resolved "https://registry.yarnpkg.com/@atlaskit/logo/-/logo-12.3.3.tgz#dd329f35f32e84ff9b135ffa566ca19ba31c9d7d"
-  integrity sha512-xeuseG2xDRmja+O9Wa1lib7VFkBMGBdC1N/L+lPcazL+hWEJou+garwZ2Ir6FQktqCr5/yk5AAPMn11GNLseSA==
-  dependencies:
-    react-uid "^2.2.0"
-    tslib "^1.9.3"
-
 "@atlaskit/navigation-next@^8.0.2":
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/@atlaskit/navigation-next/-/navigation-next-8.0.2.tgz#045839d292d21ab01655325f6942e587c00a311d"
@@ -11891,11 +11883,6 @@ react-transition-group@^2.2.1, react-transition-group@^2.3.1:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
-react-uid@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/react-uid/-/react-uid-2.2.0.tgz#0f77e1e0594fbf29fc4fe528cc9aa415c5bf9159"
-  integrity sha512-z+g5+hFOQ08hCfrGcJ1PNs+cmvH8Uq2CVzCmPeWBsUi5A4W4NWXR5jouledzy3oSKGMU9HOzf8zFuGi15TXJoQ==
-
 react-waypoint@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/react-waypoint/-/react-waypoint-9.0.0.tgz#a027deaafa60e3c2c998e78aa3542fa5ffc98afb"