From f3b44a2f1c56fb3e92a4fbce84531715a991c95b Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 27 Mar 2023 11:05:22 +0200
Subject: [PATCH] feat(navigation): correctly show child projects

---
 src/components/home/ProjectsNavigation.vue | 10 ++++++----
 src/models/project.ts                      |  3 +++
 src/styles/theme/navigation.scss           |  9 ++++++---
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/home/ProjectsNavigation.vue b/src/components/home/ProjectsNavigation.vue
index 193f6b387..9bb077572 100644
--- a/src/components/home/ProjectsNavigation.vue
+++ b/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>
diff --git a/src/models/project.ts b/src/models/project.ts
index 01c516b72..87143d992 100644
--- a/src/models/project.ts
+++ b/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
@@ -44,6 +45,8 @@ export default class ProjectModel extends AbstractModel<IProject> implements IPr
 		if (typeof this.subscription !== 'undefined' && this.subscription !== null) {
 			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)
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index 0caf6aa47..a976526c1 100644
--- a/src/styles/theme/navigation.scss
+++ b/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;