Add basic components

client/src/components/CircleSidebar.vue

@@ -1,8 +1,11 @@
 <template>
-  <h1>Analyse</h1>
-  <div>CircleComponent</div>
-  <div>CircleOverviewComponent</div>
-  <div>FachexpertenKontaktieren</div>
+  <div>
+    <h1>Analyse</h1>
+    <p>Dauer 8 Stunden</p>
+    <div>CircleComponent</div>
+    <div>CircleOverviewComponent</div>
+    <div>FachexpertenKontaktieren</div>
+  </div>
 </template>
 
 <script>

client/src/components/LearningSequence.vue

@@ -0,0 +1,29 @@
+<template>
+  <section>
+    <div>
+      <h2>Starten</h2>
+      <p>30 Minuten</p>
+    </div>
+    <ul>
+      <li v-for="unit in units" :key="unit">
+        {{unit}}
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script>
+
+export default {
+  props: ['units'],
+  setup (props) {
+
+    return {
+    }
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

client/src/views/CircleView.vue

@@ -1,21 +1,32 @@
 <template>
   <VBVNavigationBar />
   <MainNavigationBar />
-  <div>
+  <div class="flex flex-row">
     <CircleSidebar />
+    <main class="flex-grow">
+      circle main content
+      <LearningSequence :units="units"/>
+    </main>
   </div>
-  <main>
-    circle main content
-  </main>
 </template>
 
 <script>
 import MainNavigationBar from "../components/MainNavigationBar.vue";
 import VBVNavigationBar from "../components/VBVNavigationBar.vue";
 import CircleSidebar from "../components/CircleSidebar.vue";
+import LearningSequence from "../components/LearningSequence.vue";
+import {reactive} from "vue";
+
 export default {
   name: "CircleView",
-  components: {CircleSidebar, MainNavigationBar, VBVNavigationBar}
+  components: {LearningSequence, CircleSidebar, MainNavigationBar, VBVNavigationBar},
+  setup () {
+    const units = reactive(['video bla', 'fachwissen'])
+
+    return {
+      units
+    }
+  }
 
 }
 </script>