Feat(Menu): Add tool menu via drag and drop

Drag and drop a tool card to add tool menu

src/components/common/Sidebar/Item.tsx

@@ -3,10 +3,11 @@ import Icon from '@ant-design/icons'
 import Submenu from '@/components/common/Sidebar/Submenu'
 
 type ItemProps = {
-    icon?: IconComponent
+    icon?: IconComponent | string
     text?: string
     path: string
     children?: ReactNode
+    extend?: ReactNode
     end?: boolean
 }
 
@@ -42,9 +43,19 @@ const Item = (props: ItemProps) => {
                     }
                 >
                     <div className={'icon-box'}>
-                        {props.icon && <Icon className={'icon'} component={props.icon} />}
+                        {props.icon &&
+                            (typeof props.icon === 'string' ? (
+                                <img
+                                    className={'icon'}
+                                    src={`data:image/svg+xml;base64,${props.icon}`}
+                                    alt={'icon'}
+                                />
+                            ) : (
+                                <Icon className={'icon'} component={props.icon} />
+                            ))}
                     </div>
                     <span className={'text'}>{props.text}</span>
+                    <div className={'extend'}>{props.extend}</div>
                 </NavLink>
             </div>
             {props.children && (

src/components/common/Sidebar/Separate.tsx

@@ -4,7 +4,7 @@ const Separate = ({
     className,
     ...props
 }: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => {
-    return <div className={`separate ${className ? ` ${className}` : ''}`} {...props} />
+    return <div className={`separate${className ? ` ${className}` : ''}`} {...props} />
 }
 
 export default Separate