折叠边栏时 SVG 图标消失

Question

当我折叠边栏时，我希望隐藏文本并保持 SVG 可见。

它按预期工作，但由于某种原因，当边栏折叠时，'Projects' 的 SVG 消失（其他 svg 按预期显示）

我尝试过的：

CSS（截断）

添加了一条规则以在边栏折叠时不显示 Projects 文本（不起作用）

#sidebar.active #sidebarProjectsText{
    display: none;
}

在边栏处于活动状态或不活动状态（不工作）时向 display: block svg 添加了规则

#sidebar #projectsSvg,
#sidebar.active #projectsSvg {
    display: block;
}

期望的输出：

折叠时文本 Projects 和箭头消失
无论侧边栏处于何种状态（活动或非活动），Svg 图像始终可见

LIVE JS FIDDLE

我做错了什么？

更新 Nimeshka Srimal 的回答：

我尝试应用 Nimeshka Srimal 的建议，但是当切换侧边栏时，svg 图像变小了。它解决了我的问题，但又产生了一个新问题。

JS FIDDLE with Nimeshka Srimal answer implemented

Answer 1

这是因为你的样式应用于.sidebar-item class而你的项目菜单项没有class.

只需用 <div> 或 <span> 包裹起来，然后添加 .sidebar-item class.

<div class="card-header" id="headingOne">
  <h5 class="mb-0 d-flex flex-nowrap">
    <svg id="projectsSvg" ...></svg>
    <div class="sidebar-item">
      <button
        id="btnProjectsSidebar"
        ...
      >
        <span id="sidebarProjectsText text-nowrap">Projects</span>
        <i id="profile-chevron-down" class="bi bi-chevron-down ml-2"> </i>
      </button>
    </div>
  </h5>
</div>

您可能需要修复其他样式。

更新问题的答案：为 svg 图标提供固定宽度。

例如：

.sidebar-element svg {
  min-width: 55px;
}

折叠边栏时 SVG 图标消失

SVG icon disappears when collapsing a sidebar

html

css

svg