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

Drag and drop a tool card to add tool menu

src/assets/css/pages/tools-framework.scss

@@ -4,6 +4,13 @@
 [data-component=tools-framework] {
   .left-panel {
     background-color: constants.$origin-color;
+
+    .menu-droppable {
+      display: flex;
+      min-height: 0;
+      flex: 1;
+      width: 100%;
+    }
   }
 
   .right-panel {

src/assets/css/pages/tools/index.scss

@@ -11,7 +11,7 @@
       flex-wrap: wrap;
       justify-content: flex-start;
 
-      > .card-box {
+      > .card-box, > div {
         width: 180px;
         height: 290px;
         flex: 0 0 auto;
@@ -77,6 +77,7 @@
       flex-direction: row;
       align-items: center;
       gap: 20px;
+      margin-top: 20px;
 
       :first-child, :last-child {
         height: 0;
@@ -99,7 +100,7 @@
       flex-wrap: wrap;
       justify-content: flex-start;
 
-      > .card-box {
+      > .card-box, > div {
         width: 180px;
         height: 290px;
         flex: 0 0 auto;

src/assets/css/pages/tools/store.scss

@@ -26,7 +26,7 @@
     flex-wrap: wrap;
     justify-content: center;
 
-    > .card-box {
+    > div {
       width: 180px;
       height: 290px;
       flex: 0 0 auto;

src/assets/css/pages/tools/user.scss

@@ -68,7 +68,7 @@
       flex-wrap: wrap;
       justify-content: center;
 
-      > .card-box {
+      > div {
         width: 180px;
         height: 290px;
         flex: 0 0 auto;