WIP Feature / General & Users & Sidebar

client/src/components/Sidebar/SidebarContainer.js

@@ -1,11 +1,70 @@
-import React from 'react';
+import * as React from 'react';
+import { Scrollbar } from 'react-scrollbars-custom';
+
+const style = {
+  holder: {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+  },
+
+  wrapper: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+  },
+
+  content: {
+    boxSizing: 'border-box',
+  },
+
+  track: {
+    common: {
+      position: 'absolute',
+      overflow: 'hidden',
+      borderRadius: 4,
+      background: 'rgba(0,0,0,.1)',
+      userSelect: 'none',
+    },
+    x: {
+      height: 10,
+      width: 'calc(100% - 20px)',
+      bottom: 0,
+      left: 10,
+    },
+    y: {
+      width: 10,
+      height: 'calc(100% - 20px)',
+      top: 10,
+    },
+  },
+
+  thumb: {
+    common: {
+      cursor: 'pointer',
+      borderRadius: 4,
+      background: 'rgba(0,0,0,.4)',
+    },
+    x: {
+      height: '100%',
+      width: 0,
+    },
+    y: {
+      width: '100%',
+      height: 0,
+    },
+  },
+};
 
 export default function SidebarContainer(props) {
   return (
-    <div className="sidebar" id="sidebar">
-      <div class="sidebar__inner">
-        {props.children}
-      </div>
+    <div className='sidebar' id='sidebar'>
+      {/* <div className='sidebar__inner'>{props.children}</div> */}
+      <Scrollbar noDefaultStyles={true}>
+        <div className='sidebar__inner'>{props.children}</div>
+      </Scrollbar>
     </div>
-  )
-}
+  );
+}

client/src/components/Sidebar/SidebarMenu.js

@@ -32,7 +32,7 @@ export default function SidebarMenu() {
             dropdownType={item.dropdownType || 'collapse'}
             caretIconSize={15}
             onClick={handleItemClick}
-            callapseActive={!!isActive}
+            // callapseActive={!!isActive}
             className={classNames({ 'is-active': isActive })} />
       );
     });