Add source code button in about page

src/views/About.vue

@@ -1,32 +1,58 @@
 <template>
 
-    <v-sheet class="d-flex justify-center">
+    <v-sheet class="d-flex justify-center align-center">
+    
 
         <v-sheet class="ma-2 pa-4 mb-auto">
 
-            <v-row class="ma-2" justify="centered">
+            <v-sheet style="display: flex; align-items: center;justify-content: center;">
 
-            <v-img cover src="../../icons/LittleLines.svg"></v-img>
-            </v-row>
+                <img src="../../icons/LittleLines.svg">
+                
+            </v-sheet>
 
-            <v-list-item
-            center
-                class="text-black"
-                title="Little Lines"
-                subtitle="openKMITL Community"
+            <p class="text-center text-h4 font-weight-black">Little Lines</p>
+
+            <p class="text-center">openKMITL Community</p>
+
+
+            <v-sheet style="display: flex; align-items: center;justify-content: center;">
+              <a class="versionbutton">DATE-VERSION</a>
+            </v-sheet>
             
-            >
-            
-            </v-list-item>
-            <a class="versionbutton">DATE-VERSION</a>
-
+        
+            <v-list class = "ma-2" density="compact" max-width="420px" min-width="200px" width="95vw">
+                <v-list-item 
+                    v-for="(item, i) in sourcecode_items"
+                    :key="i"
+                    :value="item"
+                    :href="'https://gitlab.com/openKMITL/little-lines'"
+                >
+                <template v-slot:append>
+                <!-- <v-icon :icon="item.icon"></v-icon> -->
+                <img src="../../icons/Adwaita/right.svg">
+                </template>
+                    <v-list-item-title v-text="item.text"></v-list-item-title>
+                </v-list-item>
+            </v-list>
         </v-sheet>
+
+        
+        
     </v-sheet>
 
 </template>
 
 <script setup>
 
+import { getTopRight } from 'ol/extent';
+import {RouterLink} from 'vue-router';
+
+  const sourcecode_items = [
+    { text: 'ซอร์สโค้ด',
+    icon: 'mdi-chevron-right',}
+  ]
+
 </script>
 
 <style>
@@ -45,6 +71,11 @@
   padding-left: 15px;
   margin-top: 10px;
   margin-bottom: 10px;
+  width: 200px;
+}
+
+.text-h4 {
+  font-family: Cantarell, sans-serif !important;
 }
 
 </style>