cz-hjjc-admin/src/styles/navbar.scss

.d-flex {
  display: flex;
}
.navbar {
  background: var(--theme-color);
  .cursor-pointer {
    cursor: pointer;
  }
  .container {
    height: 54px;
    display: flex;
    align-items: center;
    padding: 0 40px;

    .modules__toggler {
      display: none;
    }
    .navbar-brand {
      display: flex;
      align-items: center;
      margin-right: 20px;

      .navbar-brand__img {
        height: 20px;
        margin-left: 10px;
      }
      .navbar-brand__logo {
        height: 20px;
      }
    }
    .toggle-sidebar {
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      margin-right: 10px;
    }
    .navbar-module {
      flex: 1;
      overflow-y: hidden;
      position: relative;

      .navbar-module__scroll--lf {
        transform: translateY(-50%);
        position: absolute;
        top: 50%;
        left: 8px;
        z-index: 1;
      }
      .navbar-module__scroll--rt {
        transform: translateY(-50%);
        position: absolute;
        top: 50%;
        right: 8px;
      }
      .modules__toggler {
        color: #fff;
      }
      #navbar-menu {
        scroll-behavior: smooth;
        overflow-x: scroll;
        scrollbar-width: none;

        &::-webkit-scrollbar {
          background-color: transparent;
          height: 0;
          width: 0;
        }
      }
    }
    .navbar-nav {
      display: flex;
      margin-right: auto;

      .tool {
        display: flex;
        align-items: center;

        .el-color-picker {
          height: auto;
        }
        .tool-item {
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          -webkit-box-pack: center;

          .el-badge__content:not(.is-dot) {
            line-height: 14px;
            height: 14px;
            padding: 0 5px;
            border-radius: 8px;
            box-sizing: content-box;
          }
        }
        .tool-item + .tool-item {
          margin-left: 10px;
        }
      }
      .nav-info {
        display: flex;
        color: #fff;
        margin-left: 30px;

        & > div {
          padding-left: 8px;
        }
        .avatar {
          height: 32px;
          width: 32px;
          border-radius: 4px;
        }
        .department {
          color: rgb(238, 238, 238);
          font-size: 85%;
          max-width: 100px;
          margin-top: 4px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
@media (max-width: 1200px) {
  .navbar {
    .container {
      padding: 0 20px;
    }
  }
  #navbar-menu {
    .sidebar-item {
      .sub-el-icon {
        display: none;
      }
    }
  }
}
@media (max-width: 992px) {
  .navbar {
    .container {
      padding: 0 10px;
    }
  }
  #navbar-menu {
    .sidebar-item {
      .el-menu-item span,.el-submenu__title span {
        display: none;
      }
      .sub-el-icon {
        display: initial;
        margin-right: 0;
      }
    }
  }
}
@media (max-width: 768px) {
  .navbar {
    .modules__toggler {
      display: initial !important;
    }
    .navbar-brand {
      .navbar-brand__img {
        display: none;
      }
    }
    .navbar-module {
      #navbar-menu {
        display: none;
      }
    }
    .nav-info {
      & > div {
        display: none;
      }
    }
  }
}

#navbar-menu {
  .sidebar-item {
    display: inline-block;

    .el-menu-item:hover ,.el-submenu__title:hover {
      color: #fff !important;
      background-color: transparent !important;
    }
  }
  .el-menu-item, .el-submenu__title {
    height: 54px;
    line-height: 54px;
  }
  .el-submenu__icon-arrow {
    display: none;
  }
}
.navbar {
  .el-menu--horizontal {
    border-bottom: none !important;
    overflow: hidden;
    white-space: nowrap;
  }
}
#navbar-menu-mobile {
  position: absolute;
  left: 0;
  right: 0;
  box-shadow: 0 1px 6px rgba(0,0,0,.2);

  .el-menu {
    border-right: none;

    .el-menu-item, .el-submenu__title{
      height: auto;
      line-height: inherit;
      min-height: 2rem;
      display: flex;
      align-items: center;
    }
    .el-submenu.is-active .el-submenu__title {
      border-bottom: 0;
      color: var(--theme-color);
    }
  }
  .el-menu {
    background-color: #fff !important;
  }
  .sidebar-item {

    .el-menu-item ,.el-submenu__title {
      color: #333 !important;
      background-color: #fff !important;
    }
  }
}