apply sidebar styles

packages/app/src/styles/_sidebar.scss → packages/app/src/components/Sidebar.scss

@@ -1,32 +1,17 @@
-.grw-sidebar {
-  $sidebar-nav-button-height: 55px;
-
-  %fukidashi-for-active {
-    position: relative;
-
-    // speech balloon
-    &:after {
-      position: absolute;
-      right: -0.1em;
-      display: block;
-      width: 0;
-      content: '';
-      border: 9px solid transparent;
-      border-right-color: white;
-      border-left-width: 0;
-      transform: translateY(-#{$sidebar-nav-button-height / 2});
-    }
-  }
+@use '~/styles/variables' as var;
+@use '~/styles/mixins';
+@use '~/styles/bootstrap/init' as bs;
 
+.grw-sidebar {
   // sticky
   position: sticky;
-  top: $grw-navbar-border-width;
+  top: var.$grw-navbar-border-width;
 
   // set the max value that should be taken when sticky
-  height: calc(100vh - $grw-navbar-border-width);
+  height: calc(100vh - var.$grw-navbar-border-width);
 
   // override @atlaskit/navigation-next styles
-  $navbar-total-height: $grw-navbar-height + $grw-navbar-border-width;
+  $navbar-total-height: var.$grw-navbar-height + var.$grw-navbar-border-width;
   .data-layout-container {
     display: flex;
     flex-direction: row;
@@ -141,9 +126,9 @@
           }
         }
         .hitarea {
-          @extend .rounded-pill;
-
           position: absolute;
+          border-radius: bs.$rounded-pill;
+
           @include hitarea(30px);
         }
 
@@ -169,55 +154,6 @@
     }
   }
 
-  .grw-sidebar-nav {
-    height: 100vh;
-
-    .btn {
-      width: $grw-sidebar-nav-width;
-      line-height: 1em;
-      border-radius: 0;
-      box-shadow: none !important;
-
-      // icon opacity
-      &:not(.active) {
-        i {
-          opacity: 0.4;
-        }
-        &:hover,
-        &:focus {
-          i {
-            opacity: 0.7;
-          }
-        }
-      }
-    }
-
-    .grw-sidebar-nav-primary-container {
-      .btn {
-        padding: 1em;
-        i {
-          font-size: 2.3em;
-        }
-
-        &.active {
-          @extend %fukidashi-for-active;
-        }
-      }
-    }
-
-    .grw-sidebar-nav-secondary-container {
-      position: fixed;
-      bottom: 1.5rem;
-
-      .btn {
-        padding: 0.9em;
-        i {
-          font-size: 1.5em;
-        }
-      }
-    }
-  }
-
   .grw-drawer-toggler {
     display: none; // invisible in default
   }
@@ -229,14 +165,15 @@
   }
 }
 
