feat: added internal CScrollbar component allowing menu animation

Author: woothu

src/CScrollbar.js

@@ -0,0 +1,71 @@
+import React, { useState, createRef, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import PerfectScrollbar from 'perfect-scrollbar'
+import 'perfect-scrollbar/css/perfect-scrollbar.css'
+
+//component - CoreUI / CScrollbar
+const CScrollbar = props => {
+
+  const {
+    tag: Tag,
+    className,
+    //
+    innerRef,
+    settings,
+    switcher,
+    ...attributes
+  } = props
+
+  const [instance, setInstance] = useState()
+  const ref = createRef()
+  innerRef && innerRef(ref)
+
+  useEffect(() => {
+    switcher ? init() : uninit()
+  }, [switcher])
+
+  useEffect(() => uninit(), [])
+
+  const init = () => {
+    if (!instance) {
+      createPerfectScrollbar()
+    }
+  }
+
+  const createPerfectScrollbar = () => {
+    setInstance(new PerfectScrollbar(ref.current, settings))
+  }
+
+  const uninit = () => {
+    if (instance) {
+      instance.destroy()
+      setInstance(null)
+    }
+  }
+
+  // render
+  return (
+    <Tag 
+      className={classNames(className)} 
+      style={{ position: 'relative' }} 
+      {...attributes} 
+      ref={ref}
+    />
+  )
+}
+
+CScrollbar.propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  className: PropTypes.string,
+  //
+  settings: PropTypes.object,
+  switcher: PropTypes.bool,
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string])
+};
+
+CScrollbar.defaultProps = {
+  tag: 'div'
+};
+
+export default CScrollbar

src/CSidebarNav.js

@@ -1,11 +1,11 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import PerfectScrollbar from 'react-perfect-scrollbar'
+import CScrollbar from './CScrollbar'
 import 'react-perfect-scrollbar/dist/css/styles.css'
 import { Context } from './CSidebar'
-//component - CoreUI / CSidebarNav
 
+//component - CoreUI / CSidebarNav
 const CSidebarNav = props => {
 
   const {
@@ -22,17 +22,14 @@ const CSidebarNav = props => {
   //state
 
   const isRtl = getComputedStyle(document.querySelector('html')).direction === 'rtl'
-  return !scrollbarExist ?
-    <ul className={navClasses} {...attributes} ref={innerRef}>
-      {props.children}
-    </ul> : 
-    <PerfectScrollbar 
-      options={{ suppressScrollX: !isRtl }} 
-      className={navClasses} 
-      ref={innerRef} 
-      component="ul" 
-      {...attributes}
-    />
+  return <CScrollbar
+    settings={{ suppressScrollX: !isRtl }} 
+    className={navClasses} 
+    innerRef={innerRef}
+    switcher={scrollbarExist}
+    tag="ul" 
+    {...attributes}
+  />
 }
 
 CSidebarNav.propTypes = {