主侧边栏组件

左侧页面的侧边栏提供了示例:

<!--begin::Sidebar-->
<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
  <!--begin::Sidebar Brand-->
  <div class="sidebar-brand">
    <!--begin::Brand Link-->
    <a href="./index.html" class="brand-link">
      <!--begin::Brand Image-->
      <img
        src="./assets/img/AdminLTELogo.png"
        alt="AdminLTE Logo"
        class="brand-image opacity-75 shadow"
      />
      <!--end::Brand Image-->
      <!--begin::Brand Text-->
      <span class="brand-text fw-light">AdminLTE 4</span>
      <!--end::Brand Text-->
    </a>
    <!--end::Brand Link-->
  </div>
  <!--end::Sidebar Brand-->
  <!--begin::Sidebar Wrapper-->
  <div class="sidebar-wrapper">
    <nav class="mt-2">
      <!--begin::Sidebar Menu-->
      <ul
        class="nav sidebar-menu flex-column"
        data-lte-toggle="treeview"
        role="menu"
        data-accordion="false"
      >
        <li class="nav-header">导航栏</li>
        <li class="nav-item">
          <a href="./index.html" class="nav-link">
            <i class="nav-icon bi bi-circle-fill"></i>
            <p>1 级</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">
            <i class="nav-icon bi bi-circle-fill"></i>
            <p>
              树形
              <i class="nav-arrow bi bi-chevron-right"></i>
            </p>
          </a>
          <ul class="nav nav-treeview">
            <li class="nav-item">
              <a href="./index.html" class="nav-link">
                <i class="nav-icon bi bi-circle"></i>
                <p>
                  2 级(徽章)
                  <span
                    class="nav-badge badge text-bg-secondary me-3"
                  >
                    6
                  </span>
                </p>
              </a>
            </li>
            <li class="nav-item">
              <a href="./index.html" class="nav-link">
                <i class="nav-icon bi bi-circle"></i>
                <p>2 级</p>
              </a>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a href="./index.html" class="nav-link active">
            <i class="nav-icon bi bi-circle-fill"></i>
            <p>1 级激活</p>
          </a>
        </li>

        <li class="nav-item menu-open">
          <a href="#" class="nav-link active">
            <i class="nav-icon bi bi-circle-fill"></i>
            <p>
              展开树形菜单
              <i class="nav-arrow bi bi-chevron-right"></i>
            </p>
          </a>
          <ul class="nav nav-treeview">
            <li class="nav-item">
              <a href="./index.html" class="nav-link active">
                <i class="nav-icon bi bi-circle"></i>
                <p>2 级激活</p>
              </a>
            </li>
            <li class="nav-item">
              <a href="./index.html" class="nav-link">
                <i class="nav-icon bi bi-circle"></i>
                <p>2 级</p>
              </a>
            </li>
          </ul>
        </li>
      </ul>
      <!--end::Sidebar Menu-->
    </nav>
  </div>
  <!--end::Sidebar Wrapper-->
</aside>
<!--end::Sidebar-->

你可以使用两个 LOGO 图像,而不是带有文字的 LOGO,只需要将标记更改为:

<div class="sidebar-brand">
  <a href="./index.html" class="brand-link logo-switch">
    <img
      src="./assets/img/AdminLTELogo.png"
      alt="AdminLTE 小 Logo"
      class="brand-image-xl logo-xs opacity-75 shadow"
    />
    <img
      src="./assets/img/AdminLTEFullLogo.png"
      alt="AdminLTE 大 Logo"
      class="brand-image-xs logo-xl opacity-75"
    />
  </a>
</div>