1 files changed, 84 insertions, 0 deletions

diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
new file mode 100644
index 000000000..3b21a7765
--- /dev/null
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -0,0 +1,84 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Link from '../../ui/Link';
+
+const messages = defineMessages({
+  availableServices: {
+    id: 'settings.navigation.availableServices',
+    defaultMessage: '!!!Available services',
+  },
+  yourServices: {
+    id: 'settings.navigation.yourServices',
+    defaultMessage: '!!!Your services',
+  },
+  account: {
+    id: 'settings.navigation.account',
+    defaultMessage: '!!!Account',
+  },
+  settings: {
+    id: 'settings.navigation.settings',
+    defaultMessage: '!!!Settings',
+  },
+  logout: {
+    id: 'settings.navigation.logout',
+    defaultMessage: '!!!Logout',
+  },
+});
+
+export default class SettingsNavigation extends Component {
+  static propTypes = {
+    serviceCount: PropTypes.number.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const { serviceCount } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="settings-navigation">
+        <Link
+          to="/settings/recipes"
+          className="settings-navigation__link"
+          activeClassName="is-active"
+        >
+          {intl.formatMessage(messages.availableServices)}
+        </Link>
+        <Link
+          to="/settings/services"
+          className="settings-navigation__link"
+          activeClassName="is-active"
+        >
+          {intl.formatMessage(messages.yourServices)} <span className="badge">{serviceCount}</span>
+        </Link>
+        <Link
+          to="/settings/user"
+          className="settings-navigation__link"
+          activeClassName="is-active"
+        >
+          {intl.formatMessage(messages.account)}
+        </Link>
+        <Link
+          to="/settings/app"
+          className="settings-navigation__link"
+          activeClassName="is-active"
+        >
+          {intl.formatMessage(messages.settings)}
+        </Link>
+        <span className="settings-navigation__expander" />
+        <Link
+          to="/auth/logout"
+          className="settings-navigation__link"
+          activeClassName="is-active"
+        >
+          {intl.formatMessage(messages.logout)}
+        </Link>
+      </div>
+    );
+  }
+}