Add dropdown menu for list settings options

src/components/home/topNavigation.vue

@@ -31,13 +31,32 @@
 				class="title">
 				{{ currentList.title === '' ? 'Loading...' : currentList.title }}
 			</h1>
-			<router-link
-				:to="{ name: 'list.list.settings.edit', params: { id: currentList.id } }"
-				class="icon"
-				v-if="canWriteCurrentList">
-				<icon icon="cog" size="2x"/>
-			</router-link>
+
+			<div class="dropdown is-right is-active" v-if="canWriteCurrentList">
+				<div class="dropdown-trigger">
+					<icon icon="ellipsis-h" @click.stop="listSettingsOpen = !listSettingsOpen"/>
+				</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 } }" class="dropdown-item">
+								Edit this list
+							</router-link>
+							<router-link :to="{ name: 'list.list.settings.edit', params: { id: currentList.id } }" class="dropdown-item">
+								Set the background
+							</router-link>
+							<router-link :to="{ name: 'list.list.settings.edit', params: { id: currentList.id } }" class="dropdown-item">
+								Duplicate this list
+							</router-link>
+							<router-link :to="{ name: 'list.list.settings.edit', params: { id: currentList.id } }" class="dropdown-item">
+								Delete this list
+							</router-link>
+						</div>
+					</div>
+				</transition>
+			</div>
 		</div>
+
 		<div class="navbar-end">
 			<update/>
 			<div class="user">
@@ -99,6 +118,7 @@ export default {
 	data() {
 		return {
 			userMenuActive: false,
+			listSettingsOpen: false,
 		}
 	},
 	components: {
@@ -107,6 +127,7 @@ export default {
 	created() {
 		// This will hide the menu once clicked outside of it
 		this.$nextTick(() => document.addEventListener('click', () => this.userMenuActive = false))
+		this.$nextTick(() => document.addEventListener('click', () => this.listSettingsOpen = false))
 	},
 	computed: mapState({
 		userInfo: state => state.auth.info,

src/main.js

@@ -57,6 +57,7 @@ import {
 	faChessKnight,
 	faCoffee,
 	faCocktail,
+	faEllipsisH,
 } from '@fortawesome/free-solid-svg-icons'
 import {faCalendarAlt, faClock, faComments, faSave, faStar, faTimesCircle, faSun} from '@fortawesome/free-regular-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
@@ -144,6 +145,7 @@ library.add(faSun)
 library.add(faChessKnight)
 library.add(faCoffee)
 library.add(faCocktail)
+library.add(faEllipsisH)
 
 Vue.component('icon', FontAwesomeIcon)
 

src/router/index.js

@@ -211,7 +211,22 @@ export default new Router({
 							path: '/lists/:listId/settings/edit',
 							name: 'list.list.settings.edit',
 							component: ListSettingEdit,
-						}
+						},
+						{
+							path: '/lists/:listId/settings/background',
+							name: 'list.list.settings.background',
+							component: ListSettingEdit,
+						},
+						{
+							path: '/lists/:listId/settings/duplicate',
+							name: 'list.list.settings.duplicate',
+							component: ListSettingEdit,
+						},
+						{
+							path: '/lists/:listId/settings/share',
+							name: 'list.list.settings.edit',
+							component: ListSettingEdit,
+						},
 					],
 				},
 				{

src/styles/components/list.scss

@@ -51,11 +51,12 @@
     margin: 0;
   }
 
-  .icon {
+  .dropdown-trigger {
     color: $grey-400;
     margin-left: 1rem;
     height: 1rem;
     width: 1rem;
+    cursor: pointer;
   }
 }
 

src/styles/theme/navigation.scss

@@ -365,12 +365,6 @@
       box-shadow: none !important;
     }
   }
-
-  .dropdown-menu {
-    .dropdown-content {
-      box-shadow: $shadow-md;
-    }
-  }
 }
 
 .menu-hide-button, .menu-show-button {

src/styles/theme/theme.scss

@@ -120,3 +120,9 @@ button.table {
   border-radius: 100%;
   margin-right: 4px;
 }
+
+.dropdown-menu {
+  .dropdown-content {
+    box-shadow: $shadow-md;
+  }
+}