From aa5d0d437da13670777c1584bcdf406ac290bf60 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 16 Jan 2021 22:33:49 +0100
Subject: [PATCH] Fix namespace actions alignment in the menu

---
 src/components/home/navigation.vue | 40 +++++++++++++++---------------
 src/styles/theme/navigation.scss   | 32 ++++++++++++++++++------
 2 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index f90448c53..5bdb2b7db 100644
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@@ -50,26 +50,7 @@
 
 		<aside class="menu namespaces-lists loader-container" :class="{'is-loading': loading}">
 			<template v-for="n in namespaces">
-				<div :key="n.id">
-					<router-link
-						:to="{name: 'namespace.edit', params: {id: n.id} }"
-						class="nsettings"
-						v-if="n.id > 0"
-						v-tooltip="'Settings'">
-						<span class="icon">
-							<icon icon="cog"/>
-						</span>
-					</router-link>
-					<router-link
-						:key="n.id + 'list.create'"
-						:to="{ name: 'list.create', params: { id: n.id} }"
-						class="nsettings"
-						v-if="n.id > 0"
-						v-tooltip="'Add a new list in the ' + n.title + ' namespace'">
-						<span class="icon">
-							<icon icon="plus"/>
-						</span>
-					</router-link>
+				<div :key="n.id" class="namespace-title">
 					<label
 						:for="n.id + 'checker'"
 						class="menu-label"
@@ -83,6 +64,25 @@
 							{{ n.title }} ({{ n.lists.filter(l => !l.isArchived).length }})
 						</span>
 					</label>
+					<div class="actions">
+						<router-link
+							:key="n.id + 'list.create'"
+							:to="{ name: 'list.create', params: { id: n.id} }"
+							v-if="n.id > 0"
+							v-tooltip="'Add a new list in the ' + n.title + ' namespace'">
+							<span class="icon">
+								<icon icon="plus"/>
+							</span>
+						</router-link>
+						<router-link
+							:to="{name: 'namespace.edit', params: {id: n.id} }"
+							v-if="n.id > 0"
+							v-tooltip="'Settings'">
+							<span class="icon">
+								<icon icon="cog"/>
+							</span>
+						</router-link>
+					</div>
 				</div>
 				<input
 					:id="n.id + 'checker'"
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index 9b301f64c..67f3f9b50 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -141,12 +141,9 @@
         color: $grey;
         font-weight: 500;
         min-height: 2.5em;
-        padding-top: $navbar-padding * 0.3;
+        padding-top: 0;
         padding-left: $navbar-padding;
 
-        display: block;
-        white-space: nowrap;
-        text-overflow: ellipsis;
         overflow: hidden;
       }
 
@@ -198,9 +195,30 @@
         }
       }
 
-      .nsettings {
-        float: right;
-        padding: 10px 0.3em 0;
+      .namespace-title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .menu-label {
+          margin-bottom: 0;
+          flex: 1 1 auto;
+
+          .name {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+
+        .actions {
+          flex: 0 0 auto;
+
+          a {
+            color: $vikunja-nav-color;
+            padding: 0 .25rem;
+          }
+        }
       }
 
       .menu-label, .nsettings, .menu-list span.list-menu-link, .menu-list a {