Add export function and add arrows in subgoals

Author: mezm94

src/pages/PageFour/index.less

@@ -18,7 +18,7 @@
 }
 
 .right {
-  //flex-grow: 1;
+  flex-grow: 1;
   width: 220px;
 }
 
@@ -47,7 +47,7 @@ ul {
 .sub_title {
   background-color: rgb(235,235,235);
   text-align: center;
-  padding: 6px;
+  padding: 5px;
   font-weight: bold;
   //border: 1px solid red;
   display: flex;
@@ -70,7 +70,12 @@ ul {
 }
 
 .sub_list {
+  height: 460px;
+  overflow-y: scroll;
+}
 
+.sub_list::-webkit-scrollbar {
+  display: none  
 }
 
 .sub_item {
@@ -81,17 +86,42 @@ ul {
   background-color: rgb(255, 255, 255);
 }
 
+.sub_item:hover {
+  background-color: #add8e6;
+}
+
+// Add the arrow
+.sub_item::after{
+  display: inline-block;
+  padding-right: 0%;
+  position: absolute;
+  top: 20%;
+  right: 5%;
+  content: "";
+  height: 7px;
+  width: 7px;
+  border: solid #bbb;
+  border-width: 2px 2px 0 0;
+}
+
+//Rotate the arrow
+.sub_item::after {
+  -webkit-transform: rotate(135deg);
+  transform: rotate(135deg);
+}
+
 .highlight_item {
   background-color: rgb(2, 173, 2);
 }
 
 .sub_item_menu {
   top: 22px;
   left: 0;
+  text-align: center;
   position: absolute;
   background-color: rgb(246, 248, 246);
   z-index: 100;
-  width: 220px;
+  width: 99%;
   overflow-y: scroll;
   max-height: 180px;
   border-style: solid;
@@ -104,5 +134,5 @@ ul {
 }
 
 .sub_item_menu_item:hover {
-  background-color: #eee;
+  background-color: #bbb;
 }