Harmonize menu bar and settings in sidebar

desktop/menus/mac-app-menu.js

@@ -21,6 +21,13 @@ const buildMacAppMenu = (isAuthenticated) => {
     { role: 'hide' },
     { role: 'hideothers' },
     { role: 'unhide' },
+    ...(isAuthenticated
+      ? [
+          { type: 'separator' },
+          menuItems.emptyTrash(isAuthenticated),
+          menuItems.signout(isAuthenticated),
+        ]
+      : []),
     { type: 'separator' },
     { role: 'quit' },
   ];

desktop/menus/menu-items.js

@@ -16,6 +16,14 @@ const checkForUpdates = {
   click: updater.pingAndShowProgress.bind(updater),
 };
 
+const emptyTrash = (isAuthenticated) => {
+  return {
+    label: '&Empty Trash',
+    visible: isAuthenticated,
+    click: appCommandSender({ action: 'emptyTrash' }),
+  };
+};
+
 const preferences = (isAuthenticated) => {
   return {
     label: 'P&references…',
@@ -28,8 +36,20 @@ const preferences = (isAuthenticated) => {
   };
 };
 
+const signout = (isAuthenticated) => {
+  return {
+    label: '&Sign Out',
+    visible: isAuthenticated,
+    click: appCommandSender({
+      action: 'logout',
+    }),
+  };
+};
+
 module.exports = {
   about,
   checkForUpdates,
+  emptyTrash,
   preferences,
+  signout,
 };

lib/navigation-bar/index.tsx

@@ -1,8 +1,7 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import onClickOutside from 'react-onclickoutside';
 
-import { isElectron } from '../utils/platform';
 import ConnectionStatus from '../connection-status';
 import NavigationBarItem from './item';
 import TagList from '../tag-list';
@@ -91,42 +90,38 @@ export class NavigationBar extends Component<Props> {
           </div>
         </div>
 
-        {(!isElectron || autoHideMenuBar) && (
-          <Fragment>
-            <div className="navigation-bar__tools theme-color-border">
-              <NavigationBarItem
-                icon={<SettingsIcon />}
-                label="Settings"
-                onClick={onSettings}
-              />
-            </div>
-            <div className="navigation-bar__footer">
-              <button
-                type="button"
-                className="navigation-bar__footer-item theme-color-fg-dim"
-                onClick={this.props.showKeyboardShortcuts}
-              >
-                Keyboard Shortcuts
-              </button>
-            </div>
-            <div className="navigation-bar__footer">
-              <button
-                type="button"
-                className="navigation-bar__footer-item theme-color-fg-dim"
-                onClick={this.onHelpClicked}
-              >
-                Help &amp; Support
-              </button>
-              <button
-                type="button"
-                className="navigation-bar__footer-item theme-color-fg-dim"
-                onClick={onAbout}
-              >
-                About
-              </button>
-            </div>
-          </Fragment>
-        )}
+        <div className="navigation-bar__tools theme-color-border">
+          <NavigationBarItem
+            icon={<SettingsIcon />}
+            label="Settings"
+            onClick={onSettings}
+          />
+        </div>
+        <div className="navigation-bar__footer">
+          <button
+            type="button"
+            className="navigation-bar__footer-item theme-color-fg-dim"
+            onClick={this.props.showKeyboardShortcuts}
+          >
+            Keyboard Shortcuts
+          </button>
+        </div>
+        <div className="navigation-bar__footer">
+          <button
+            type="button"
+            className="navigation-bar__footer-item theme-color-fg-dim"
+            onClick={this.onHelpClicked}
+          >
+            Help &amp; Support
+          </button>
+          <button
+            type="button"
+            className="navigation-bar__footer-item theme-color-fg-dim"
+            onClick={onAbout}
+          >
+            About
+          </button>
+        </div>
       </div>
     );
   }

lib/state/electron/middleware.ts

@@ -5,10 +5,18 @@ import * as S from '../';
 export const middleware: S.Middleware = ({ dispatch, getState }) => {
   window.electron.receive('appCommand', (command) => {
     switch (command.action) {
+      case 'emptyTrash':
+        dispatch(actions.ui.emptyTrash());
+        return;
+
       case 'exportNotes':
         dispatch(actions.data.exportNotes());
         return;
 
+      case 'logout':
+        dispatch({ type: 'LOGOUT' });
+        return;
+
       case 'printNote':
         window.print();
         return;