From fca24dca65f3fe1122f29c6f466371e45ad6851d Mon Sep 17 00:00:00 2001
From: Michael An <2331806369@qq.com>
Date: Thu, 16 May 2024 09:40:55 +0800
Subject: [PATCH] change main-side-nav icon

---
 frontend/src/components/main-side-nav.js |  4 ++--
 media/css/seahub_react.css               | 15 +++++++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/main-side-nav.js b/frontend/src/components/main-side-nav.js
index 46f156668e..158b560d8f 100644
--- a/frontend/src/components/main-side-nav.js
+++ b/frontend/src/components/main-side-nav.js
@@ -189,7 +189,7 @@ class MainSideNav extends React.Component {
               <Link to={ siteRoot + 'libraries/' } className={`nav-link ellipsis ${this.getActiveClass('libraries')}`} title={gettext('Files')} onClick={(e) => this.tabItemClick(e, 'libraries')}>
                 <span className="sf3-font-files sf3-font" aria-hidden="true"></span>
                 <span className="nav-text">{gettext('Files')}</span>
-                <span className={`toggle-icon fas ${filesNavUnfolded ? 'fa-caret-down':'fa-caret-left'} ${this.getActiveClass('libraries') ? 'text-white' : ''}`} aria-hidden="true" onClick={this.toggleFilesNav}></span>
+                <span className={`toggle-icon sf3-font sf3-font-drop-down ${filesNavUnfolded ? '' : 'icon-rotate-90'} ${this.getActiveClass('libraries') ? 'text-white' : ''}`} aria-hidden="true" onClick={this.toggleFilesNav}></span>
               </Link>
               <ul id="files-sub-nav" className={`nav sub-nav nav-pills flex-column ${filesNavUnfolded ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={{height: filesNavUnfolded ? this.filesNavHeight : 0}}>
                 {canAddRepo && (
@@ -250,7 +250,7 @@ class MainSideNav extends React.Component {
               <a className="nav-link ellipsis" title={gettext('Share Admin')} onClick={this.shExtend}>
                 <span className="sf3-font-wrench sf3-font" aria-hidden="true"></span>
                 <span className="nav-text">{gettext('Share Admin')}</span>
-                <span className={`toggle-icon fas ${this.state.sharedExtended ? 'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>
+                <span className={`toggle-icon sf3-font sf3-font-drop-down ${this.state.sharedExtended ? '' : 'icon-rotate-90'}`} aria-hidden="true"></span>
               </a>
               {this.renderSharedAdmin()}
             </li>
diff --git a/media/css/seahub_react.css b/media/css/seahub_react.css
index 66447a0c3a..65190fb411 100644
--- a/media/css/seahub_react.css
+++ b/media/css/seahub_react.css
@@ -708,6 +708,21 @@ a, a:hover { color: #ec8000; }
     margin-left: auto;
 }
 
+.side-nav-con .toggle-icon.sf3-font-drop-down {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    font-size: 12px;
+    width: 24px;
+    height: 24px;
+    transform: scale(.8);
+}
+
+.side-nav-con .toggle-icon.sf3-font-drop-down.icon-rotate-90 {
+    transform: rotate(90deg) scale(.8);
+}
+
 #draft-num {
     font-size: 75%;
     color: #5B5F65;