organize sidebar contents

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

@@ -47,12 +47,12 @@ class SidebarNav extends React.Component {
     };
   }
 
-  generateSecondaryItemObj(id, label, iconClassNames, href) {
+  generateSecondaryItemObj(id, label, iconClassNames, href, isBlank, isHiddenOnLargeDevice) {
     return {
       id,
       component: ({ className }) => (
-        <div className={`${className} grw-global-item-container d-block d-md-none`}>
-          <a href={href} className="btn btn-primary btn-lg">
+        <div className={`${className} grw-global-item-container ${isHiddenOnLargeDevice ? 'd-block d-md-none' : ''}`}>
+          <a href={href} className="btn btn-primary btn-lg" target={`${isBlank ? '_blank' : ''}`}>
             <i className={iconClassNames}></i>
           </a>
         </div>
@@ -65,22 +65,40 @@ class SidebarNav extends React.Component {
   }
 
   render() {
+    const { isAdmin, currentUsername } = this.props.appContainer;
+
+    const primaryItems = [
+      this.generatePrimaryItemObj('custom', 'Custom Sidebar', 'fa fa-code'),
+      this.generatePrimaryItemObj('recent', 'Recent Changes', 'icon-clock'),
+      // this.generatePrimaryItemObj('tag', 'Tags', 'icon-tag'),
+      // this.generatePrimaryItemObj('favorite', 'Favorite', 'icon-star'),
+    ];
+
+    const secondaryItems = [
+      this.generateSecondaryItemObj('help', 'Help', 'icon-question', 'https://docs.growi.org', true),
+      this.generateSecondaryItemObj('draft', 'Draft', 'icon-docs', `/user/${currentUsername}#user-draft-list`),
+      this.generateSecondaryItemObj('trash', 'Trash', 'icon-trash', '/trash'),
+    ];
+    if (isAdmin) {
+      secondaryItems.unshift( // add to the beginning
+        this.generateSecondaryItemObj('admin', 'Admin', 'icon-settings', '/admin', false, true),
+      );
+    }
+
     return (
       <GlobalNav
-        primaryItems={[
-          this.generatePrimaryItemObj('custom', 'Custom Sidebar', 'fa fa-code'),
-          this.generatePrimaryItemObj('recent', 'Recent Changes', 'icon-clock'),
-        ]}
-        secondaryItems={[
-          this.generateSecondaryItemObj('admin', 'Admin', 'icon-settings', '/admin'),
-          this.generateSecondaryItemObj('help', 'Help', 'icon-question', 'https://docs.growi.org'),
-        ]}
+        primaryItems={primaryItems}
+        secondaryItems={secondaryItems}
       />
     );
   }
 
 }
 
+SidebarNav.propTypes = {
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+};
+
 /**
  * Wrapper component for using unstated
  */

src/client/styles/scss/_sidebar.scss

@@ -1,17 +1,19 @@
 .grw-sidebar {
+  $sidebar-nav-button-height: 55px;
+
   %fukidashi-for-active {
     position: relative;
 
     // speech balloon
     &:after {
       position: absolute;
-      top: #{$grw-sidebar-nav-width / 2 - 9px};
       right: -0.1em;
       display: block;
       width: 0;
       content: '';
       border: 9px solid transparent;
       border-left-width: 0;
+      transform: translateY(-#{$sidebar-nav-button-height / 2});
     }
   }
 
@@ -82,17 +84,6 @@
         width: $grw-sidebar-nav-width;
         border-radius: 0;
       }
-    }
-  }
-  div[class$='-PrimaryItemsList'] {
-    .grw-global-item-container {
-      .btn-lg {
-        height: 55px;
-
-        i {
-          font-size: 1.5em;
-        }
-      }
 
       // icon opacity
       &:not(.active) {
@@ -106,6 +97,17 @@
           }
         }
       }
+    }
+  }
+  div[class$='-PrimaryItemsList'] {
+    .grw-global-item-container {
+      .btn-lg {
+        height: $sidebar-nav-button-height;
+
+        i {
+          font-size: 1.5em;
+        }
+      }
 
       &.active {
         button {