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,11 +62,12 @@
     ul {
       > li, > div > li {
         padding: 2px 14px;
+
         &.item {
           position: relative;
-          font-size: 1.4em;
+          font-size: 1rem;
 
-          >.menu-bt {
+          > .menu-bt {
             border-radius: 8px;
             overflow: hidden;
             height: 40px;
@@ -80,7 +82,7 @@
               font-size: constants.$SIZE_ICON_SM;
               cursor: pointer;
 
-              img{
+              img {
                 width: 100%;
               }
             }
@@ -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;
@@ -159,7 +166,7 @@
           }
 
           &:hover {
-            >.menu-bt {
+            > .menu-bt {
               a:not(.active) {
                 background-color: constants.$background-color;
               }
@@ -249,7 +256,7 @@
       overflow: hidden;
       text-overflow: ellipsis;
 
-      a{
+      a {
         color: constants.$main-color;
         text-decoration: underline;
       }
@@ -278,6 +285,7 @@
           transition: all .3s;
         }
       }
+
       .text {
         display: none;
       }
@@ -299,6 +307,7 @@
 
     .footer {
       position: relative;
+
       .text {
         display: none;
       }
@@ -309,7 +318,7 @@
         padding-left: 6px;
         left: 100%;
         z-index: 1000;
-        box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.1);
+        box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1);
 
         .content {
           padding: 8px;
@@ -318,6 +327,7 @@
 
           .icon-exit {
             padding: 4px 8px;
+
             &:hover {
               border-radius: 8px;
               background-color: constants.$background-color;
@@ -326,7 +336,7 @@
         }
 
         &.hide {
-          display: none!important;
+          display: none !important;
         }
       }
 

src/components/common/Sidebar/Item.tsx

@@ -42,9 +42,9 @@ const Item = (props: ItemProps) => {
                         isPending ? 'pending' : isActive ? 'active' : ''
                     }
                 >
-                    <div className={'icon-box'}>
+                    {props.icon && (
-                        {props.icon &&
+                        <div className={'icon-box'}>
-                            (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>
+                        </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'}