organize scss

src/client/styles/scss/_layout.scss

@@ -49,76 +49,10 @@
   font-weight: bold;
 }
 
-.grw-sidebar {
-  .ak-navigation-resize-button {
-    top: calc(50vh - 20px);
-  }
-
-  // override @atlaskit/navigation-next styles
-  div[class$='-NavigationContainer'] {
-    // Adjust to be on top of the growi subnavigation
-    z-index: $zindex-sticky + 5;
-  }
-
-  // override @atlaskit/navigation-next styles
-  div[class$='-Outer'] {
-    div[class$='-Shadow'] {
-      background: unset;
-      border-right: 1px solid $border;
-    }
-  }
-
-  .grw-global-item-container {
-    i {
-      font-size: 1.5em;
-    }
-
-    // icon opacity
-    &:not(.active) {
-      i {
-        opacity: 0.4;
-      }
-      &:hover,
-      &:focus {
-        i {
-          opacity: 0.7;
-        }
-      }
-    }
-
-    &.active {
-      button {
-        @extend %fukidashi-for-active;
-      }
-    }
-  }
-}
-
-// Atlaskit Drawer
-.atlaskit-portal-container {
-  // override @atlaskit/navigation-next styles
-  div[class$='-Wrapper'],
-  .jyecer {
-    // Adjust to be on top of the growi subnavigation
-    z-index: $zindex-fixed + 5;
-  }
-}
-
 #page-wrapper {
   margin-top: $grw-navbar-height;
 }
 
-.grw-sidebar-header-container {
-  padding: 10px;
-
-  h3 {
-    margin-bottom: 0;
-  }
-}
-
-.grw-sidebar-content-container {
-}
-
 .grw-modal-head {
   font-size: 1em;
   border-bottom: 1px solid $grw-line-gray;

src/client/styles/scss/_sidebar.scss

@@ -0,0 +1,59 @@
+.grw-sidebar {
+  // @include media-breakpoint-down(xs) {
+  //   position: fixed;
+  // }
+
+  .ak-navigation-resize-button {
+    top: calc(50vh - 20px);
+  }
+
+  // override @atlaskit/navigation-next styles
+  div[class$='-NavigationContainer'] {
+    // Adjust to be on top of the growi subnavigation
+    z-index: $zindex-sticky + 5;
+  }
+
+  // override @atlaskit/navigation-next styles
+  div[class$='-Outer'] {
+    div[class$='-Shadow'] {
+      background: unset;
+      border-right: 1px solid $border;
+    }
+  }
+
+  .grw-global-item-container {
+    i {
+      font-size: 1.5em;
+    }
+
+    // icon opacity
+    &:not(.active) {
+      i {
+        opacity: 0.4;
+      }
+      &:hover,
+      &:focus {
+        i {
+          opacity: 0.7;
+        }
+      }
+    }
+
+    &.active {
+      button {
+        @extend %fukidashi-for-active;
+      }
+    }
+  }
+}
+
+.grw-sidebar-header-container {
+  padding: 10px;
+
+  h3 {
+    margin-bottom: 0;
+  }
+}
+
+.grw-sidebar-content-container {
+}

src/client/styles/scss/style-app.scss

@@ -50,6 +50,7 @@
 @import 'page';
 @import 'search';
 @import 'shortcuts';
+@import 'sidebar';
 @import 'subnav';
 @import 'tag';
 @import 'user';