diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Sidebar.svelte | 45 |
1 files changed, 22 insertions, 23 deletions
diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte index eaea191..a650ab2 100644 --- a/src/components/Sidebar.svelte +++ b/src/components/Sidebar.svelte @@ -1,25 +1,21 @@ -<script> - import DarkModeSwitch from "./components/DarkModeSwitch.svelte"; - - let active_section : undefined; +<script lang="ts"> + import DarkModeSwitch from "./DarkModeSwitch.svelte"; + import AssignLabs from "./AssignLabs.svelte"; let sections = [ - 'File Uploads', - 'Peer Teachers', - 'Labs', - 'Active Peer Teachers', - 'Stats', - 'TAMU html output' - ] + { name: "File Uploads", component: null }, + { name: "Peer Teachers", component: null }, + { name: "Assign Labs", component: AssignLabs }, + { name: "Labs", component: null }, + { name: "Active Peer Teachers", component: null }, + { name: "Stats", component: null }, + { name: "TAMU Html Output", component: null }, + ]; - let sections2 = [ - {name: 'File Uploads', file: null, isActive: 'active'}, - {name: 'Peer Teachers', file: null, isActive: 'active'} - ] + let selected = sections[0]; function chooseSection(sec) { - active_section = sec; - console.log('Chose section', active_section) + selected = sec; } </script> @@ -42,15 +38,18 @@ <div class="flex-col overflow-y-auto"> <ul class="menu bg-base-100 w-full text-xl"> {#each sections as sec, i} - <li><div class=""> {sec} </div></li> - {/each} - {#each sections2 as sec, i} - <li><div class="" on:click={() => chooseSection(sec)}> {sec.name} </div></li> + <li> + <div class="" on:click={() => chooseSection(sec)}> + {sec.name} + </div> + </li> {/each} </ul> </div> </div> - <!-- Main content --> - <div class="flex-auto">Content</div> + <!-- Chosen Section / Component --> + <div class="flex-auto"> + <svelte:component this={selected.component} /> + </div> </div> |