feat(navigation): correctly show child projects

src/components/home/ProjectsNavigation.vue

@@ -30,6 +30,7 @@
 				class="list-menu loader-container is-loading-small"
 				:class="{'is-loading': projectUpdating[p.id]}"
 			>
+				<section>
 				<BaseButton
 					:to="{ name: 'project.index', params: { projectId: p.id} }"
 					class="list-menu-link"
@@ -61,14 +62,15 @@
 					</template>
 				</ProjectSettingsDropdown>
 				<span class="list-setting-spacer" v-else></span>
+				</section>
+				<ProjectsNavigation
+					v-if="p.childProjects.length > 0"
+					:projects="p.childProjects"
+				/>
 			</li>
 		</template>
 	</draggable>
 
-	<!--		<ProjectsNavigation-->
-	<!--			v-if="projects.childProjects.length > 0"-->
-	<!--			:projects="projects.childProjects"-->
-	<!--		/>-->
 </template>
 
 <script lang="ts" setup>

src/models/project.ts

@@ -22,6 +22,7 @@ export default class ProjectModel extends AbstractModel<IProject> implements IPr
 	subscription: ISubscription = null
 	position = 0
 	backgroundBlurHash = ''
+	childProjects = []
 	
 	created: Date = null
 	updated: Date = null
@@ -45,6 +46,8 @@ export default class ProjectModel extends AbstractModel<IProject> implements IPr
 			this.subscription = new SubscriptionModel(this.subscription)
 		}
 		
+		this.childProjects = this.childProjects.map(p => new ProjectModel(p))
+
 		this.created = new Date(this.created)
 		this.updated = new Date(this.updated)
 	}

src/styles/theme/navigation.scss

@@ -15,7 +15,7 @@
   }
 
   .menu-list {
-    li {
+    li > section {
       height: 44px;
       display: flex;
       align-items: center;
@@ -38,7 +38,10 @@
           opacity: 1;
         }
       }
+    }
     
+    li > ul {
+      margin: 0 0 0 var(--menu-nested-list-margin);
     }
 
     .menu-item-icon {
@@ -67,7 +70,7 @@
     }
 
     .list-menu-link,
-    li > a {
+    li > section > a {
       color: $vikunja-nav-color;
       padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
       transition: all 0.2s ease;