@yueglobal/ui 1.0.2 → 1.0.3

package/README.md

@@ -25,20 +25,22 @@ import {
 
 ### 属性
 
-| 属性              | 说明                                | 类型                                        | 默认值 |
-| ----------------- | ----------------------------------- | ------------------------------------------- | ------ |
-| `width`           | 内容宽度                            | `string` \| `number`                        | `80%`  |
-| `backgroundColor` | 头部背景色                          | `string`                                    | `#fff` |
-| `activeLabel`     | 当前选中的一级菜单项的标题          | `string`                                    |        |
-| `rightContent`    | 顶部右侧的登录/用户信息按钮         | `ReactNode`                                 |        |
-| `menuItems`       | 各业务系统的菜单                    | `YueMenuItem`[]                             |        |
-| `pageTitle`       | 缺值时从一级菜单取值                | `string`                                    |        |
-| `pageIcon`        | 页面图标                            | `ReactNode`                                 |        |
-| `breadcrumbs`     | 自定义面包屑数据                    | `YueBreadcrumb`[]                           |        |
-| `routes`          | 路由数据,用于自动生成面包屑         | any                                         |        |
-| `pathname`        | 当前的路由                          | `string`                                    |        |
-| `onRouteChange`   | 点击菜单/面包屑时触发的路由切换事件 | `({ key: string; label?: string }) => void` |        |
-| `onLocaleChange`  | 切换语言时的回调事件                | `({locale: string}) => void`                |        |
+| 属性              | 说明                                | 类型                                        | 默认值     |
+| ----------------- | ----------------------------------- | ------------------------------------------- | ---------- |
+| `width`           | 内容宽度                            | `string` \| `number`                        | `80%`      |
+| `backgroundColor` | 头部背景色                          | `string`                                    | `#fff`     |
+| `activeLabel`     | 当前选中的一级菜单项的标题          | `string`                                    |            |
+| `rightContent`    | 顶部右侧的登录/用户信息按钮         | `ReactNode`                                 |            |
+| `onLocaleChange`  | 切换语言时的回调事件                | `({locale: string}) => void`                |            |
+|                   | `以下二级导航栏的配置`              |                                             |            |
+| `menuItems`       | 各业务系统的菜单                    | `YueMenuItem`[]                             |            |
+| `pageTitle`       | 缺值时从一级菜单匹配值              | `string`                                    |            |
+| `pageIcon`        | 页面图标                            | `ReactNode`                                 |            |
+| `breadcrumbs`     | 自定义面包屑数据                    | `YueBreadcrumb`[]                           |            |
+| `routes`          | 路由数据,用于自动生成面包屑         | any                                         |            |
+| `pathname`        | 当前的路由                          | `string`                                    |            |
+| `subMenuLayout`   | 二级导航栏的菜单弹出层布局          | `vertical` \| `horizontal`                  | `vertical` |
+| `onRouteChange`   | 点击菜单/面包屑时触发的路由切换事件 | `({ key: string; label?: string }) => void` |            |
 
 - 业务子系统：`pageTitle`或`pageIcon`缺省时会根据`url`自动从一级菜单匹配值
 

package/components/svg-icon/computer.svg

@@ -0,0 +1,9 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     width="1em" height="1em">
+  <path
+    d="M890.56 110.69666665H133.33333333c-35.2 0-64.10666667 28.8-64.10666666 64.10666668v518.4c0 35.2 28.8 64.10666667 64.10666666 64.10666667h346.56s0.10666667 0 0.10666667 0.10666666v139.84s0 0.10666667-0.10666667 0.10666666H170.66666667c-17.49333333 0-32.21333333 13.65333333-32.74666667 31.14666668-0.42666667 18.02666667 14.08 32.85333333 32 32.85333333H853.33333333c17.49333333 0 32.21333333-13.65333333 32.74666667-31.14666667 0.42666667-18.02666667-14.08-32.85333333-32-32.85333334H544s-0.10666667 0-0.10666667-0.10666666V757.20333333s0-0.10666667 0.10666667-0.10666667h346.56c35.2 0 64.10666667-28.8 64.10666667-64.10666666v-518.4c0-35.09333333-28.90666667-63.89333333-64.10666667-63.89333335z m0.10666667 582.29333335l-0.21333334 0.21333333H133.44l-0.21333333-0.21333333V174.91l0.21333333-0.21333335h757.01333333l0.21333334 0.21333335v518.08z"
+    ></path>
+  <path
+    d="M266.45333333 251.49666666h-33.70666666c-11.73333333 0-21.33333333 9.6-21.33333334 21.33333334v33.70666665c0 11.73333333 9.6 21.33333333 21.33333334 21.33333335h33.70666666c11.73333333 0 21.33333333-9.6 21.33333334-21.33333335v-33.70666665c0-11.73333333-9.6-21.33333333-21.33333334-21.33333334zM363.52 251.49666666h-33.70666667c-11.73333333 0-21.33333333 9.6-21.33333333 21.33333334v33.70666665c0 11.73333333 9.6 21.33333333 21.33333333 21.33333335h33.70666667c11.73333333 0 21.33333333-9.6 21.33333333-21.33333335v-33.70666665c0-11.73333333-9.6-21.33333333-21.33333333-21.33333334zM460.69333333 251.49666666h-33.70666666c-11.73333333 0-21.33333333 9.6-21.33333334 21.33333334v33.70666665c0 11.73333333 9.6 21.33333333 21.33333334 21.33333335h33.70666666c11.73333333 0 21.33333333-9.6 21.33333334-21.33333335v-33.70666665c0-11.73333333-9.6-21.33333333-21.33333334-21.33333334z"
+    ></path>
+</svg>

package/components/svg-icon/index.d.ts

@@ -6,6 +6,7 @@ export interface SvgIconProps {
     onClick?: (e?: any) => void;
     [key: string]: any;
 }
+export declare const ComputerIcon: FC<SvgIconProps>;
 export declare const DeclarationIcon: FC<SvgIconProps>;
 export declare const ExpoIcon: FC<SvgIconProps>;
 export declare const HwcIcon: FC<SvgIconProps>;

package/components/svg-icon/index.js

@@ -9,6 +9,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { memo } from 'react';
+import { ReactComponent as Computer } from "./computer.svg";
 import { ReactComponent as Declaration } from "./declaration.svg";
 import { ReactComponent as Expo } from "./expo.svg";
 import { ReactComponent as Home } from "./home.svg";
@@ -34,6 +35,11 @@ var SvgIcon = /*#__PURE__*/memo(function (_ref) {
   }), children);
 });
 
