WIP: locate DrawerToggler

src/client/js/components/Sidebar.jsx

@@ -12,6 +12,8 @@ import { withUnstatedContainers } from './UnstatedUtils';
 import AppContainer from '../services/AppContainer';
 import NavigationContainer from '../services/NavigationContainer';
 
+import DrawerToggler from './Navbar/DrawerToggler';
+
 import SidebarNav from './Sidebar/SidebarNav';
 import SidebarContents from './Sidebar/SidebarContents';
 import StickyStretchableScroller from './StickyStretchableScroller';
@@ -145,7 +147,8 @@ class Sidebar extends React.Component {
   );
 
   renderSidebarContents = () => {
-    const scrollTargetSelector = 'div[data-testid="ContextualNavigation"] div[role="group"]';
+    // const scrollTargetSelector = 'div[data-testid="ContextualNavigation"] div[role="group"]';
+    const scrollTargetSelector = '#grw-sidebar-content-container';
 
     return (
       <>
@@ -158,6 +161,8 @@ class Sidebar extends React.Component {
         <div id="grw-sidebar-content-container" className="grw-sidebar-content-container">
           <SidebarContents />
         </div>
+
+        <DrawerToggler iconClass="icon-arrow-left" />
       </>
     );
   };

src/client/styles/scss/_sidebar.scss

@@ -138,6 +138,10 @@
       }
     }
   }
+
+  .grw-drawer-toggler {
+    display: none; // invisible in default
+  }
 }
 
 // Drawer Mode
@@ -168,6 +172,32 @@
     div[data-testid='Navigation'] {
       transform: translateX(0);
     }
+
+    .grw-drawer-toggler {
+      display: block;
+    }
+  }
+
+  .grw-drawer-toggler {
+    position: fixed;
+    top: 15px;
+    right: -15px;
+
+    @include media-breakpoint-up(md) {
+      width: 50px;
+      height: 50px;
+      font-size: 24px;
+    }
+
+    transform: translateX(100%);
+  }
+}
+
+@mixin drawer-toggler-mobile() {
+  .grw-drawer-toggler {
+    top: unset;
+    bottom: 15px;
+    transform: translateX(100%);
   }
 }
 
@@ -178,6 +208,7 @@
 
   @include media-breakpoint-down(sm) {
     @include drawer();
+    @include drawer-toggler-mobile();
   }
 }