Search code examples
reactjscore-ui

Hide and Display menu Core UI

I integrated the template Core UI in my application.

The redirection is configured on _nav.js like presented by that picture:

enter image description here

I'm asking if it's possible to hide or display a menu depending on such condition ?.

For Exemple: Show Public Student and Hide Manage Convention depending on a condition.

enter image description here

The menu is defined on _nav.js

export default [
  {
    _tag: 'CSidebarNavTitle',
    _children: ['Menu'],
  },
  {
    _tag: 'CSidebarNavItem',
    name: 'Public Space',
    to: '/home',
  }, // ...
  {
    _tag: 'CSidebarNavItem',
    name: 'Manage Convention',
    to: '/manageConvention',
  }  // ...
]

Then, this Array is called on TheSidebar.js

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { CCreateElement, CSidebar, CSidebarBrand, CSidebarNav, CSidebarNavDivider, CSidebarNavTitle, CSidebarMinimizer, CSidebarNavDropdown, CSidebarNavItem } from '@coreui/react'

import CIcon from '@coreui/icons-react'

// sidebar nav config
import navigation from './_nav'

const TheSidebar = () => {
  const dispatch = useDispatch()
  const show = useSelector(state => state.sidebarShow)

  return (
    <CSidebar
      show={show}
      onShowChange={(val) => dispatch({type: 'set', sidebarShow: val })}
    >
      <CSidebarBrand className="d-md-down-none" to="/">
        <CIcon
          className="c-sidebar-brand-full"
          name="logo-negative"
          height={35}
        />
        <CIcon
          className="c-sidebar-brand-minimized"
          name="sygnet"
          height={35}
        />
      </CSidebarBrand>
      <CSidebarNav>

        <CCreateElement
          items={navigation}
          components={{
            CSidebarNavDivider,
            CSidebarNavDropdown,
            CSidebarNavItem,
            CSidebarNavTitle
          }}
        />
      </CSidebarNav>
      <CSidebarMinimizer className="c-d-md-down-none"/>
    </CSidebar>
  )
}

export default React.memo(TheSidebar)

Any suggestion will be appreciated.Big Thanks.

Solution

  • You can use a child component class SidebarChild in TheSidebar.js to precise the condition that you want.

    Then, inject it in <CSidebar >.

    and don't forget to use the constant const SBChild = connect()(SidebarChild) to be able to call SBChild inside <CSidebar >.

    Hope To Help.