Display checkmark on completed sections

2 files changed, 19 insertions, 7 deletions

diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
index 39c005e..53f9f05 100644
--- a/src/components/Sidebar.svelte
+++ b/src/components/Sidebar.svelte
@@ -7,15 +7,15 @@
   import TamuOutput from "./TamuOutput.svelte";
   import { onMount } from "svelte";
   import { parseDatabaseLocalStorage } from "../util/parser";
-
+  import Icon from "../components/helpers/Icon.svelte";
   let sections = [
-    { name: "File Uploads", component: FileUploads },
-    { name: "Peer Teachers", component: PeerTeachers },
-    { name: "Assign Labs", component: AssignLabs },
-    { name: "Labs", component: Labs },
+    { name: "File Uploads", component: FileUploads, icon: "checkmark" },
+    { name: "Peer Teachers", component: PeerTeachers, icon: "checkmark" },
+    { name: "Assign Labs", component: AssignLabs, icon: "checkmark" },
+    { name: "Labs", component: Labs, icon: "checkmark" },
     { name: "Active Peer Teachers", component: null }, // TODO
     { name: "Stats", component: null }, // TODO
-    { name: "TAMU HTML Output", component: TamuOutput },
+    { name: "TAMU HTML Output", component: TamuOutput, icon: "checkmark" },
   ];
 
   let selected = sections[0];
@@ -30,6 +30,8 @@
       console.log("No database found in local storage");
     }
   });
+
+  $: console.log(selected.icon);
 </script>
 
 <!-- Entire Page -->
@@ -62,7 +64,12 @@
                 selected = sec;
               }}
             >
-              {sec.name}
+              <div>
+                {sec.name}
+              </div>
+              <div>
+                <Icon name={sec.icon} />
+              </div>
             </div>
           </li>
         {/each}
diff --git a/src/components/helpers/Icon.svelte b/src/components/helpers/Icon.svelte
index 75ee3f4..1d1a03e 100644
--- a/src/components/helpers/Icon.svelte
+++ b/src/components/helpers/Icon.svelte
@@ -32,6 +32,11 @@
       box: 24,
       path: `<path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />`,
     },
+    {
+      name: "checkmark",
+      box: 20,
+      path: `<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />`,
+    },
   ];
   let displayIcon = icons.find((e) => e.name === name);
 </script>