+
 // Dock Mode
 @mixin dock() {
-  z-index: $zindex-sticky;
+  z-index: bs.$zindex-sticky;
 
   // override @atlaskit/navigation-next styles
-  $navbar-total-height: $grw-navbar-height + $grw-navbar-border-width;
+  $navbar-total-height: var.$grw-navbar-height + var.$grw-navbar-border-width;
   .data-layout-container {
-    max-height: calc(100vh - #{$grw-navbar-border-width});
+    max-height: calc(100vh - #{var.$grw-navbar-border-width});
   }
   .navigation {
     position: unset;
@@ -247,7 +184,7 @@
 
 // Drawer Mode
 @mixin drawer() {
-  z-index: $zindex-fixed + 2;
+  z-index: bs.$zindex-fixed + 2;
 
   .data-layout-container {
     position: fixed;
@@ -259,7 +196,7 @@
 
     // apply transition
     transition-property: transform;
-    @include apply-navigation-transition();
+    @include mixins.apply-navigation-transition();
   }
 
   &:not(.open) {
@@ -285,13 +222,13 @@
     position: fixed;
     right: -15px;
 
-    @include media-breakpoint-down(sm) {
+    @include bs.media-breakpoint-down(sm) {
       bottom: 15px;
       width: 42px;
       height: 42px;
       font-size: 18px;
     }
-    @include media-breakpoint-up(md) {
+    @include bs.media-breakpoint-up(md) {
       top: 72px;
       width: 50px;
       height: 50px;
@@ -303,10 +240,10 @@
 }
 
 .grw-sidebar {
-  @include media-breakpoint-down(sm) {
+  @include bs.media-breakpoint-down(sm) {
     @include drawer();
   }
-  @include media-breakpoint-up(md) {
+  @include bs.media-breakpoint-up(md) {
     &.grw-sidebar-drawer {
       @include drawer();
     }
@@ -317,18 +254,5 @@
 }
 
 .grw-sidebar-backdrop.modal-backdrop {
-  z-index: $zindex-fixed + 1;
-}
-
-// style to apply when displaying search page
-.growi.on-search {
-  // set sidebar height shown in search page
-  $search-page-sidebar-height: calc(100vh - ($grw-navbar-height + $grw-navbar-border-width));
-
-  .grw-sidebar {
-    height: $search-page-sidebar-height;
-    .data-layout-container {
-      height: 100%;
-    }
-  }
+  z-index: bs.$zindex-fixed + 1;
 }

packages/app/src/components/Sidebar.tsx

@@ -18,6 +18,8 @@ import SidebarContents from './Sidebar/SidebarContents';
 import SidebarNav from './Sidebar/SidebarNav';
 import { StickyStretchableScroller } from './StickyStretchableScroller';
 
+import './Sidebar.scss';
+
 const sidebarMinWidth = 240;
 const sidebarMinimizeWidth = 20;
 const sidebarFixedWidthInDrawerMode = 320;

packages/app/src/components/Sidebar/SidebarNav.scss

@@ -0,0 +1,69 @@
+@use '~/styles/variables' as var;
+
+.grw-sidebar-nav {
+  $sidebar-nav-button-height: 55px;
+
+  %fukidashi-for-active {
+    position: relative;
+
+    // speech balloon
+    &:after {
+      position: absolute;
+      right: -0.1em;
+      display: block;
+      width: 0;
+      content: '';
+      border: 9px solid transparent;
+      border-right-color: white;
+      border-left-width: 0;
+      transform: translateY(-#{$sidebar-nav-button-height / 2});
+    }
+  }
+
+  height: 100vh;
+
+  .btn {
+    width: var.$grw-sidebar-nav-width;
+    line-height: 1em;
+    border-radius: 0;
+    box-shadow: none !important;
+
+    // icon opacity
+    &:not(.active) {
+      i {
+        opacity: 0.4;
+      }
+      &:hover,
+      &:focus {
+        i {
+          opacity: 0.7;
+        }
+      }
+    }
+  }
+
+  .grw-sidebar-nav-primary-container {
+    .btn {
+      padding: 1em;
+      i {
+        font-size: 2.3em;
+      }
+
+      &.active {
+        @extend %fukidashi-for-active;
+      }
+    }
+  }
+
+  .grw-sidebar-nav-secondary-container {
+    position: fixed;
+    bottom: 1.5rem;
+
+    .btn {
+      padding: 0.9em;
+      i {
+        font-size: 1.5em;
+      }
+    }
+  }
+}

packages/app/src/components/Sidebar/SidebarNav.tsx

@@ -2,9 +2,11 @@ import React, { FC, memo, useCallback } from 'react';
 
 import { useUserUISettings } from '~/client/services/user-ui-settings';
 import { SidebarContentsType } from '~/interfaces/ui';
-import { useCurrentUser, useIsGuestUser } from '~/stores/context';
+import { useCurrentUser } from '~/stores/context';
 import { useCurrentSidebarContents } from '~/stores/ui';
 
+import './SidebarNav.scss';
+
 
 type PrimaryItemProps = {
   contents: SidebarContentsType,

packages/app/src/styles/_search.scss

@@ -249,3 +249,17 @@
     }
   }
 }
+
+
+// style to apply when displaying search page
+.growi.on-search {
+  // set sidebar height shown in search page
+  $search-page-sidebar-height: calc(100vh - ($grw-navbar-height + $grw-navbar-border-width));
+
+  .grw-sidebar {
+    height: $search-page-sidebar-height;
+    .data-layout-container {
+      height: 100%;
+    }
+  }
+}