Search code examples
javascriptcssreactjssidebarcore-ui

coreui - How do I create a Logout link (with icon) at the footer (CSidebarFooter) of the sidebar properly ? (in React) Collapse/Expand issue

In coreui for React, How do I create a Logout link (with icon) at the footer of the sidebar properly ? (in React) I want so that when sidebar expanded, it should have icon and text. and when side bar is contracted, only the icon. This same thing I want to also work with the CSidebarHeader as well.

https://github.com/coreui/coreui-free-react-admin-template <-- this is the template I'm using. You can easily run it and test it out.

I tried the following (location here https://github.com/coreui/coreui-free-react-admin-template/blob/main/src/components/AppSidebar.js):

  <CSidebarFooter className="border-top d-none d-lg-flex">
    
  <CNavItem customClassName="nav-icon">
    <CNavLink to='/logout'>
      <CIcon icon={cilAccountLogout} className="me-2" />
      Logout
    </CNavLink>
  </CNavItem>
  
    <CSidebarToggler
      onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
    />
  </CSidebarFooter>

But if you check out the screenshots. There is a dot and when the sidebar is contracted, the word "Logout" doesnt disappear.

UPDATE (I tried another way, no dot, but the collapse didnt disappear the text :

 <CSidebarFooter style={{ cursor: 'pointer' }}>
     
        <CIcon icon={cilAccountLogout} height={20} />
        <div style={{fontSize: 15 }}> Logout</div>
      

    <CSidebarToggler
      onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
    />        
  </CSidebarFooter>

UPDATE: I even tried to find a way to detect when the sidebar collapse. https://gist.github.com/axilaris/9a5f4b6a0c2b7d54edb157c3e5c9e304. But this will only detect when it totally collapse. still cant get it.

Solution 
  • // AppSidebar.js

    <CSidebar>

    {/* Rest of the SideBar components */}

      <AppSidebarNav items={navigation} />

      <CSidebarFooter>
        <CSidebarNav>
          <CNavItem href="#">
            <CIcon customClassName="nav-icon" icon={cilAccountLogout} />
            Logout
          </CNavItem>
        </CSidebarNav>

        <CSidebarToggler
          onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
        />
      </CSidebarFooter>
    </CSidebar>

    Apparently, the CSidebarFooter is not meant to hold links. If you try the code above, the icon for the logout is hidden on collapse, and only the toggler icon is shown. Also, there's a different design problem from my perspective: The logout shouldn't share row with the collapsible.

    How CoreUI resolves this problem is holding every NavItem inside a CSidebarHeader. This also preserves the icons when the sidebar is collapsed. This is already described in their examples.

    With that said, maybe is a better solution to left the footer with just the toggler, and create a different section for the logout. Also it would be a good idea to use different icons for the toggle and the logout:

          <AppSidebarNav items={navigation} />
      <CSidebarHeader className="border-top">
        <CSidebarNav>
          <CNavItem href="#">
            <CIcon customClassName="nav-icon" icon={cilAccountLogout} />
            Logout
          </CNavItem>
        </CSidebarNav>
      </CSidebarHeader>

      <CSidebarFooter>
        <CSidebarToggler
          onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
        />
      </CSidebarFooter>