src/components/desktop_nav/desktop_nav.js

@@ -98,10 +98,6 @@ export default {
     scrollToTop () {
       window.scrollTo(0, 0)
     },
-    logout () {
-      this.$router.replace('/main/public')
-      this.$store.dispatch('logout')
-    },
     onSearchBarToggled (hidden) {
       this.searchBarHidden = hidden
     },

src/components/desktop_nav/desktop_nav.scss

@@ -101,10 +101,6 @@
       }
     }
 
-    &-logout {
-      margin-left: 2em;
-    }
-
     .svg-inline--fa {
       color: $fallback--link;
       color: var(--topBarLink, $fallback--link);
@@ -112,7 +108,7 @@
   }
 
   .-wide {
-    .nav-icon:not(.nav-icon-logout) {
+    .nav-icon {
       margin-left: 0.7em;
     }
   }

src/components/desktop_nav/desktop_nav.vue

@@ -164,18 +164,6 @@
             :title="$t('nav.administration')"
           />
         </a>
-        <button
-          v-if="currentUser"
-          class="button-unstyled nav-icon nav-icon-logout"
-          @click.prevent="logout"
-        >
-          <FAIcon
-            fixed-width
-            class="fa-scale-110 fa-old-padding"
-            icon="sign-out-alt"
-            :title="$t('login.logout')"
-          />
-        </button>
       </div>
     </div>
   </nav>

src/components/settings_modal/settings_modal.js

@@ -14,6 +14,7 @@ import {
   faTimes,
   faFileUpload,
   faFileDownload,
+  faSignOutAlt,
   faChevronDown
 } from '@fortawesome/free-solid-svg-icons'
 import {
@@ -28,6 +29,7 @@ library.add(
   faWindowMinimize,
   faFileUpload,
   faFileDownload,
+  faSignOutAlt,
   faChevronDown
 )
 
@@ -66,6 +68,11 @@ const SettingsModal = {
     closeModal () {
       this.$store.dispatch('closeSettingsModal')
     },
+    logout () {
+      this.$router.replace('/main/public')
+      this.$store.dispatch('closeSettingsModal')
+      this.$store.dispatch('logout')
+    },
     peekModal () {
       this.$store.dispatch('togglePeekSettingsModal')
     },
@@ -150,6 +157,7 @@ const SettingsModal = {
     }
   },
   computed: {
+    currentUser () { return this.$store.state.users.currentUser },
     currentSaveStateNotice () {
       return this.$store.state.interface.settings.currentSaveStateNotice
     },

src/components/settings_modal/settings_modal.scss

@@ -71,5 +71,10 @@
       display: flex;
       flex-grow: 1;
     }
+
+    .logout-button {
+      position: absolute;
+      right: 20px;
+    }
   }
 }

src/components/settings_modal/settings_modal.vue

@@ -111,6 +111,20 @@
           id="unscrolled-content"
           class="extra-content"
         />
+        <button
+          v-if="currentUser"
+          class="button-default logout-button"
+          :title="$t('login.logout')"
+          :aria-label="$t('login.logout')"
+          @click.prevent="logout"
+        >
+          <FAIcon
+            fixed-width
+            class="fa-scale-110 fa-old-padding"
+            icon="sign-out-alt"
+          />
+          <span>{{ $t('login.logout') }}</span>
+        </button>
       </div>
     </div>
   </Modal>