From f62a7a20d089d2c802c6b89ba9c5bed390a2e7c3 Mon Sep 17 00:00:00 2001
From: 2betop <2betop.cn@gmail.com>
Date: Mon, 15 Jun 2020 14:50:45 +0800
Subject: [PATCH] =?UTF-8?q?AsideNav=20=E7=9A=84=20itemArrow=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E9=85=8D=E7=BD=AE=20svg?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/components/App.jsx |  6 +++++-
 scss/layout/_aside.scss     | 16 ++++++++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/examples/components/App.jsx b/examples/components/App.jsx
index 684b2cfa..aab2995a 100644
--- a/examples/components/App.jsx
+++ b/examples/components/App.jsx
@@ -1,9 +1,11 @@
 import React from 'react';
 import NotFound from '../../src/components/404';
+import NotFound from '../../src/components/404';
 import Layout from '../../src/components/Layout';
 import AsideNav from '../../src/components/AsideNav';
 import {AlertComponent, ToastComponent} from '../../src/components/index';
 import {mapTree} from '../../src/utils/helper';
+import {Icon} from '../../src/components/icons';
 import '../../src/locale/en';
 import {
   Router,
@@ -668,7 +670,9 @@ export class App extends React.PureComponent {
                 key="expand-toggle"
                 className={cx('AsideNav-itemArrow')}
                 onClick={e => toggleExpand(link, e)}
-              />
+              >
+                <Icon icon="right-arrow-bold" className="icon" />
+              </span>
             );
           }
 
diff --git a/scss/layout/_aside.scss b/scss/layout/_aside.scss
index c1dc9dc7..1c11874f 100644
--- a/scss/layout/_aside.scss
+++ b/scss/layout/_aside.scss
@@ -24,7 +24,7 @@
     line-height: px2rem(17px);
     margin-top: px2rem(2px);
 
-    &::before {
+    &:empty:before {
       content: '';
       display: inline-block;
       transform-origin: center;
@@ -36,10 +36,22 @@
       background-repeat: no-repeat;
     }
 
-    .#{$ns}AsideNav-item.is-open > a > &::before {
+    .#{$ns}AsideNav-item.is-open > a > &:empty:before {
       transform: rotate(90deg);
       color: $Layout-asideLink-onActive-arrowColor;
     }
+
+    > svg {
+      color: $Layout-asideLink-color;
+      width: px2rem(10px);
+      height: px2rem(10px);
+      transform-origin: center;
+      transition: transform 0.2s ease;
+    }
+
+    .#{$ns}AsideNav-item.is-open > a > & > svg {
+      transform: rotate(90deg);
+    }
   }
 
   &-itemBadge {