+// 电脑（默认图标）
+export var ComputerIcon = /*#__PURE__*/memo(function (props) {
+  return /*#__PURE__*/React.createElement(SvgIcon, props, /*#__PURE__*/React.createElement(Computer, null));
+});
+
 // 通关申报
 export var DeclarationIcon = /*#__PURE__*/memo(function (props) {
   return /*#__PURE__*/React.createElement(SvgIcon, props, /*#__PURE__*/React.createElement(Declaration, null));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yueglobal/ui",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "粤链全球 - react组件库",
   "license": "MIT",
   "module": "index.js",

package/yue-page-header/breadcrumb/index.js

@@ -88,9 +88,9 @@ var Index = function Index(_ref) {
 
     // 其他是模块内部路由跳转
     var isLast = (currentRoute === null || currentRoute === void 0 ? void 0 : currentRoute.path) === ((_items = items[items.length - 1]) === null || _items === void 0 ? void 0 : _items.path);
-    var fullPath = newPaths.join('/');
-    if (!fullPath.startsWith('/')) {
-      fullPath = '/' + fullPath;
+    var currentPath = newPaths[newPaths.length - 1];
+    if (!currentPath.startsWith('/')) {
+      currentPath = '/' + currentPath;
     }
     return isLast ? /*#__PURE__*/React.createElement(Text, {
       ellipsis: {
@@ -99,7 +99,7 @@ var Index = function Index(_ref) {
     }, title) : /*#__PURE__*/React.createElement("a", {
       onClick: function onClick() {
         onRouteChange === null || onRouteChange === void 0 || onRouteChange({
-          key: fullPath,
+          key: currentPath,
           label: title
         });
       }

package/yue-page-header/first-menus/index.js

@@ -24,7 +24,7 @@ var Index = function Index(_ref) {
     menuList = _useState4[0],
     setMenuList = _useState4[1];
   useEffect(function () {
-    if (!(selectedKeys !== null && selectedKeys !== void 0 && selectedKeys.length) && !!(menuList !== null && menuList !== void 0 && menuList.length) && moduleData) {
+    if (!!(menuList !== null && menuList !== void 0 && menuList.length) && moduleData) {
       var key = moduleData.key;
       if (!key) {
         var _menuList$find;
@@ -36,7 +36,7 @@ var Index = function Index(_ref) {
         setSelectedKeys([key]);
       }
     }
-  }, [selectedKeys, menuList, moduleData]);
+  }, [menuList, moduleData]);
 
   // 获取新闻资讯的类目
   var fetchNewsData = /*#__PURE__*/function () {
@@ -69,7 +69,6 @@ var Index = function Index(_ref) {
               return {
                 key: "".concat(mainHost, "/consultation/content-list?classId=").concat(d.id, "&title=").concat(d.className),
                 label: d.className
-                // icon: <i className="yue-icon-dot" />,
               };
             }));
           case 8:

package/yue-page-header/index.d.ts

@@ -19,6 +19,7 @@ export interface YuePageHeaderProps {
     onLocaleChange?: (value: {
         locale: string;
     }) => void;
+    subMenuLayout?: 'vertical' | 'horizontal';
 }
 declare const _default: React.NamedExoticComponent<YuePageHeaderProps>;
 export default _default;

package/yue-page-header/index.js

@@ -32,23 +32,28 @@ var Index = function Index(_ref) {
     var icon = pageIcon;
     var key;
     var firstMenuList = flattenMenuList(true);
-    var _window$location = window.location,
-      origin = _window$location.origin,
-      pathname = _window$location.pathname;
-    var url = origin + pathname;
-    var current = firstMenuList.find(function (m) {
-      return !!(m !== null && m !== void 0 && m.key) && url.startsWith("".concat(m.key));
-    });
+    var current;
+    // 先判断activeLabel
+    if (activeLabel) {
+      current = firstMenuList.find(function (m) {
+        return (m === null || m === void 0 ? void 0 : m.label) === activeLabel;
+      });
+    }
+    // 再判断pageTitle
+    if (!current && pageTitle) {
+      current = firstMenuList.find(function (m) {
+        return (m === null || m === void 0 ? void 0 : m.label) === pageTitle;
+      });
+    }
+    // 最后从url匹配
     if (!current) {
-      if (activeLabel) {
-        current = firstMenuList.find(function (m) {
-          return (m === null || m === void 0 ? void 0 : m.label) === activeLabel;
-        });
-      } else if (pageTitle) {
-        current = firstMenuList.find(function (m) {
-          return (m === null || m === void 0 ? void 0 : m.label) === pageTitle;
-        });
-      }
+      var _window$location = window.location,
+        origin = _window$location.origin,
+        pathname = _window$location.pathname;
+      var url = origin + pathname;
+      current = firstMenuList.find(function (m) {
+        return !!(m !== null && m !== void 0 && m.key) && url.startsWith("".concat(m.key));
+      });
     }
     if (current) {
       if (!title) {

package/yue-page-header/second-menus/index.js

@@ -4,8 +4,9 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { ComputerIcon } from "../../components/svg-icon";
 import { ConfigProvider, Menu } from 'antd';
-import React, { memo, useEffect, useRef, useState } from 'react';
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
 import Breadcrumb from "../breadcrumb";
 import { flattenTreeList, setSubMenuPopupStyle } from "../helper";
 import "./index.less";
@@ -16,12 +17,21 @@ var Index = function Index(_ref) {
     menuItems = _ref.menuItems,
     pathname = _ref.pathname,
     moduleData = _ref.moduleData,
-    onRouteChange = _ref.onRouteChange;
+    onRouteChange = _ref.onRouteChange,
+    subMenuLayout = _ref.subMenuLayout;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     selectedKeys = _useState2[0],
     setSelectedKeys = _useState2[1];
   var menuRef = useRef(null);
+
+  // 弹出层的布局，默认是 vertical
+  var popupLayout = useMemo(function () {
+    if (subMenuLayout === 'vertical' || subMenuLayout === 'horizontal') {
+      return subMenuLayout;
+    }
+    return 'vertical';
+  }, [subMenuLayout]);
   useEffect(function () {
     if (pathname) setSelectedKeys([pathname]);
   }, [pathname]);
@@ -86,9 +96,11 @@ var Index = function Index(_ref) {
     className: "yue-flex left"
   }, /*#__PURE__*/React.createElement("div", {
     className: "yue-flex module-info"
-  }, !!moduleData.icon && /*#__PURE__*/React.createElement("span", {
+  }, !!moduleData.icon ? /*#__PURE__*/React.createElement("span", {
+    className: "module-icon"
+  }, moduleData.icon) : !!moduleData.title && /*#__PURE__*/React.createElement("span", {
     className: "module-icon"
-  }, moduleData.icon), !!moduleData.title && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(ComputerIcon, null)), !!moduleData.title && /*#__PURE__*/React.createElement("div", {
     className: "module-title"
   }, moduleData.title)), /*#__PURE__*/React.createElement("div", {
     className: "menus"
@@ -96,11 +108,11 @@ var Index = function Index(_ref) {
     ref: menuRef,
     items: menuItems,
     mode: "horizontal",
-    rootClassName: "yue-second-menu-bar",
+    rootClassName: ['yue-second-menu-bar', "yue-second-menu-".concat(popupLayout)].join(' '),
     onSelect: onMenuClick,
     selectedKeys: selectedKeys,
     onOpenChange: function onOpenChange(val) {
-      if (!!(val !== null && val !== void 0 && val.length)) {
+      if (!!(val !== null && val !== void 0 && val.length) && popupLayout === 'horizontal') {
         onSubMenuOpen(val[0]);
       }
     }

package/yue-page-header/second-menus/index.less

@@ -1,160 +1,227 @@
-.yue-page-header-second-menu {
-  height: 60px;
-  background: linear-gradient(90deg, #17f1a1, #1a4bff);
-  opacity: 1;
-  transition: opacity 0.2s ease-in-out;
-
-  &.hidden {
-    //opacity: 0;
-  }
-
-  .wrapper {
-    margin: 0 auto;
-    justify-content: space-between;
-    height: 100%;
-    color: #fff;
-    max-width: 98%;
-  }
-
-  .left {
-    gap: 8px;
-    height: 100%;
-  }
-
-  .module-info {
-    gap: 14px;
-    margin-right: 10px;
-    flex-shrink: 0;
-  }
-
-  .module-icon {
-    font-size: 27px;
-    line-height: 0;
-  }
-
-  .module-title {
-    font-size: 24px;
-    font-weight: bold;
-    min-width: 147px;
-    max-width: 300px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .vr {
-    width: 1px;
-    height: 28px;
-    background-color: rgba(255, 255, 255, 85%);
-    flex-shrink: 0;
-  }
-
-  .menus {
-    //max-width: 82%;
-    height: 100%;
-    padding-block: 1px;
-    flex: 1 1 0;
-    min-width: 0;
-    padding-right: 30px;
-  }
-}
-
-.yue-second-menu-bar {
-  &.ant-menu-root {
-    background-color: transparent;
-    font-size: 18px;
-    height: 100%;
-    border-bottom: none;
-    gap: 4px;
-
-    & > li {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .ant-menu-submenu-title {
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .ant-menu-title-content {
-      height: 34px;
-      line-height: 32px;
-      border-radius: 16px;
-      padding-inline: 16px;
-      min-width: 80px;
-      text-align: center;
-    }
-
-    .ant-menu-submenu-active,
-    .ant-menu-item-active {
-      .ant-menu-title-content {
-        background-color: rgba(255, 255, 255, 20%);
-      }
-    }
-
-    .ant-menu-submenu-selected,
-    .ant-menu-item-selected {
-      .ant-menu-title-content {
-        background-color: #fff;
-      }
-    }
-  }
-
-  &.ant-menu-submenu-popup {
-    left: 0 !important;
-    padding: 0;
-    font-size: 18px;
-    //background-color: rgba(0, 0, 0, 45%);
-    background-color: rgba(4, 41, 131, 0.65);
-    border-radius: 0;
-    width: 100%;
-
-    .ant-menu-sub {
-      display: flex;
-      justify-content: center;
-      background-color: transparent;
-      border-radius: 0;
-      box-shadow: none;
-    }
-
-    .ant-menu-item {
-      width: max-content;
-      flex: unset;
-      color: #fff;
-      margin: 0;
-      border-radius: 0;
-      height: 60px;
-      line-height: 30px;
-      display: flex;
-      align-items: center;
-      padding-inline: 25px 18px;
-      flex-shrink: 0;
-      position: relative;
-
-      &::before {
-        content: '';
-        position: absolute;
-        left: 10px;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 4px;
-        height: 4px;
-        border-radius: 50%;
-        background-color: rgba(255, 255, 255, 85%);
-      }
-    }
-
-    .ant-menu-item-active,
-    .ant-menu-item-selected {
-      background: linear-gradient(90deg, #17f1a1, #1a4bff);
-    }
-
-    /*.ant-menu-item-selected {
-      background-color: rgba(0, 0, 0, 40%);
-    }*/
-  }
-}
+.yue-page-header-second-menu {
+  height: 60px;
+  background: linear-gradient(90deg, #17f1a1, #1a4bff);
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+
+  &.hidden {
+    //opacity: 0;
+  }
+
+  .wrapper {
+    margin: 0 auto;
+    justify-content: space-between;
+    height: 100%;
+    color: #fff;
+    max-width: 98%;
+  }
+
+  .left {
+    gap: 8px;
+    height: 100%;
+  }
+
+  .module-info {
+    gap: 14px;
+    margin-right: 10px;
+    flex-shrink: 0;
+  }
+
+  .module-icon {
+    font-size: 27px;
+    line-height: 0;
+  }
+
+  .module-title {
+    font-size: 24px;
+    font-weight: bold;
+    min-width: 147px;
+    max-width: 300px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .vr {
+    width: 1px;
+    height: 28px;
+    background-color: rgba(255, 255, 255, 85%);
+    flex-shrink: 0;
+  }
+
+  .menus {
+    //max-width: 82%;
+    height: 100%;
+    padding-block: 1px;
+    flex: 1 1 0;
+    min-width: 0;
+    padding-right: 30px;
+  }
+}
+
+.yue-second-menu-bar {
+  &.ant-menu-root {
+    background-color: transparent;
+    font-size: 18px;
+    height: 100%;
+    border-bottom: none;
+    gap: 4px;
+
+    & > li {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ant-menu-submenu-title {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ant-menu-title-content {
+      height: 34px;
+      line-height: 32px;
+      border-radius: 16px;
+      padding-inline: 16px;
+      min-width: 80px;
+      text-align: center;
+    }
+
+    .ant-menu-submenu-active,
+    .ant-menu-item-active {
+      .ant-menu-title-content {
+        background-color: rgba(255, 255, 255, 20%);
+      }
+    }
+
+    .ant-menu-submenu-selected,
+    .ant-menu-item-selected {
+      .ant-menu-title-content {
+        background-color: #fff;
+      }
+    }
+  }
+
+  &.ant-menu-submenu-popup {
+    // 横向菜单的样式
+    &.yue-second-menu-horizontal {
+      left: 0 !important;
+      padding: 0;
+      font-size: 18px;
+      //background-color: rgba(0, 0, 0, 45%);
+      background-color: rgba(4, 41, 131, 0.65);
+      border-radius: 0;
+      width: 100%;
+
+      .ant-menu-sub {
+        display: flex;
+        justify-content: center;
+        background-color: transparent;
+        border-radius: 0;
+        box-shadow: none;
+      }
+
+      .ant-menu-item {
+        width: max-content;
+        flex: unset;
+        color: #fff;
+        margin: 0;
+        border-radius: 0;
+        height: 60px;
+        line-height: 30px;
+        display: flex;
+        align-items: center;
+        padding-inline: 25px 18px;
+        flex-shrink: 0;
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: 10px;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 4px;
+          height: 4px;
+          border-radius: 50%;
+          background-color: rgba(255, 255, 255, 85%);
+        }
+      }
+
+      .ant-menu-item-active,
+      .ant-menu-item-selected {
+        background: linear-gradient(90deg, #17f1a1, #1a4bff);
+      }
+    }
+
+    // 竖向菜单的样式
+    &.yue-second-menu-vertical {
+      font-size: 17px;
+
+      .ant-menu-sub {
+        background: linear-gradient(
+          135deg,
+          rgb(50, 205, 150),
+          rgb(73, 108, 236)
+        );
+        margin: -7px 0 0;
+      }
+
+      .ant-menu-item {
+        color: #fff;
+        position: relative;
+        border-radius: 0;
+        padding-inline: 28px 22px;
+        margin: 0;
+        width: max-content;
+        height: 46px;
+        line-height: 46px;
+        margin-block: 1px;
+        overflow: unset;
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: 14px;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 4px;
+          height: 4px;
+          border-radius: 50%;
+          background-color: rgba(255, 255, 255, 85%);
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          left: 50%;
+          bottom: -1px;
+          width: 80%;
+          transform: translateX(-50%);
+          height: 1px;
+          background-color: rgba(255, 255, 255, 0.25);
+          z-index: 1;
+        }
+
+        &:last-child::after {
+          content: none;
+        }
+      }
+
+      .ant-menu-item-active,
+      .ant-menu-item-selected {
+        background: linear-gradient(90deg, #06a168, #2a50dc);
+      }
+
+      .ant-menu-item-selected {
+        color: #00ffca;
+
+        &::before {
+          background-color: #00ffca;
+        }
+      }
+    }
+  }
+}