sis_zhfx/src/views/layout/Menu.vue

<template>
  <div class="menu">
    <ul class="menu-list">
      <li class="menu-item" v-for="(menu, index) of currentMenu" :key="menu" @click="click(index)" :class="{ active: activeIndex == index }" @mouseenter="subMenuShow(menu.children, index)">
        <router-link :to="menu.path">
          <el-tooltip class="item" effect="dark" :content="menu.text" placement="bottom" :show-after="500" :enterable="false" hide-after="10">
            <div class="menu-icon svg-icon" :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'">
              <SvgIcon :svgid="menu.icon"></SvgIcon>
            </div>
          </el-tooltip>
        </router-link>
        <!-- <div v-if="menu.children" class="sub-menu-item">
          <div class="menu-icon svg-icon" :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'">
            <SvgIcon :svgid="menu.icon"></SvgIcon>
          </div>
        </div> -->
      </li>
    </ul>
  </div>
  <div class="sub-menu" v-show="isShowSubMenu" @mouseleave="subMenuHide">
    <ul class="menu-list">
      <li class="menu-item" v-for="(menu, index) of subMenu" @click="subclick(index)" :key="menu" :class="{ active: subIndex == index }">
        <router-link :to="menu.path">
          <div class="menu-icon svg-icon">
            <!-- <SvgIcon :svgid="menu.icon"></SvgIcon> -->
          </div>
          <div class="sub-menu-text" :class="subIndex == index ? 'green' : 'gray'">{{ menu.text }}</div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
