make sidebar sticky

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

@@ -59,7 +59,7 @@ class SidebarNav extends React.Component {
     const { PrimaryItem, SecondaryItem } = this;
 
     return (
-      <div className="grw-sidebar-nav d-flex flex-column justify-content-between pb-4">
+      <div className="grw-sidebar-nav">
         <div className="grw-sidebar-nav-primary-container">
           <PrimaryItem id="custom" label="Custom Sidebar" iconName="code" />
           <PrimaryItem id="recent" label="Recent Changes" iconName="update" />

src/client/styles/scss/_sidebar.scss

@@ -18,6 +18,10 @@
     }
   }
 
+  // sticky
+  position: sticky;
+  top: $grw-navbar-border-width;
+
   .ak-navigation-resize-button {
     // locate to the center of screen
     top: calc(50vh - 20px);
@@ -51,13 +55,21 @@
   // override @atlaskit/navigation-next styles
   $navbar-total-height: $grw-navbar-height + $grw-navbar-border-width;
   div[data-layout-container='true'] {
-    height: calc(100vh - #{$navbar-total-height});
+    height: 100vh;
+
+    // css-teprsg
+    > div:nth-of-type(2) {
+      padding-left: unset !important;
+      margin-left: unset !important;
+    }
   }
   div[data-testid='Navigation'] {
+    position: unset;
+
     top: $navbar-total-height;
 
     // Adjust to be on top of the growi subnavigation
-    z-index: $zindex-sticky + 5;
+    // z-index: $zindex-sticky + 5;
 
     transition: left 300ms cubic-bezier(0.25, 1, 0.5, 1);
 
@@ -71,9 +83,12 @@
       }
     }
   }
+  div[data-testid='ContextualNavigation'] {
+    height: calc(100vh - #{$grw-navbar-height});
+  }
 
   .grw-sidebar-nav {
-    height: calc(100vh - #{$navbar-total-height});
+    height: 100vh;
 
     .btn {
       width: $grw-sidebar-nav-width;
@@ -108,6 +123,9 @@
     }
 
     .grw-sidebar-nav-secondary-container {
+      position: fixed;
+      bottom: 1.5rem;
+
       .btn {
         padding: 0.9em;
         i {