feat(navigation): add hiding child projects

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,9 +70,23 @@
     }
 
     .list-menu-link,
-    li > section > a {
+    li > section {
+      .collapse-project-button {
+        padding: .5rem .25rem .5rem .5rem;
+        
+        svg {
+          transition: all $transition;
+          color: var(--grey-400);
+        }
+      }
+      
+      .collapse-project-button-placeholder {
+        width: 2.25rem;
+      }
+      
+      > a {
         color: $vikunja-nav-color;
-      padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
+        padding: .75rem .5rem .75rem .25rem;
         transition: all 0.2s ease;
 
         border-radius: 0;
@@ -80,15 +94,9 @@
         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);
-      }
 
         &.router-link-exact-active {
           color: var(--primary);
-        border-left: $vikunja-nav-selected-width solid var(--primary);
         }
 
         .icon {
@@ -104,13 +112,13 @@
         .handle {
           opacity: 0;
           transition: opacity $transition;
-        margin-right: .25rem;
         }
 
         &:hover .handle {
           opacity: 1;
         }
       }
+    }
 
     &:not(.dragging-disabled) .handle {
       cursor: grab;