import SvgIcon from "@com/coms/icon/svg-icon.vue";
export default {
  components: {
    SvgIcon,
  },
  props: {},
  data() {
    return {
      currRoot: "monitor",
      menuData: [
        {
          id: "monitor",
          text: "驾驶舱",
          data: [
            // {
            //   text: '驾驶舱',
            //   icon: 'svg-lead-cockpit',
            //   path: '/monitor/home'
            // },
            {
              text: "基础矩阵",
              icon: "svg-matrix",
              path: "/monitor/lightmatrix1",
            },
            {
              text: "明细矩阵",
              icon: "svg-mx-matrix",
              path: "/monitor/lightmatrix3",
            },
            {
              text: "欠发矩阵",
              icon: "svg-qf-matrix",
              path: "/monitor/lightmatrix2",
            },
            {
              text: "光伏矩阵",
              icon: "svg-gf-matrix",
              path: "/monitor/lightmatrix",
            },
            {
              text: "状态监视",
              icon: "svg-state-watch",
              path: "/monitor/status",
            },
            {
              text: "Agc",
              icon: "svg-agc",
              path: "/monitor/agc",
            },
            {
              text: "风场",
              icon: "svg-wind-site",
              path: "/monitor/windsite/home/MHS_FDC",
            },
          ],
        },
        {
          id: "decision",
          text: "经济运行",
          data: [
            //  {
            //   text: '经济运行首页',
            //   icon: 'svg-wind-site',
            //   // path: '/monitor/sandtable'
            //    path: '/decision/pb'
            // },
            {
              text: "对标管理",
              icon: "svg-dbgl",
              path: "/decision/decision1",
              children: [
                {
                  text: "风机绩效榜",
                  icon: "svg-wind-site",
                  path: "/decision/decision1",
                },
                {
                  text: "五项损失率",
                  icon: "svg-wind-site",
                  path: "/decision/decision2",
                },
                {
                  text: "场内对标",
                  icon: "svg-wind-site",
                  path: "/decision/decision2Cndb",
                },
                {
                  text: "场际对标",
                  icon: "svg-wind-site",
                  path: "/decision/decision2Cjdb",
                },
                {
                  text: "项目对标",
                  icon: "svg-wind-site",
                  path: "/decision/decision2Xmdb",
                },
                {
                  text: "线路对标",
                  icon: "svg-wind-site",
                  path: "/decision/decision2Xldb",
                },
                {
                  text: "性能对标",
                  icon: "svg-wind-site",
                  path: "/decision/decision3",
                },
                {
                  text: "值际对标",
                  icon: "svg-wind-site",
                  path: "/decision/decision4",
                },
                {
                  text: "单机横向对比",
                  icon: "svg-matrix",
                  path: "/decision/decision3db",
                },
                {
                  text: "操作指令统计",
                  icon: "svg-matrix",
                  path: "/decision/decision4czzl",
                },
              ],
            },
            {
              text: "三率管理",
              icon: "svg-slgl",
              path: "/decision/fwjsl",
              children: [
                {
                  text: "复位及时率",
                  icon: "svg-wind-site",
                  path: "/decision/fwjsl",
                },
                {
                  text: "状态转换率",
                  icon: "svg-wind-site",
                  path: "/decision/ztzhl",
                },
                {
                  text: "消缺及时率",
                  icon: "svg-wind-site",
                  path: "/decision/xqjsl",
                },
              ],
            },
            {
              text: "排行榜",
              icon: "svg-phb",
              path: "/decision/powerRank",
              children: [
                {
                  text: "发电效率排行",
                  icon: "svg-wind-site",
                  path: "/decision/powerRank",
                },
                {
                  text: "总发电效率排行",
                  icon: "svg-wind-site",
                  path: "/decision/totalPowerRank",
                },
                {
                  text: "报警排行",
                  icon: "svg-wind-site",
                  path: "/decision/warningRank",
                },
              ],
            },
            {
              text: "专题分析",
              icon: "svg-ztfx",
              path: "/decision/ztfx",
              children: [
                {
                  text: "综合分析",
                  icon: "svg-wind-site",
                  path: "/decision/ztfx",
                },
                {
                  text: "风能利用率",
                  icon: "svg-wind-site",
                  path: "/decision/fnlyl",
                },
                {
                  text: "维护损失率",
                  icon: "svg-wind-site",
                  path: "/decision/whssl",
                },
                {
                  text: "故障损失率",
                  icon: "svg-wind-site",
                  path: "/decision/gzssl",
                },
                {
                  text: "限电损失率",
                  icon: "svg-wind-site",
                  path: "/decision/xdssl",
                },
                {
                  text: "性能损失率",
                  icon: "svg-wind-site",
                  path: "/decision/xnssl",
                },
                {
                  text: "受累损失率",
                  icon: "svg-wind-site",
                  path: "/decision/slssl",
                },
                {
                  text: "MTBF分析",
                  icon: "svg-wind-site",
                  path: "/decision/mtbf",
                },
                {
                  text: "MTTR分析",
                  icon: "svg-wind-site",
                  path: "/decision/mttr",
                },
                {
                  text: "复位分析",
                  icon: "svg-wind-site",
                  path: "/decision/zfwjsl",
                },
                {
                  text: "状态分析",
                  icon: "svg-wind-site",
                  path: "/decision/zztzhl",
                },
                {
                  text: "消缺分析",
                  icon: "svg-wind-site",
                  path: "/decision/zxqjsl",
                },
                {
                  text: "发电量分析",
                  icon: "svg-wind-site",
                  path: "/decision/zfdl",
                },
                {
                  text: "综合场用电量",
                  icon: "svg-wind-site",
                  path: "/decision/zzhcydl",
                },
              ],
            },
            {
              text: "风机分析",
              icon: "svg-fjfx",
              path: "/decision/performanceAnalysis",
              children: [
                {
                  text: "单机性能分析",
                  icon: "svg-wind-site",
                  path: "/decision/performanceAnalysis",
                },
                {
                  text: "单机月度分析",
                  icon: "svg-wind-site",
                  path: "/decision/singleAnalysis",
                },
              ],
            },
            {
              text: "气象分析",
              icon: "svg-qxfx",
              path: "/decision/fs",
            },
            {
              text: "电量预测",
              icon: "svg-dlyc",
              path: "/decision/nhycfsdl",
              children: [
                {
                  text: "预测拟合风速电量",
                  icon: "svg-wind-sitenhycfsdl",
                  path: "/decision/nhycfsdl",
                },
                {
                  text: "修正预测风速电量",
                  icon: "svg-wind-site",
                  path: "/decision/xzycfsdl",
                },
              ],
            },
            // {
            //   text: "单机分析",
            //   icon: "svg-wind-site",
            //   path: "/fgzyfx",
            //   children: [
            //     {
            //       text: "单机分析详细",
            //       icon: "svg-wind-site",
            //       path: "/new/dj1",
            //     },
            //     {
            //       text: "电量预测",
            //       icon: "svg-wind-site",
            //       path: "/new/pf1",
            //     },
            //     {
            //       text: "气象预测",
            //       icon: "svg-wind-site",
            //       path: "/new/fs",
            //     }
            //   ]
            // }
          ],
        },
        {
          id: "health",
          text: "智慧检修",
          data: [
            // {
            //   text: '沙盘',
            //   icon: 'svg-沙盘',
            //   // path: '/monitor/sandtable'
            //    path: '/health/sandtable'
            // },
            {
              text: "等级评估",
              icon: "svg-等级评估",
              path: "/health/assess/index",
            },
            {
              text: "故障诊断",
              icon: "svg-故障诊断",
              path: "//health/gzzdmalfunctionDiagnose",
              children: [
                {
                  text: "故障诊断",
                  icon: "svg-wind-site",
                  path: "/health/gzzd/malfunctionDiagnose",
                },
                {
                  text: "故障回溯",
                  icon: "svg-wind-site",
                  path: "/health/gzzd/malfunctionRecall",
                },
              ],
            },
            {
              text: "健康管理",
              icon: "svg-健康管理",
              path: "/health/frist",
              children: [
                {
                  text: "健康推荐",
                  icon: "svg-wind-site",
                  path: "/health/frist",
                },
                {
                  text: "健康首页",
                  icon: "svg-wind-site",
                  path: "/health/health2",
                },
                {
                  text: "健康总览",
                  icon: "svg-wind-site",
                  path: "/health/health6",
                },
                {
                  text: "健康矩阵",
                  icon: "svg-wind-site",
                  path: "/health/health5",
                },
                // {
                //   text: "健康列表",
                //   icon: "svg-wind-site",
                //   path: "/health/health6",
                // },
                {
                  text: "健康列表",
                  icon: "svg-wind-site",
                  path: "/health/health8",
                },
              ],
            },
            {
              text: "全生命周期",
              icon: "svg-全生命周期",
              path: "/health/allLifeManage",
            },
            {
              text: "能效分析",
              icon: "svg-能效分析",
              path: "/health/nxfx/powerCurve",
              children: [
                {
                  text: "功率曲线拟合",
                  icon: "svg-wind-site",
                  path: "/health/nxfx/powerCurve",
                },
                {
                  text: "偏航对风分析",
                  icon: "svg-wind-site",
                  path: "/health/nxfx/phdffx",
                },
                {
                  text: "切入切出分析",
                  icon: "svg-wind-site",
                  path: "/health/nxfx/cutAnalyse",
                },
                {
                  text: "曲线偏差率分析",
                  icon: "svg-wind-site",
                  path: "/health/nxfx/qxpclfx",
                },

                {
                  text: "单机饱和度",
                  icon: "svg-wind-site",
                  path: "/health/nxfx/wtSaturability",
                },
              ],
            },
            {
              text: "可靠性分析",
              icon: "svg-可靠性分析",
              path: "/health/kkxfx/alarmcenter1",
              children: [
                {
                  text: "预警分析",
                  icon: "svg-wind-site",
                  path: "/health/kkxfx/alarmcenter1",
                },
                {
                  text: "故障分析",
                  icon: "svg-wind-site",
                  path: "/health/kkxfx/alarmcenter2",
                },
                {
                  text: "预警评判分析",
                  icon: "svg-wind-site",
                  path: "/health/kkxfx/warnStatistics",
                },
                {
                  text: "故障评判分析",
                  icon: "svg-wind-site",
                  path: "/health/kkxfx/malfunctionStatistics",
                },
                {
                  text: "部件评判分析",
                  icon: "svg-wind-site",
                  path: "/health/kkxfx/bjgltjb",
                },
              ],
            },
            {
              text: "风光资源分析",
              icon: "svg-风光资源分析",
              path: "/health/fzyfx/windAnalysis",
              children: [
                {
                  text: "风资源散点",
                  icon: "svg-wind-site",
                  path: "/health/fzyfx/windAnalysis",
                },
                {
                  text: "风资源风向",
                  icon: "svg-wind-site",
                  path: "/health/fzyfx/windAnalysis/fx",
                },
              ],
            },
          ],
        },
        {
          id: "save",
          text: "安全管控",
          data: [
            {
              text: "安全管控",
              icon: "svg-安全管控",
              path: "/save/personnel",
              children: [
                {
                  text: "人员矩阵",
                  icon: "svg-wind-site",
                  path: "/save/personnel",
                },
                {
                  text: "全局监视",
                  icon: "svg-wind-site",
                  path: "/save/globalMonitor",
                },
              ],
            },
          ],
        },
        // {
        //   id: "znbb",
        //   text: "智能报表",
        //   data: [
            // {
            //   text: '报表首页',
            //   icon: 'svg-wind-site',
            //   path: '/znbb/reportPandect'
            // },// 统计分析
            // {
            //   text: "统计分析",
            //   icon: "svg-matrix",
            //   path: "/tjfx",
            //   children: [
            //     {
            //       text: "统计分析",
            //       icon: "svg-matrix",
            //       path: "/tjfx",
            //     },
            //     {
            //       text: "表底值查询",
            //       icon: "svg-matrix",
            //       path: "/bdzcx",
            //     },
            //   ],
            // },
            // {
            //   text: "报表管理",
            //   icon: "svg-matrix",
            //   path: "/bdzcx",
            //   children: [
            //     {
            //       text: "OA日报",
            //       icon: "svg-matrix",
            //       path: "/oafd",
            //     },
            //     {
            //       text: "OA日报(光伏)",
            //       icon: "svg-matrix",
            //       path: "/oagf",
            //     },
            //     {
            //       text: "新能源日报",
            //       icon: "svg-matrix",
            //       path: "/xnyrb",
            //     },
            //     {
            //       text: "国电电力MISS日报(风电)",
            //       icon: "svg-matrix",
            //       path: "/missfdrb",
            //     },
            //     {
            //       text: "国电电力MISS日报(光伏)",
            //       icon: "svg-matrix",
            //       path: "/missgfrb",
            //     },
            //     {
            //       text: "新能源风电生产月报",
            //       icon: "svg-matrix",
            //       path: "/xnyfdscyb",
            //     },
            //     {
            //       text: "麻黄山生产月报",
            //       icon: "svg-matrix",
            //       path: "/mhsscyb",
            //     },
            //     {
            //       text: "牛首山生产月报",
            //       icon: "svg-matrix",
            //       path: "/nssscyb",
            //     },
            //     {
            //       text: "青山生产月报",
            //       icon: "svg-matrix",
            //       path: "/qsscyb",
            //     },
            //     {
            //       text: "石板泉生产月报",
            //       icon: "svg-matrix",
            //       path: "/sbqscyb",
            //     },
            //     {
            //       text: "香山生产月报",
            //       icon: "svg-matrix",
            //       path: "/xsscyb",
            //     },
            //     {
            //       text: "新能源光伏生产月报",
            //       icon: "svg-matrix",
            //       path: "/xnygfscyb",
            //     },
            //     {
            //       text: "大武口生产月报",
            //       icon: "svg-matrix",
            //       path: "/dwkscyb",
            //     },
            //     {
            //       text: "平罗生产月报",
            //       icon: "svg-matrix",
            //       path: "/plscyb",
            //     },
            //     {
            //       text: "宣和生产月报",
            //       icon: "svg-matrix",
            //       path: "/xhscyb",
            //     },
            //   ],
            // },
            // {
            //   text: "自定制报表管理",
            //   icon: "svg-matrix",
            //   path: "/fdczzdy",
            //   children: [
            //     {
            //       text: "风电场站自定义",
            //       icon: "svg-matrix",
            //       path: "/fdczzdy",
            //     },
            //     {
            //       text: "风电项目自定义",
            //       icon: "svg-matrix",
            //       path: "/fdxmzdy",
            //     },
            //     {
            //       text: "光伏场站自定义",
            //       icon: "svg-matrix",
            //       path: "/gfczzdy",
            //     },
            //     {
            //       text: "光伏项目自定义",
            //       icon: "svg-matrix",
            //       path: "/gfxmzdy",
            //     },
            //   ],
            // },
        //   ],
        // },
        {
          id: "others",
          text: "其他",
          data: [
            {
              text: "统计分析",
              icon: "svg-统计分析",
              path: "/others/tjfx",
              children: [
                {
                  text: "统计分析",
                  icon: "svg-matrix",
                  path: "/others/tjfx",
                },
                {
                  text: "表底值查询",
                  icon: "svg-matrix",
                  path: "/others/bdzcx",
                },
              ],
            },
            {
              text: "报表管理",
              icon: "svg-报表管理",
              path: "/others/oafd",
              children: [
                {
                  text: "OA日报",
                  icon: "svg-matrix",
                  path: "/others/oafd",
                },
                {
                  text: "OA日报(光伏)",
                  icon: "svg-matrix",
                  path: "/others/oagf",
                },
                {
                  text: "新能源日报",
                  icon: "svg-matrix",
                  path: "/others/xnyrb",
                },
                {
                  text: "国电MIS日报(风电)",
                  icon: "svg-matrix",
                  path: "/others/missfdrb",
                },
                {
                  text: "国电MIS日报(光伏)",
                  icon: "svg-matrix",
                  path: "/others/missgfrb",
                },
                {
                  text: "新能源风电生产月报",
                  icon: "svg-matrix",
                  path: "/others/xnyfdscyb",
                },
                {
                  text: "麻黄山生产月报",
                  icon: "svg-matrix",
                  path: "/others/mhsscyb",
                },
                {
                  text: "牛首山生产月报",
                  icon: "svg-matrix",
                  path: "/others/nssscyb",
                },
                {
                  text: "青山生产月报",
                  icon: "svg-matrix",
                  path: "/others/qsscyb",
                },
                {
                  text: "石板泉生产月报",
                  icon: "svg-matrix",
                  path: "/others/sbqscyb",
                },
                {
                  text: "香山生产月报",
                  icon: "svg-matrix",
                  path: "/others/xsscyb",
                },
                {
                  text: "新能源光伏生产月报",
                  icon: "svg-matrix",
                  path: "/others/xnygfscyb",
                },
                {
                  text: "大武口生产月报",
                  icon: "svg-matrix",
                  path: "/others/dwkscyb",
                },
                {
                  text: "平罗生产月报",
                  icon: "svg-matrix",
                  path: "/others/plscyb",
                },
                {
                  text: "宣和生产月报",
                  icon: "svg-matrix",
                  path: "/others/xhscyb",
                },
              ],
            },
            {
              text: "自定制报表管理",
              icon: "svg-自定制报表管理",
              path: "/others/fdczzdy",
              children: [
                {
                  text: "风电场站自定义",
                  icon: "svg-matrix",
                  path: "/others/fdczzdy",
                },
                {
                  text: "风电项目自定义",
                  icon: "svg-matrix",
                  path: "/others/fdxmzdy",
                },
                {
                  text: "光伏场站自定义",
                  icon: "svg-matrix",
                  path: "/others/gfczzdy",
                },
                {
                  text: "光伏项目自定义",
                  icon: "svg-matrix",
                  path: "/others/gfxmzdy",
                },
              ],
            },{
              text: "原始数据查询",
              icon: "svg-报表首页",
              path: "/others/realSearch",
              children: [
                {
                  text: "测点数据查询",
                  icon: "svg-wind-site",
                  path: "/others/realSearch",
                },
                {
                  text: "测点历史数据查询",
                  icon: "svg-wind-site",
                  path: "/others/historySearch",
                },
				{
				  text: "气象历史数据",
				  icon: "svg-wind-site",
				  path: "/others/weather",
				},
				{
				  text: "数据导出",
				  icon: "svg-wind-site",
				  path: "/others/ExportExcel",
				},
              ],
            },
            {
              text: "预警记录",
              icon: "svg-预警记录",
              path: "/others/alarmCenter/alarmcenter",
              children: [
                {
                  text: "预警管理",
                  icon: "svg-wind-site",
                  path: "/others/alarmCenter/alarmcenter",
                },

                {
                  text: "停机事件管理",
                  icon: "svg-wind-site",
                  path: "/others/alarmCenter/tjsj",
                },
                {
                  text: "限电管理",
                  icon: "svg-wind-site",
                  path: "/others/alarmCenter/xdgl",
                },
                {
                  text: "升压站报警",
                  icon: "svg-wind-site",
                  path: "/others/alarmCenter/boosterAlarm",
                },
                {
                  text: "SCADA报警",
                  icon: "svg-wind-site",
                  path: "/others/alarmCenter/scadaAlarm",
                },
                {
                  text: "自定义报警",
                  icon: "svg-wind-site",
                  path: "/others/alarmCenter/customAlarm",
                },
                {
                  text: "自定义报警统计",
                  icon: "svg-wind-site",
                  path: "/others/alarmCenter/customStatistics",
                },
              ],
            },
            {
              text: "专家知识",
              icon: "svg-专家知识",
              path: "/others/knowledge/knowledge",
              children: [
                {
                  text: "故障知识列表",
                  icon: "svg-matrix",
                  path: "/others/knowledge/knowledge",
                },
                {
                  text: "安全措施知识",
                  icon: "svg-matrix",
                  path: "/others/knowledge/knowledge2",
                },
                {
                  text: "排查检修方案",
                  icon: "svg-matrix",
                  path: "/others/knowledge/knowledge6",
                },
                {
                  text: "预警知识",
                  icon: "svg-matrix",
                  path: "/others/knowledge/knowledge7",
                },
                {
                  text: "特征参数",
                  icon: "svg-matrix",
                  path: "/others/knowledge/knowledge5",
                },
                {
                  text: "风险辨识知识",
                  icon: "svg-matrix",
                  path: "/others/knowledge/knowledge3",
                },
                {
                  text: "作业指导知识",
                  icon: "svg-matrix",
                  path: "/others/knowledge/knowledge4",
                },
              ],
            },
          ],
        }
      ],
      activeIndex: 0,
      isShowSubMenu: false,
      parentIndex: null,
      subMenu: [],
      subIndex: null,
    };
  }, 
  methods: {
    click(index) {
      this.activeIndex = index;
      this.subIndex = null;
    },
    subMenuShow(children, index) {
      if (children) {
        this.isShowSubMenu = true;
        this.parentIndex = index;
      } else {
        this.isShowSubMenu = false;
        this.parentIndex = null;
      }
      this.subMenu = children;
    },
    subMenuHide() {
      this.isShowSubMenu = false;
      this.parentIndex = null;
      // this.subMenu = [];
    },
    subclick(index) {
      this.activeIndex = this.parentIndex;
      this.subIndex = index;
    },
  },
  computed: {
    currentMenu() {
      let data = this.menuData.filter((t) => {
        return t.id == this.currRoot;
      })[0].data;
      return data;
    },
  },
  watch: {
    // 监听路由
    $route: {
      handler: function (val, oldVal) {
        this.menuData.some((element, index) => {
          if (val.path.includes(element.id)) {
            this.$nextTick(() => {
              this.currRoot = element.id;
              this.$nextTick(() => {
                this.currentMenu.some((element, index) => {
                  if (val.path == element.path) {
                    this.activeIndex = index;
                  }
                });
              });
            });
            return true;
          }
        });
      },
      //深度观察监听
      deep: true,
    },
  },
};
</script>
 
