coreui - 如何在侧边栏的页脚 (CSidebarFooter) 正确创建注销链接（带图标）？ （在 React 中）折叠/展开问题

Question

在 React coreui 中，如何在侧边栏的页脚处正确创建注销链接（带图标）？ （在 React 中）我希望当侧边栏展开时，它应该有图标和文本。当侧边栏收缩时，只有图标。同样的事情我也想与 CsidebarHeader 一起使用。

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.

我尝试了以下操作（位于此处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>

但是如果你查看屏幕截图。有一个点，当侧边栏收缩时，“注销”一词不会消失。

更新（我尝试了另一种方法，没有点，但折叠并没有消失文本：

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

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

更新： 我什至试图找到一种方法来检测侧边栏何时折叠。 https://gist.github.com/axilaris/9a5f4b6a0c2b7d54edb157c3e5c9e304。但这只能检测到它何时完全崩溃。还是拿不到。

Answer 1

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

显然，CSidebarFooter 并不意味着保存链接。如果您尝试上面的代码，则注销图标会在折叠时隐藏，并且仅显示切换器图标。另外，从我的角度来看，还有一个不同的设计问题：注销不应与可折叠共享行。

CoreUI 解决此问题的方法是将每个 NavItem 保存在 CSidebarHeader 中。当侧边栏折叠时，这也会保留图标。这已经在他们的示例中进行了描述。 话虽如此，也许更好的解决方案是仅使用切换器保留页脚，并为注销创建不同的部分。另外，使用不同的图标进行切换和注销也是一个好主意：

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