How do I create a Logout link (with icon) at the footer of the sidebar ? (in React)

[axilaris]

How do I create a Logout link (with icon) properly at the footer of the sidebar ? (in React). I would like it to be able to disappear the text when sidebar collapse while the icon remains.

I tried the following:

      <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.

[mrholek]

@axilaris <CNavItem> should be wrapped in <CSidebarNav>

[axilaris]

@mrholek
Thanks a lot. it manage to disappear the icon and text altogether when collapse.

but i actually want the icon to appear when collapse. what can be done ?

      <CSidebarNav>
        <CNavItem customClassName="nav-icon">
          <CNavLink to='/logout'>
            <CIcon icon={cilAccountLogout} className="me-2" />
            Logout
          </CNavLink>
        </CNavItem>
      </CSidebarNav>

another way i thought is this, but this disappear the icon but not the text. its the other way round that i want. icon should be maintain when collapse.

      <CSidebarFooter style={{ cursor: 'pointer' }}>               

            <CIcon icon={cilAccountLogout} height={20} onClick={handleLogout}/>      
            <div onClick={handleLogout} style={{fontSize: 15 }}> Logout</div>  


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

[axilaris]

@mrholek I'ved posted this issue also on stackoverflow. https://stackoverflow.com/questions/78282849/coreui-how-do-i-create-a-logout-link-with-icon-at-the-footer-csidebarfooter

Thanks.