tcs-front-tabler/components/header.html

<!-- 顶部导航栏 -->
<header class="navbar navbar-expand-md tcs-container-space-x">
  <!-- 左侧Logo -->
  <div class="d-flex align-items-center">
    <h1
      class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3"
    >
      <a href="#"> SIMANC TCS</a>
    </h1>
  </div>

  <!-- 移动端菜单按钮 -->
  <button
    class="navbar-toggler"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#navbar-menu"
  >
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="navbar-nav flex-row ms-auto">
    <!-- 主导航菜单 -->
    <div class="d-none d-md-flex me-3">
      <div class="nav flex-row">
        <div class="nav-item" id="nav-monitor">
          <a class="nav-link" href="pages/monitor.html">
            <span class="nav-link-title">监控</span>
          </a>
        </div>
        <div class="nav-item" id="nav-order">
          <a class="nav-link" href="pages/order.html">
            <span class="nav-link-title">订单</span>
          </a>
        </div>
        <div class="nav-item" id="nav-alarm">
          <a class="nav-link" href="pages/alarm.html">
            <span class="nav-link-title">告警</span>
          </a>
        </div>
        <div class="nav-item" id="nav-map">
          <a class="nav-link" href="pages/map.html">
            <span class="nav-link-title">地图</span>
          </a>
        </div>
        <div class="nav-item" id="nav-vehicle">
          <a class="nav-link" href="pages/vehicle.html">
            <span class="nav-link-title">车辆</span>
          </a>
        </div>
        <div class="nav-item" id="nav-config">
          <a class="nav-link" href="pages/config.html">
            <span class="nav-link-title">配置</span>
          </a>
        </div>
        <div class="nav-item" id="nav-user">
          <a class="nav-link" href="pages/user.html">
            <span class="nav-link-title">用户</span>
          </a>
        </div>
      </div>
    </div>

    <!-- 右侧菜单项 -->
    <!-- 分割线 -->
    <div class="nav-item d-none d-md-flex">
      <div class="vr h-50 mx-2 my-auto border-2 border-start"></div>
    </div>

    <!-- 返回 -->
    <div class="nav-item d-none d-md-flex">
      <a href="pages/dashboard.html" class="nav-link px-0">
        <i class="ti ti-layout-grid tcs-icon-lg"></i>
      </a>
    </div>

    <!-- 用户菜单 -->
    <div class="nav-item dropdown">
      <a
        href="#"
        class="nav-link d-flex lh-1 text-reset p-0"
        data-bs-toggle="dropdown"
        aria-label="打开用户菜单"
      >
        <span
          class="avatar avatar-sm"
          style="background-image: url(../assets/img/user.png)"
        ></span>
      </a>
      <div
        class="dropdown-menu dropdown-menu-end dropdown-menu-arrow tcs-user-dropdown"
      >
        <a href="#" class="dropdown-item">个人资料</a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item" id="theme-toggle">
          <span id="theme-text">深色主题</span>
        </a>
        <div class="dropdown-divider"></div>
        <a href="../index.html" class="dropdown-item">退出登录</a>
      </div>
    </div>
  </div>
</header>