Merge pull request #2288 from weseek/fix/2587-sidebar

Fix/2587 sidebar

src/client/js/components/Sidebar.jsx

@@ -99,7 +99,7 @@ class Sidebar extends React.Component {
         break;
     }
 
-    return contents;
+    return <div className="grw-sidebar-content-container">{contents}</div>;
   }
 
   render() {

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

@@ -3,11 +3,6 @@ import React from 'react';
 
 import { withTranslation } from 'react-i18next';
 
-import {
-  HeaderSection,
-  MenuSection,
-} from '@atlaskit/navigation-next';
-
 import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 
@@ -25,25 +20,17 @@ class CustomSidebar extends React.Component {
 
   render() {
     return (
-      <div className="grw-sidebar-custom">
-        <HeaderSection>
-          { () => (
-            <div className="grw-sidebar-header-container p-3 d-flex">
-              <h3>Custom Sidebar</h3>
-              <button type="button" className="btn btn-xs btn-outline-secondary ml-auto" onClick={this.reloadData}>
-                <i className="icon icon-reload"></i>
-              </button>
-            </div>
-          ) }
-        </HeaderSection>
-        <MenuSection>
-          { () => (
-            <div className="grw-sidebar-content-container p-3">
-              (TBD) Under implementation
-            </div>
-          ) }
-        </MenuSection>
-      </div>
+      <>
+        <div className="grw-sidebar-content-header p-3 d-flex">
+          <h3 className="mb-0">Custom Sidebar</h3>
+          <button type="button" className="btn btn-sm btn-outline-secondary ml-auto" onClick={this.reloadData}>
+            <i className="icon icon-reload"></i>
+          </button>
+        </div>
+        <div className="grw-sidebar-content-header p-3">
+          (TBD) Under implementation
+        </div>
+      </>
     );
 
   }

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

@@ -3,11 +3,6 @@ import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
 
-import {
-  HeaderSection,
-  MenuSection,
-} from '@atlaskit/navigation-next';
-
 import loggerFactory from '@alias/logger';
 
 import DevidedPagePath from '@commons/models/devided-page-path';
@@ -85,28 +80,20 @@ class RecentChanges extends React.Component {
     const { recentlyUpdatedPages } = this.props.appContainer.state;
 
     return (
-      <div className="grw-sidebar-history">
-        <HeaderSection>
-          { () => (
-            <div className="grw-sidebar-header-container p-3 d-flex">
-              <h3>{t('Recent Changes')}</h3>
-              {/* <h3>{t('Recent Created')}</h3> */} {/* TODO: impl switching */}
-              <button type="button" className="btn btn-sm btn-outline-secondary ml-auto" onClick={this.reloadData}>
-                <i className="icon icon-reload"></i>
-              </button>
-            </div>
-          ) }
-        </HeaderSection>
-        <MenuSection>
-          { () => (
-            <div className="grw-sidebar-content-container p-3">
-              <ul className="list-group list-group-flush">
-                { recentlyUpdatedPages.map(page => <PageItem key={page.id} page={page} />) }
-              </ul>
-            </div>
-          ) }
-        </MenuSection>
-      </div>
+      <>
+        <div className="grw-sidebar-content-header p-3 d-flex">
+          <h3 className="mb-0">{t('Recent Changes')}</h3>
+          {/* <h3 className="mb-0">{t('Recent Created')}</h3> */} {/* TODO: impl switching */}
+          <button type="button" className="btn btn-sm btn-outline-secondary ml-auto" onClick={this.reloadData}>
+            <i className="icon icon-reload"></i>
+          </button>
+        </div>
+        <div className="grw-sidebar-content-body p-3">
+          <ul className="list-group list-group-flush">
+            { recentlyUpdatedPages.map(page => <PageItem key={page.id} page={page} />) }
+          </ul>
+        </div>
+      </>
     );
   }
 

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

@@ -3,10 +3,6 @@ import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
 
-import {
-  GlobalNav,
-} from '@atlaskit/navigation-next';
-
 import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 
@@ -28,36 +24,28 @@ class SidebarNav extends React.Component {
     }
   }
 
-  generatePrimaryItemObj(id, label, iconName) {
+  PrimaryItem = ({ id, label, iconName }) => {
     const isSelected = this.props.currentContentsId === id;
 
-    return {
-      id,
-      component: ({ className }) => (
-        <div className={`${className} grw-global-item-container ${isSelected ? 'active' : ''}`}>
-          <button
-            type="button"
-            className={`btn btn-primary btn-lg ${isSelected ? 'active' : ''}`}
-            onClick={() => this.itemSelectedHandler(id)}
-          >
-            <i className="material-icons">{iconName}</i>
-          </button>
-        </div>
-      ),
-    };
+    return (
+      <button
+        type="button"
+        className={`d-block btn btn-primary btn-lg ${isSelected ? 'active' : ''}`}
+        onClick={() => this.itemSelectedHandler(id)}
+      >
+        <i className="material-icons">{iconName}</i>
+      </button>
+    );
   }
 
-  generateSecondaryItemObj(id, label, iconName, href, isBlank) {
-    return {
-      id,
-      component: ({ className }) => (
-        <div className={`${className} grw-global-item-container`}>
-          <a href={href} className="btn btn-primary" target={`${isBlank ? '_blank' : ''}`}>
-            <i className="material-icons">{iconName}</i>
-          </a>
-        </div>
-      ),
-    };
+  SecondaryItem({
+    label, iconName, href, isBlank,
+  }) {
+    return (
+      <a href={href} className="d-block btn btn-primary" target={`${isBlank ? '_blank' : ''}`}>
+        <i className="material-icons">{iconName}</i>
+      </a>
+    );
   }
 
   generateIconFactory(classNames) {
@@ -68,33 +56,23 @@ class SidebarNav extends React.Component {
     const { isAdmin, currentUsername } = this.props.appContainer;
     const isLoggedIn = currentUsername != null;
 
-    const primaryItems = [
-      this.generatePrimaryItemObj('custom', 'Custom Sidebar', 'code'),
-      this.generatePrimaryItemObj('recent', 'Recent Changes', 'update'),
-      // this.generatePrimaryItemObj('tag', 'Tags', 'icon-tag'),
-      // this.generatePrimaryItemObj('favorite', 'Favorite', 'icon-star'),
-    ];
-
-    let secondaryItems = [
-      isAdmin && (
-        this.generateSecondaryItemObj('admin', 'Admin', 'settings', '/admin')
-      ),
-      isLoggedIn && (
-        this.generateSecondaryItemObj('draft', 'Draft', 'file_copy', `/user/${currentUsername}#user-draft-list`)
-      ),
-      this.generateSecondaryItemObj('help', 'Help', 'help', 'https://docs.growi.org', true),
-      isLoggedIn && (
-        this.generateSecondaryItemObj('trash', 'Trash', 'delete', '/trash')
-      ),
-    ];
-    // remove 'false' items
-    secondaryItems = secondaryItems.filter(item => item !== false);
+    const { PrimaryItem, SecondaryItem } = this;
 
     return (
-      <GlobalNav
-        primaryItems={primaryItems}
-        secondaryItems={secondaryItems}
-      />
+      <div className="grw-sidebar-nav d-flex flex-column justify-content-between">
+        <div className="grw-sidebar-nav-primary-container">
+          <PrimaryItem id="custom" label="Custom Sidebar" iconName="code" />
+          <PrimaryItem id="recent" label="Recent Changes" iconName="update" />
+          {/* <PrimaryItem id="tag" label="Tags" iconName="icon-tag" /> */}
+          {/* <PrimaryItem id="favorite" label="Favorite" iconName="icon-star" /> */}
+        </div>
+        <div className="grw-sidebar-nav-secondary-container">
+          {isAdmin && <SecondaryItem label="Admin" iconName="settings" href="/admin" />}
+          {isLoggedIn && <SecondaryItem label="Draft" iconName="file_copy" href={`/user/${currentUsername}#user-draft-list`} />}
+          <SecondaryItem label="Help" iconName="help" href="https://docs.growi.org" isBlank />
+          {isLoggedIn && <SecondaryItem label="Trash" iconName="delete" href="/trash" />}
+        </div>
+      </div>
     );
   }
 

src/client/styles/scss/_sidebar.scss

@@ -12,6 +12,7 @@
       width: 0;
       content: '';
       border: 9px solid transparent;
+      border-right-color: white;
       border-left-width: 0;
       transform: translateY(-#{$sidebar-nav-button-height / 2});
     }
@@ -49,40 +50,32 @@
 
   // override @atlaskit/navigation-next styles
   $navbar-total-height: $grw-navbar-height + $grw-navbar-border-width;
-  div[class$='-LayoutContainer'] {
+  div[data-layout-container='true'] {
     height: calc(100vh - #{$navbar-total-height});
   }
-  div[class$='-NavigationContainer'] {
+  div[data-testid='Navigation'] {
     top: $navbar-total-height;
 
     // Adjust to be on top of the growi subnavigation
     z-index: $zindex-sticky + 5;
-  }
-  div[data-testid='GlobalNavigation'] {
-    > div {
-      height: calc(100vh - #{$navbar-total-height});
-      padding-top: 0;
+
+    // css-xxx-Outer
+    > div:nth-of-type(2) {
+      width: 0;
+
+      // css-xxx-Shadow
+      > div:first-child {
+        background: linear-gradient(to left, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, rgba(0, 0, 0, 0.1) 1px, rgba(0, 0, 0, 0) 100%);
+      }
     }
   }
-  div[class$='-Outer'] {
-    width: 0;
-  }
-  div[class$='-PrimaryItemsList'],
-  div[class$='-SecondaryItemsList'] {
-    > div {
-      padding: 0;
-    }
 
-    .grw-global-item-container {
-      width: unset;
-      height: unset;
-      background-color: transparent;
-      border-radius: 0;
+  .grw-sidebar-nav {
+    height: calc(100vh - #{$navbar-total-height});
 
-      .btn {
-        width: $grw-sidebar-nav-width;
-        border-radius: 0;
-      }
+    .btn {
+      width: $grw-sidebar-nav-width;
+      border-radius: 0;
 
       // icon opacity
       &:not(.active) {
@@ -97,39 +90,21 @@
         }
       }
     }
-  }
-  div[class$='-PrimaryItemsList'] {
-    .grw-global-item-container {
-      .btn-lg {
+
+    .grw-sidebar-nav-primary-container {
+      .btn {
         padding: 0.8rem 1rem;
         line-height: 1em;
         i {
           font-size: 1.7em;
         }
-      }
 
-      &.active {
-        button {
+        &.active {
           @extend %fukidashi-for-active;
         }
       }
     }
   }
-  div[class$='-ScrollableTransitionGroup'] {
-    // remove horizontal line
-    > div,
-    > div > div {
-      &:before,
-      &:after {
-        display: none;
-      }
-    }
-  }
-  div[class$='-Outer'] {
-    div[class$='-Shadow'] {
-      background: linear-gradient(to left, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, rgba(0, 0, 0, 0.1) 1px, rgba(0, 0, 0, 0) 100%);
-    }
-  }
 }
 
 // Drawer Mode
@@ -139,23 +114,31 @@
     z-index: $zindex-fixed - 2;
 
     // override @atlaskit/navigation-next styles
-    div[class$='-Outer'],
-    div[class$='-teprsg'] {
-      display: none;
+    div[data-layout-container='true'] {
+      // css-teprsg
+      > div:nth-of-type(2) {
+        display: none;
+      }
+    }
+    div[data-testid='Navigation'] {
+      // css-xxx-Outer
+      > div:nth-of-type(2) {
+        display: none;
+      }
     }
 
     &:not(.open) {
-      div[class$='-NavigationContainer'] {
+      div[data-testid='Navigation'] {
         left: -#{$grw-sidebar-nav-width + $grw-sidebar-content-min-width};
       }
     }
     &.open {
-      div[class$='-NavigationContainer'] {
+      div[data-testid='Navigation'] {
         left: 0;
       }
     }
 
-    div[class$='-NavigationContainer'] {
+    div[data-testid='Navigation'] {
       transition: left 300ms cubic-bezier(0.25, 1, 0.5, 1);
     }
   }
@@ -164,12 +147,3 @@
     z-index: $zindex-fixed - 4;
   }
 }
-
-.grw-sidebar-header-container {
-  h3 {
-    margin-bottom: 0;
-  }
-}
-
-.grw-sidebar-content-container {
-}

src/client/styles/scss/theme/_apply-colors.scss

@@ -149,6 +149,7 @@ pre:not(.hljs):not(.CodeMirror-line) {
 }
 
 .grw-sidebar {
+  // override @atlaskit/navigation-next styles
   .ak-navigation-resize-button {
     $color-resize-button: $color-global !default;
     $bgcolor-resize-button: white !default;
@@ -161,8 +162,19 @@ pre:not(.hljs):not(.CodeMirror-line) {
       @include override-hexagon-color($color-resize-button-hover, $bgcolor-resize-button-hover);
     }
   }
+  div[data-testid='GlobalNavigation'] {
+    > div {
+      background-color: $bgcolor-sidebar;
+    }
+  }
+  div[data-testid='ContextualNavigation'] {
+    > div {
+      color: $color-sidebar-context;
+      background-color: $bgcolor-sidebar-context;
+    }
+  }
 
-  .grw-global-item-container {
+  .grw-sidebar-nav {
     .btn {
       @include button-variant(
         $bgcolor-sidebar,
@@ -174,24 +186,15 @@ pre:not(.hljs):not(.CodeMirror-line) {
       );
     }
   }
-  .grw-global-item-container.active {
-    .btn:after {
-      // fukidashi color
-      border-right-color: $bgcolor-sidebar-context;
-    }
-    i {
-      text-shadow: $text-shadow-sidebar-nav-item-active;
-    }
-  }
-  div[data-testid='GlobalNavigation'] {
-    > div {
-      background-color: $bgcolor-sidebar;
-    }
-  }
-  div[data-testid='ContextualNavigation'] {
-    > div {
-      color: $color-sidebar-context;
-      background-color: $bgcolor-sidebar-context;
+  .grw-sidebar-nav-primary-container {
+    .btn.active {
+      i {
+        text-shadow: $text-shadow-sidebar-nav-item-active;
+      }
+      // fukidashi
+      &:after {
+        border-right-color: $bgcolor-sidebar-context;
+      }
     }
   }