adjust sidebar layout

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

@@ -37,7 +37,7 @@ class SidebarNav extends React.Component {
         <div className={`${className} grw-global-item-container ${isSelected ? 'active' : ''}`}>
           <button
             type="button"
-            className="btn btn-primary"
+            className="btn btn-primary btn-lg"
             onClick={() => this.itemSelectedHandler(id)}
           >
             <i className={iconClassNames}></i>
@@ -52,7 +52,7 @@ class SidebarNav extends React.Component {
       id,
       component: ({ className }) => (
         <div className={`${className} grw-global-item-container d-block d-md-none`}>
-          <a href={href} className="btn btn-primary">
+          <a href={href} className="btn btn-primary btn-lg">
             <i className={iconClassNames}></i>
           </a>
         </div>

src/client/styles/scss/_sidebar.scss

@@ -59,13 +59,15 @@
   }
   div[data-testid='GlobalNavigation'] {
     > div {
+      height: calc(100vh - #{$navbar-total-height});
       padding-top: 0;
     }
   }
   div[class$='-Outer'] {
     width: 0;
   }
-  div[class$='-PrimaryItemsList'] {
+  div[class$='-PrimaryItemsList'],
+  div[class$='-SecondaryItemsList'] {
     > div {
       padding: 0;
     }
@@ -76,15 +78,20 @@
       background-color: transparent;
       border-radius: 0;
 
-      button {
+      .btn {
         width: $grw-sidebar-nav-width;
-        height: $grw-sidebar-nav-width;
-
         border-radius: 0;
       }
+    }
+  }
+  div[class$='-PrimaryItemsList'] {
+    .grw-global-item-container {
+      .btn-lg {
+        height: 55px;
 
-      i {
-        font-size: 1.5em;
+        i {
+          font-size: 1.5em;
+        }
       }
 
       // icon opacity