First pass of training report form, lacks attendees

ui/src/pages/TrainingReport.vue

@@ -53,7 +53,7 @@ onMounted(async () => {
 <template>
     <div class="max-w-7xl mx-auto flex mt-5">
         <!-- training report list -->
-        <div class="px-4" :class="focusedTrainingReport == null ? 'w-full' : 'w-1/2'">
+        <div class="px-4" :class="sidePanel == sidePanelState.closed ? 'w-full' : 'w-1/2'">
             <div class="flex justify-between">
                 <p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Reports</p>
                 <Button @click="createTrainingReport">New Training Report</Button>
@@ -117,7 +117,15 @@ onMounted(async () => {
             </div>
         </div>
         <div v-if="sidePanel == sidePanelState.create" class="px-4 border-l w-1/2">
-            <TrainingReportForm></TrainingReportForm>
+            <div class="flex justify-between my-3">
+                <div class="flex gap-5">
+                    <p>New Training Report</p>
+                </div>
+                <button @click="closeTrainingReport" class="cursor-pointer">
+                    <X></X>
+                </button>
+            </div>
+            <TrainingReportForm class="w-full"></TrainingReportForm>
         </div>
     </div>
 </template>