Add edit buttom to statement

src/assets/edit.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 612.097 612.097" style="enable-background:new 0 0 612.097 612.097;" xml:space="preserve">
+<g>
+	<path d="M320.85,151.725l139.6,139.6l-238,237.9l-139.6-139.6L320.85,151.725z M607.65,124.125l-119.7-119.7
+		c-5.9-5.9-15.5-5.9-21.4,0l-104,104l141,141l104-104C613.55,139.525,613.55,130.025,607.65,124.125z M0.55,592.825
+		c-1.4,5.3,0.1,10.9,3.9,14.8c3.9,3.9,9.5,5.4,14.8,3.9l165.5-44.6l-139.6-139.6L0.55,592.825z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/components/Statement.vue

@@ -25,16 +25,32 @@ computed(() => value = getValueStatement())
     border: 1px solid #ccc;
     border-radius: 3px;
     padding: 10px;
+    display: flex;
+    flex-direction: row;
+  }
+
+  .content {
+    flex: 1;
+  }
+
+  .sidebar {
+    padding-left: 10px;
   }
 </style>
 
 <template>
   <div class="math-statement">
-
-    <Katex :statement="statement" size="big"/>
-    <div class="result" v-if="value">
-      <hr v-if="value" style="border: 1px solid #ccc; border-bottom: 0">
-      <Katex :statement="value" size="small" style="color: #666"/>
+    <div class="content">
+      <Katex :statement="statement" size="big"/>
+      <div class="result" v-if="value">
+        <hr v-if="value" style="border: 1px solid #ccc; border-bottom: 0">
+        <Katex :statement="value" size="small" style="color: #666"/>
+      </div>
+    </div>
+    <div class="sidebar">
+      <button>
+        <img src="../assets/edit.svg" alt="Edit" height="16">
+      </button>
     </div>
   </div>
 </template>