Fix open/close settings menu

js/components/AppSettingsMenu.vue

 <template>
 	<div>
-		<button title="Add account" />
+
+		<a id="new-mail-account"
+		   class="button new-button"
+		   href="">{{ t('mail', 'Add mail account') }}</a>
+
+		<p>
+			<input class="checkbox"
+				   id="gravatar-enabled"
+			type="checkbox">
+			<label for="gravatar-enabled">{{ t('mail', 'Use Gravatar and favicon avatars') }}</label>
+		</p>
+
+		<p class="app-settings-hint">
+			<a id="keyboard-shortcuts"
+			   href="">{{ t('mail','Keyboard shortcuts')}}</a>
+		</p>
+
 	</div>
 </template>
 

js/components/core/appNavigation.vue

@@ -31,15 +31,16 @@
 			<navigation-item v-for="item in menu.items" :item="item"
 							 :key="item.key"/>
 		</ul>
-		<div id="app-settings" v-if="!!$slots['settings-content']">
+		<div v-click-outside="closeMenu" v-if="!!$slots['settings-content']" id="app-settings"
+			:class="{open: opened}">
 			<div id="app-settings-header">
 				<button class="settings-button"
-						data-apps-slide-toggle="#app-settings-content"
-				>{{t('mail', 'Settings')}}
-				</button>
+					data-apps-slide-toggle="#app-settings-content"
+					@click="toggleMenu"
+				>{{ t('mail', 'Settings') }}</button>
 			</div>
 			<div id="app-settings-content">
-				<slot name="settings-content"></slot>
+				<slot name="settings-content" />
 			</div>
 		</div>
 	</div>
@@ -53,6 +54,19 @@
 		props: ['menu'],
 		components: {
 			navigationItem
+		},
+		data() {
+			return {
+				opened: false
+			}
+		},
+		methods: {
+			toggleMenu () {
+				this.opened = !this.opened
+			},
+			closeMenu () {
+				this.opened = false
+			}
 		}
 	};
 </script>