adjust sidebar button size

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

@@ -29,34 +29,32 @@ class SidebarNav extends React.Component {
     }
   }
 
-  generatePrimaryItemObj(id, label, icon) {
+  generatePrimaryItemObj(id, label, iconClassNames) {
     const isSelected = this.props.currentContentsId === id;
 
     return {
       id,
       component: ({ className }) => (
         <div className={`${className} grw-global-item-container ${isSelected ? 'active' : ''}`}>
-          <GlobalItem
-            icon={icon}
-            label={label}
-            isSelected={isSelected}
+          <button
+            type="button"
+            className="btn btn-primary"
             onClick={() => this.itemSelectedHandler(id)}
-          />
+          >
+            <i className={iconClassNames}></i>
+          </button>
         </div>
       ),
     };
   }
 
-  generateSecondaryItemObj(id, label, icon, href) {
+  generateSecondaryItemObj(id, label, iconClassNames, href) {
     return {
       id,
       component: ({ className }) => (
         <div className={`${className} grw-global-item-container d-block d-md-none`}>
-          <a href={href}>
-            <GlobalItem
-              icon={icon}
-              label={label}
-            />
+          <a href={href} className="btn btn-primary">
+            <i className={iconClassNames}></i>
           </a>
         </div>
       ),
@@ -71,12 +69,12 @@ class SidebarNav extends React.Component {
     return (
       <GlobalNav
         primaryItems={[
-          this.generatePrimaryItemObj('custom', 'Custom Sidebar', this.generateIconFactory('fa fa-code')),
-          this.generatePrimaryItemObj('history', 'History', this.generateIconFactory('icon-clock')),
+          this.generatePrimaryItemObj('custom', 'Custom Sidebar', 'fa fa-code'),
+          this.generatePrimaryItemObj('history', 'History', 'icon-clock'),
         ]}
         secondaryItems={[
-          this.generateSecondaryItemObj('admin', 'Admin', this.generateIconFactory('icon-settings'), '/admin'),
-          this.generateSecondaryItemObj('help', 'Help', this.generateIconFactory('icon-question'), 'https://docs.growi.org'),
+          this.generateSecondaryItemObj('admin', 'Admin', 'icon-settings', '/admin'),
+          this.generateSecondaryItemObj('help', 'Help', 'icon-question', 'https://docs.growi.org'),
         ]}
       />
     );

src/client/styles/scss/_sidebar.scss

@@ -5,12 +5,12 @@
     // speech balloon
     &:after {
       position: absolute;
-      top: 0.6em;
-      right: -1em;
+      top: #{$grw-sidebar-nav-width / 2 - 9px};
+      right: -0.1em;
       display: block;
       width: 0;
       content: '';
-      border: 0.8em solid transparent;
+      border: 9px solid transparent;
       border-left-width: 0;
     }
   }
@@ -67,27 +67,40 @@
       padding: 0;
     }
 
-  .grw-global-item-container {
-    i {
-      font-size: 1.5em;
-    }
+    .grw-global-item-container {
+      width: unset;
+      height: unset;
+      background-color: transparent;
+      border-radius: 0;
+
+      button {
+        width: $grw-sidebar-nav-width;
+        height: $grw-sidebar-nav-width;
+
+        border-radius: 0;
+      }
 
-    // icon opacity
-    &:not(.active) {
       i {
-        opacity: 0.4;
+        font-size: 1.5em;
       }
-      &:hover,
-      &:focus {
+
+      // icon opacity
+      &:not(.active) {
         i {
-          opacity: 0.7;
+          opacity: 0.4;
+        }
+        &:hover,
+        &:focus {
+          i {
+            opacity: 0.7;
+          }
         }
       }
-    }
 
-    &.active {
-      button {
-        @extend %fukidashi-for-active;
+      &.active {
+        button {
+          @extend %fukidashi-for-active;
+        }
       }
     }
   }