@coreui/react/src/template/CSidebar.js

CoreUI React 17 Bootstrap 4 components

import React, { useState, useRef, useMemo, useEffect } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'

export const Context = React.createContext({})

//component - CoreUI / CSidebar
const CSidebar = props => {

  const {
    children,
    className,
    innerRef,
    breakpoint,
    show,
    fixed,
    unfoldable,
    minimize,
    size,
    hideOnMobileClick,
    aside,
    colorScheme,
    overlaid,
    dropdownMode,
    onShowChange,
    onMinimizeChange,
    ...attributes
  } = props

  const key = useState(Math.random().toString(36).substr(2))[0]

  const [isOpen, setIsOpen] = useState(show)
  const [openDropdown, setOpenDropdown] = useState()

  const node = useRef({}).current
  const reference = r => {
    node.current = r
    innerRef && innerRef(r)
  }

  const [minimized, setIsMinimized] = useState(minimize)
  useMemo(() => {
    setIsMinimized(minimize)
  }, [minimize])

  const toggleMinimize = () => {
    setIsMinimized(!minimized)
    onMinimizeChange && onMinimizeChange(minimized)
  }

  useMemo(() => {
    setIsOpen(show)
  }, [show])

  useEffect(() => {
    isOpen === true ? createBackdrop() : removeBackdrop()
    return () => removeBackdrop()
  }, [isOpen])

  //methods
  const sidebarCloseListener = e => {
    if (
      document.getElementById(key + 'backdrop') &&
      !node.current.contains(e.target)
    ) {
      closeSidebar()
    }
  }

  const onKeydown = e => {
    e.key.includes('Esc') && isAutoclosable() && closeSidebar()
  }

  const createBackdrop = () => {
    const backdrop = document.createElement('div')
    if (overlaid) {
      document.addEventListener('click', sidebarCloseListener)
    } else {
      backdrop.addEventListener('click', closeSidebar)
    }
    document.addEventListener('keydown', onKeydown)
    backdrop.className = 'c-sidebar-backdrop c-show'
    backdrop.id = key + 'backdrop'
    document.body.appendChild(backdrop)
  }

  const removeBackdrop = () => {
    const backdrop = document.getElementById(key + 'backdrop')
    if (backdrop) {
      document.removeEventListener('click', sidebarCloseListener)
      backdrop.removeEventListener('click', closeSidebar)
      document.removeEventListener('keydown', onKeydown)
      document.body.removeChild(backdrop)
    }
  }

  const closeSidebar = () => {
    if (typeof onShowChange === 'function') {
      onShowChange(overlaid ? false : 'responsive')
    } else {
      setIsOpen(overlaid ? false : 'responsive')
    }
  }

  const isOnMobile = () => {
    return Boolean(getComputedStyle(node.current).getPropertyValue('--is-mobile'))
  }

  const isAutoclosable = () => isOnMobile() || overlaid

  const onSidebarClick = e => {
    const sidebarItemClicked = String(e.target.className).includes('c-sidebar-nav-link')
    if (
        sidebarItemClicked && 
        hideOnMobileClick &&
        isAutoclosable()
      ) {
      closeSidebar()
    }
  }

  // render
  const haveResponsiveClass = breakpoint && isOpen === 'responsive'
  const classes = classNames(
    'c-sidebar',
    colorScheme && `c-sidebar-${colorScheme}`,
    isOpen === true && 'c-sidebar-show',
    haveResponsiveClass && `c-sidebar-${breakpoint}-show`,
    fixed && !overlaid && 'c-sidebar-fixed',
    aside && 'c-sidebar-right',
    minimized && !unfoldable && 'c-sidebar-minimized',
    minimized && unfoldable && 'c-sidebar-unfoldable',
    overlaid && 'c-sidebar-overlaid',
    size && `c-sidebar-${size}`,
    className
  )

  return (
    <Context.Provider value={{
      dropdownMode,
      scrollbarExist: !minimized || unfoldable,
      toggleMinimize,
      openDropdown, 
      setOpenDropdown
    }}>
      <div
        className={classes}
        {...attributes}
        ref={reference}
        onClick={onSidebarClick}
      >
        {children}
      </div>
    </Context.Provider>
  )

}

CSidebar.propTypes = {
  children: PropTypes.node,
  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
  fixed: PropTypes.bool,
  unfoldable: PropTypes.bool,
  overlaid: PropTypes.bool,
  breakpoint: PropTypes.oneOf([false, '', 'sm', 'md', 'lg', 'xl', 'xxl']),
  minimize: PropTypes.bool,
  show: PropTypes.oneOf(['', true, false, 'responsive']),
  size: PropTypes.oneOf(['', 'sm', 'lg', 'xl']),
  hideOnMobileClick: PropTypes.bool,
  aside: PropTypes.bool,
  colorScheme: PropTypes.string,
  dropdownMode: PropTypes.oneOf([
    '', 'openActive', 'close', 'closeInactive', 'noAction'
  ]),
  onShowChange: PropTypes.func,
  onMinimizeChange: PropTypes.func
}

CSidebar.defaultProps = {
  fixed: true,
  breakpoint: 'lg',
  show: 'responsive',
  hideOnMobileClick: true,
  colorScheme: 'dark',
}

export default CSidebar