<style lang="less">
.menu {
  padding-top: 1.481vh;

  .menu-list {
    margin: 0;
    padding: 0;
    list-style: none;

    .menu-item {
      padding: 1.481vh 0;
      text-align: center;

      .menu-icon {
        display: flex;
        justify-content: center;
      }

      &.active i {
        color: #05bb4c;
        transition: color 1s;
      }
    }
  }

  i {
    font-size: 2.222vh;
    color: rgba(255, 255, 255, 50%);
  }
}

.sub-menu {
  position: absolute;
  top: 0;
  left: 5.3704vh;
  width: 158px;
  height: 100%;
  padding-top: 1.481vh;
  background: fade(#192a26, 75);
  border-right: 1px solid fade(@green, 50);
  box-shadow: inset 11px 0px 20px 0px fade(#021412, 60);

  .menu-list {
    margin: 0;
    padding: 0;
    list-style: none;

    .menu-item {
      display: flex;
      text-align: center;
      line-height: 1.5;
      padding: 8px 0;
      background: #121d1c;

      a {
        display: flex;
        width: 100%;
        height: 100%;
        padding: 0 1.4815vh;
        font-size: @fontsize-s;
        text-decoration: unset;

        .menu-icon {
          display: flex;
          align-items: center;
          svg {
            width: 14px;
            height: 14px;
            use {
              fill: fade(@green, 75);
            }
          }
        }
      }

      &.active {
        background: #323e70;

        .menu-icon {
          display: flex;
          svg use {
            fill: fade(@white, 75);
          }
        }
      }

      .sub-menu-text {
        margin-left: 1.1111vh;
        color: @gray-l;
      }

      & + .menu-item {
        border-top: 1px solid fade(@darkgray, 40);
      }
    }
  }

  i {
    font-size: 2.222vh;
    color: rgba(255, 255, 255, 50%);
  }
}
</style>