Make hidden lists in the menu more compact

src/components/home/navigation.vue

@@ -50,7 +50,7 @@
 
 		<aside class="menu namespaces-lists loader-container" :class="{'is-loading': loading}">
 			<template v-for="n in namespaces">
-				<div :key="n.id" class="namespace-title">
+				<div :key="n.id" class="namespace-title" :class="{'has-menu': n.id > 0}">
 					<span
 						@click="toggleLists(n.id)"
 						class="menu-label"
@@ -64,6 +64,12 @@
 							{{ n.title }} ({{ n.lists.filter(l => !l.isArchived).length }})
 						</span>
 					</span>
+					<a
+						class="icon is-small toggle-lists-icon"
+						:class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}"
+						@click="toggleLists(n.id)">
+						<icon icon="chevron-down"/>
+					</a>
 					<namespace-settings-dropdown :namespace="n" v-if="n.id > 0"/>
 				</div>
 				<div :key="n.id + 'child'" class="more-container" v-if="typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true">
@@ -99,13 +105,6 @@
 						</template>
 					</ul>
 				</div>
-				<span
-					@click="toggleLists(n.id)"
-					:key="`${n.id}_hidden_hint`"
-					class="hidden-hint"
-					v-else-if="n.lists.filter(l => !l.isArchived).length > 0">
-					Show hidden lists ({{ n.lists.filter(l => !l.isArchived).length }})...
-				</span>
 			</template>
 		</aside>
 		<a class="menu-bottom-link" href="https://vikunja.io" target="_blank">Powered by Vikunja</a>

src/styles/theme/navigation.scss

@@ -189,20 +189,33 @@
           padding: .5rem;
           cursor: pointer;
         }
+
+        .toggle-lists-icon {
+          svg {
+            transition: all $transition;
+            transform: rotate(90deg);
+            opacity: 1;
+          }
+
+          &.active svg {
+            transform: rotate(0deg);
+            opacity: 0;
+          }
+        }
+
+        &:hover .toggle-lists-icon svg {
+          opacity: 1;
+        }
+
+        &:not(.has-menu) .toggle-lists-icon {
+          padding-right: 1rem;
+        }
       }
 
       .menu-label, .nsettings, .menu-list span.list-menu-link, .menu-list a {
         color: $vikunja-nav-color;
       }
 
-      .hidden-hint {
-        display: block;
-        text-align: center;
-        color: $grey-500;
-        cursor: pointer;
-        font-size: 0.75rem;
-      }
-
       .menu-list {
         li {
           height: 44px;
@@ -285,7 +298,7 @@
       }
 
       .icon {
-        color: $grey-400;
+        color: $grey-400 !important;
       }
     }