fix: show namespace count for long titles

When the namespace title is to long the count was only shown in the toolip. With this pull request the count is separated from the title and always shown.

src/components/home/navigation.vue

@@ -54,18 +54,22 @@
 					<span
 						@click="toggleLists(n.id)"
 						class="menu-label"
-						v-tooltip="namespaceTitles[nk]">
+						v-tooltip="namespaceTitles[nk]"
+					>
+						<span
+							v-if="n.hexColor !== ''"
+							:style="{ backgroundColor: n.hexColor }"
+							class="color-bubble"
+						/>
 						<span class="name">
-							<span
-								:style="{ backgroundColor: n.hexColor }"
-								class="color-bubble"
-								v-if="n.hexColor !== ''">
-							</span>
 							{{ namespaceTitles[nk] }}
 						</span>
+						<span class="count">
+							{{ namespaceListsCount[nk] }}
+						</span>
 					</span>
 					<a
-						class="icon is-small toggle-lists-icon"
+						class="icon is-small toggle-lists-icon pl-2"
 						:class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}"
 						@click="toggleLists(n.id)"
 					>
@@ -197,10 +201,10 @@ export default {
 			return this.namespaces.map(({lists}) => lists?.filter(item => !item.isArchived))
 		},
 		namespaceTitles() {
-			return this.namespaces.map((namespace, index) => {
-				const title = this.getNamespaceTitle(namespace)
-				return `${title} (${this.activeLists[index]?.length ?? 0})`
-			})
+			return this.namespaces.map((namespace) => this.getNamespaceTitle(namespace))
+		},
+		namespaceListsCount() {
+			return this.namespaces.map((_, index) => this.activeLists[index]?.length ?? 0)
 		},
 	},
 	beforeCreate() {
@@ -365,8 +369,9 @@ $vikunja-nav-selected-width: 0.4rem;
 
 		.menu-label {
 			.color-bubble {
-				width: 14px !important;
-				height: 14px !important;
+				width: 14px;
+				height: 14px;
+				flex-basis: auto;
 			}
 
 			.is-archived {
@@ -387,6 +392,13 @@ $vikunja-nav-selected-width: 0.4rem;
 					overflow: hidden;
 					text-overflow: ellipsis;
 					white-space: nowrap;
+					margin-right: auto;
+				}
+
+				.count {
+					color: $grey-500;
+					font-weight: bold;
+					margin-left: .25rem;
 				}
 			}