src/components/home/ProjectsNavigation.vue

@@ -31,6 +31,14 @@
 				:class="{'is-loading': projectUpdating[p.id]}"
 			>
 				<section>
+					<BaseButton
+						v-if="p.childProjects.length > 0"
+						@click="collapsedProjects[p.id] = !collapsedProjects[p.id]"
+						class="collapse-project-button"
+					>
+						<icon icon="chevron-down" :class="{ 'project-is-collapsed': collapsedProjects[p.id] }"/>
+					</BaseButton>
+					<span class="collapse-project-button-placeholder" v-else></span>
 					<BaseButton
 						:to="{ name: 'project.index', params: { projectId: p.id} }"
 						class="list-menu-link"
@@ -64,7 +72,7 @@
 					<span class="list-setting-spacer" v-else></span>
 				</section>
 				<ProjectsNavigation
-					v-if="p.childProjects.length > 0"
+					v-if="p.childProjects.length > 0 && !collapsedProjects[p.id]"
 					:projects="p.childProjects"
 				/>
 			</li>
@@ -106,11 +114,13 @@ const currentProject = computed(() => baseStore.currentProject)
 // Hence, we'll clone the prop and work on the clone.
 // FIXME: cloning does not work when loading the page initially
 // TODO: child projects
+const collapsedProjects = ref<{ [id: IProject['id']]: boolean }>({})
 const availableProjects = ref<IProject[]>([])
 watch(
 	() => props.projects,
 	projects => {
 		availableProjects.value = projects
+		projects.forEach(p => collapsedProjects.value[p.id] = false)
 	},
 	{immediate: true},
 )
@@ -161,4 +171,8 @@ async function saveProjectPosition(e: SortableEvent) {
 	width: 2.5rem;
 	flex-shrink: 0;
 }
+
+.project-is-collapsed {
+	transform: rotate(-90deg);
+}
 </style>

src/styles/theme/navigation.scss

@@ -70,45 +70,53 @@
     }
 
     .list-menu-link,
-    li > section > a {
-      color: $vikunja-nav-color;
-      padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
-      transition: all 0.2s ease;
-
-      border-radius: 0;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      width: 100%;
-      border-left: $vikunja-nav-selected-width solid transparent;
-
-      &:hover {
-        border-left: $vikunja-nav-selected-width solid var(--primary);
+    li > section {
+      .collapse-project-button {
+        padding: .5rem .25rem .5rem .5rem;
+        
+        svg {
+          transition: all $transition;
+          color: var(--grey-400);
+        }
       }
-
-      &.router-link-exact-active {
-        color: var(--primary);
-        border-left: $vikunja-nav-selected-width solid var(--primary);
+      
+      .collapse-project-button-placeholder {
+        width: 2.25rem;
       }
+      
+      > a {
+        color: $vikunja-nav-color;
+        padding: .75rem .5rem .75rem .25rem;
+        transition: all 0.2s ease;
 
-      .icon {
-        height: 1rem;
-        vertical-align: middle;
-        padding-right: 0.5rem;
-      }
+        border-radius: 0;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        width: 100%;
 
-      &.router-link-exact-active .icon:not(.handle) {
-        color: var(--primary);
-      }
+        &.router-link-exact-active {
+          color: var(--primary);
+        }
 
-      .handle {
-        opacity: 0;
-        transition: opacity $transition;
-        margin-right: .25rem;
-      }
+        .icon {
+          height: 1rem;
+          vertical-align: middle;
+          padding-right: 0.5rem;
+        }
 
-      &:hover .handle {
-        opacity: 1;
+        &.router-link-exact-active .icon:not(.handle) {
+          color: var(--primary);
+        }
+
+        .handle {
+          opacity: 0;
+          transition: opacity $transition;
+        }
+
+        &:hover .handle {
+          opacity: 1;
+        }
       }
     }