diff --git a/src/components/home/ProjectsNavigation.vue b/src/components/home/ProjectsNavigation.vue
index 2b3ce231f..9408924f3 100644
--- a/src/components/home/ProjectsNavigation.vue
+++ b/src/components/home/ProjectsNavigation.vue
@@ -31,6 +31,14 @@
:class="{'is-loading': projectUpdating[p.id]}"
>
@@ -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([])
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);
+}
\ No newline at end of file
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index a976526c1..62ffbe746 100644
--- a/src/styles/theme/navigation.scss
+++ b/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;
+ }
}
}