src/assets/css/components/common/sidebar.scss

@@ -27,6 +27,7 @@
       font-size: constants.$SIZE_ICON_SM;
       border-radius: 8px;
       cursor: pointer;
+
       span {
         transform: rotateZ(180deg);
         transition: all .3s;
@@ -61,9 +62,10 @@
     ul {
       > li, > div > li {
         padding: 2px 14px;
+
         &.item {
           position: relative;
-          font-size: 1.4em;
+          font-size: 1rem;
 
           > .menu-bt {
             border-radius: 8px;
@@ -96,6 +98,9 @@
               .text {
                 flex: 1;
                 padding-left: 8px;
+                width: 0;
+                overflow: hidden;
+                text-overflow: ellipsis;
               }
 
               &.active {
@@ -113,7 +118,7 @@
           .submenu {
             visibility: hidden;
             position: fixed;
-            padding-left: 20px;
+            padding-left: 10px;
             z-index: 10000;
             animation: 0.1s ease forwards;
             @include mixins.unique-keyframes {
@@ -134,11 +139,13 @@
               padding: 10px 10px;
               background-color: constants.$origin-color;
               border-radius: 8px;
+              box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.1);
 
               .item {
                 border-radius: 8px;
                 white-space: nowrap;
                 overflow: hidden;
+                padding: 0;
 
                 a {
                   display: block;
@@ -278,6 +285,7 @@
           transition: all .3s;
         }
       }
+
       .text {
         display: none;
       }
@@ -299,6 +307,7 @@
 
     .footer {
       position: relative;
+
       .text {
         display: none;
       }
@@ -318,6 +327,7 @@
 
           .icon-exit {
             padding: 4px 8px;
+
             &:hover {
               border-radius: 8px;
               background-color: constants.$background-color;

src/components/common/Sidebar/Item.tsx

@@ -42,9 +42,9 @@ const Item = (props: ItemProps) => {
                         isPending ? 'pending' : isActive ? 'active' : ''
                     }
                 >
+                    {props.icon && (
                         <div className={'icon-box'}>
-                        {props.icon &&
-                            (typeof props.icon === 'string' ? (
+                            {typeof props.icon === 'string' ? (
                                 <img
                                     className={'icon'}
                                     src={`data:image/svg+xml;base64,${props.icon}`}
@@ -52,8 +52,9 @@ const Item = (props: ItemProps) => {
                                 />
                             ) : (
                                 <Icon className={'icon'} component={props.icon} />
-                            ))}
+                            )}
                         </div>
+                    )}
                     <span className={'text'}>{props.text}</span>
                     <div className={'extend'}>{props.extend}</div>
                 </NavLink>

src/components/tools/StoreCard.tsx

@@ -191,7 +191,7 @@ const StoreCard = ({
         <>
             <Draggable
                 id={`${author.username}:${toolId}:${ver}`}
-                data={{ icon, toolName, toolId, authorUsername: author.username, ver: 'latest' }}
+                data={{ icon, toolName, toolId, authorUsername: author.username, ver: '' }}
             >
                 <Card
                     data-component={'component-store-card'}