Put the settings dropdown in the menu

src/components/home/navigation.vue

@@ -118,6 +118,7 @@
 										<icon :icon="['far', 'star']" v-else/>
 									</span>
 								</router-link>
+								<list-settings-dropdown :list="l"/>
 							</li>
 						</template>
 					</ul>
@@ -134,9 +135,11 @@
 <script>
 import {mapState} from 'vuex'
 import {CURRENT_LIST, MENU_ACTIVE, LOADING, LOADING_MODULE} from '@/store/mutation-types'
+import ListSettingsDropdown from '@/components/list/list-settings-dropdown'
 
 export default {
 	name: 'navigation',
+	components: {ListSettingsDropdown},
 	computed: mapState({
 		namespaces(state) {
 			return state.namespaces.namespaces.filter(n => !n.isArchived)

src/components/home/topNavigation.vue

@@ -32,7 +32,7 @@
 				{{ currentList.title === '' ? 'Loading...' : currentList.title }}
 			</h1>
 
-			<list-settings-dropdown v-if="canWriteCurrentList" :current-list="currentList"/>
+			<list-settings-dropdown v-if="canWriteCurrentList" :list="currentList"/>
 		</div>
 
 		<div class="navbar-end">

src/components/list/list-settings-dropdown.vue

@@ -1,34 +1,34 @@
 <template>
 	<div class="dropdown is-right is-active">
 		<div class="dropdown-trigger">
-			<icon icon="ellipsis-h" @click.stop="listSettingsOpen = !listSettingsOpen"/>
+			<icon icon="ellipsis-h" @click.stop="listSettingsOpen = !listSettingsOpen" class="icon"/>
 		</div>
 		<transition name="fade">
 			<div class="dropdown-menu" v-if="listSettingsOpen">
 				<div class="dropdown-content">
 					<router-link
-						:to="{ name: 'list.list.settings.edit', params: { id: currentList.id } }"
+						:to="{ name: `${listRoutePrefix}.settings.edit`, params: { listId: list.id } }"
 						class="dropdown-item">
 						Edit this list
 					</router-link>
 					<router-link
-						:to="{ name: 'list.list.settings.background', params: { id: currentList.id } }"
+						:to="{ name: `${listRoutePrefix}.settings.background`, params: { listId: list.id } }"
 						v-if="backgroundsEnabled"
 						class="dropdown-item">
 						Set list background
 					</router-link>
 					<router-link
-						:to="{ name: 'list.list.settings.share', params: { id: currentList.id } }"
+						:to="{ name: `${listRoutePrefix}.settings.share`, params: { listId: list.id } }"
 						class="dropdown-item">
 						Share this list
 					</router-link>
 					<router-link
-						:to="{ name: 'list.list.settings.duplicate', params: { id: currentList.id } }"
+						:to="{ name: `${listRoutePrefix}.settings.duplicate`, params: { listId: list.id } }"
 						class="dropdown-item">
 						Duplicate this list
 					</router-link>
 					<router-link
-						:to="{ name: 'list.list.settings.delete', params: { id: currentList.id } }"
+						:to="{ name: `${listRoutePrefix}.settings.delete`, params: { listId: list.id } }"
 						class="dropdown-item">
 						Delete this list
 					</router-link>
@@ -39,8 +39,6 @@
 </template>
 
 <script>
-import {mapState} from 'vuex'
-
 export default {
 	name: 'list-settings-dropdown',
 	data() {
@@ -52,12 +50,21 @@ export default {
 		this.$nextTick(() => document.addEventListener('click', () => this.listSettingsOpen = false))
 	},
 	props: {
-		currentList: {
+		list: {
 			required: true,
 		},
 	},
-	computed: mapState({
-		backgroundsEnabled: state => state.config.enabledBackgroundProviders.length > 0,
-	}),
+	computed: {
+		backgroundsEnabled() {
+			return this.$store.state.config.enabledBackgroundProviders.length > 0
+		},
+		listRoutePrefix() {
+			if(this.$route.name.startsWith('list.')) {
+				return this.$route.name
+			}
+
+			return 'list'
+		},
+	},
 }
 </script>

src/router/index.js

@@ -196,6 +196,31 @@ export default new Router({
 			name: 'tasks.range',
 			component: ShowTasksInRangeComponent,
 		},
+		{
+			path: '/lists/:listId/settings/edit',
+			name: 'list.settings.edit',
+			component: ListSettingEdit,
+		},
+		{
+			path: '/lists/:listId/settings/background',
+			name: 'list.settings.background',
+			component: ListSettingBackground,
+		},
+		{
+			path: '/lists/:listId/settings/duplicate',
+			name: 'list.settings.duplicate',
+			component: ListSettingDuplicate,
+		},
+		{
+			path: '/lists/:listId/settings/share',
+			name: 'list.settings.share',
+			component: ListSettingShare,
+		},
+		{
+			path: '/lists/:listId/settings/delete',
+			name: 'list.settings.delete',
+			component: ListSettingDelete,
+		},
 		{
 			path: '/lists/:listId',
 			name: 'list.index',
@@ -248,12 +273,64 @@ export default new Router({
 							name: 'task.gantt.detail',
 							component: TaskDetailViewModal,
 						},
+						{
+							path: '/lists/:listId/settings/edit',
+							name: 'list.gantt.settings.edit',
+							component: ListSettingEdit,
+						},
+						{
+							path: '/lists/:listId/settings/background',
+							name: 'list.gantt.settings.background',
+							component: ListSettingBackground,
+						},
+						{
+							path: '/lists/:listId/settings/duplicate',
+							name: 'list.gantt.settings.duplicate',
+							component: ListSettingDuplicate,
+						},
+						{
+							path: '/lists/:listId/settings/share',
+							name: 'list.gantt.settings.share',
+							component: ListSettingShare,
+						},
+						{
+							path: '/lists/:listId/settings/delete',
+							name: 'list.gantt.settings.delete',
+							component: ListSettingDelete,
+						},
 					],
 				},
 				{
 					path: '/lists/:listId/table',
 					name: 'list.table',
 					component: Table,
+					children: [
+						{
+							path: '/lists/:listId/settings/edit',
+							name: 'list.table.settings.edit',
+							component: ListSettingEdit,
+						},
+						{
+							path: '/lists/:listId/settings/background',
+							name: 'list.table.settings.background',
+							component: ListSettingBackground,
+						},
+						{
+							path: '/lists/:listId/settings/duplicate',
+							name: 'list.table.settings.duplicate',
+							component: ListSettingDuplicate,
+						},
+						{
+							path: '/lists/:listId/settings/share',
+							name: 'list.table.settings.share',
+							component: ListSettingShare,
+						},
+						{
+							path: '/lists/:listId/settings/delete',
+							name: 'list.table.settings.delete',
+							component: ListSettingDelete,
+						},
+					],
 				},
 				{
 					path: '/lists/:listId/kanban',
@@ -265,6 +342,31 @@ export default new Router({
 							name: 'task.kanban.detail',
 							component: TaskDetailViewModal,
 						},
+						{
+							path: '/lists/:listId/settings/edit',
+							name: 'list.kanban.settings.edit',
+							component: ListSettingEdit,
+						},
+						{
+							path: '/lists/:listId/settings/background',
+							name: 'list.kanban.settings.background',
+							component: ListSettingBackground,
+						},
+						{
+							path: '/lists/:listId/settings/duplicate',
+							name: 'list.kanban.settings.duplicate',
+							component: ListSettingDuplicate,
+						},
+						{
+							path: '/lists/:listId/settings/share',
+							name: 'list.kanban.settings.share',
+							component: ListSettingShare,
+						},
+						{
+							path: '/lists/:listId/settings/delete',
+							name: 'list.kanban.settings.delete',
+							component: ListSettingDelete,
+						},
 					],
 				},
 			],

src/styles/theme/navigation.scss

@@ -223,15 +223,32 @@
         &.can-be-hidden {
           transition: all $transition;
           height: 0;
-          overflow: hidden;
+          //overflow: hidden;
           opacity: 0;
         }
 
         li {
           height: 44px;
+          display: flex;
+          align-items: center;
+
+          .dropdown-trigger {
+            opacity: 0;
+            padding: .5rem;
+            cursor: pointer;
+            transition: $transition;
+          }
+
+          &:hover {
+            background: $white;
+
+            .dropdown-trigger {
+              opacity: 1;
+            }
+          }
         }
 
-        span.list-menu-link, a {
+        span.list-menu-link, a:not(.dropdown-item) {
           padding: 0.75rem .5rem 0.75rem $navbar-padding * 1.5;
           transition: all 0.2s ease;
 
@@ -261,10 +278,8 @@
           }
 
           &:hover {
-            background: $white;
             border-left: $vikunja-nav-selected-width solid $primary;
           }
-
         }
       }