8 files changed, 143 insertions, 1 deletions
diff --git a/app/features/navbar/actionTypes.js b/app/features/navbar/actionTypes.js
new file mode 100644
index 0000000..0c5efae
--- /dev/null
+++ b/app/features/navbar/actionTypes.js
@@ -0,0 +1,18 @@
+/**
+ * The type of (redux) action that opens specified Drawer.
+ *
+ * {
+ *     type: OPEN_DRAWER,
+ *     drawerComponent: React.ComponentType<*>
+ * }
+ */
+export const OPEN_DRAWER = Symbol('OPEN_DRAWER');
+
+/**
+ * The type of (redux) action that closes all Drawer.
+ *
+ * {
+ *     type: CLOSE_DRAWER
+ * }
+ */
+export const CLOSE_DRAWER = Symbol('CLOSE_DRAWER');
diff --git a/app/features/navbar/actions.js b/app/features/navbar/actions.js
new file mode 100644
index 0000000..af301b1
--- /dev/null
+++ b/app/features/navbar/actions.js
@@ -0,0 +1,34 @@
+// @flow
+
+import type { ComponentType } from 'react';
+
+import { CLOSE_DRAWER, OPEN_DRAWER } from './actionTypes';
+
+/**
+ * Closes the drawers.
+ *
+ * @returns {{
+ *     type: CLOSE_DRAWER,
+ * }}
+ */
+export function closeDrawer() {
+    return {
+        type: CLOSE_DRAWER
+    };
+}
+
+/**
+ * Opens the specified drawer.
+ *
+ * @param {string} drawerComponent - Component of the drawer.
+ * @returns {{
+ *     type: OPEN_DRAWER,
+ *     drawerComponent: ComponentType<*>
+ * }}
+ */
+export function openDrawer(drawerComponent: ComponentType<*>) {
+    return {
+        type: OPEN_DRAWER,
+        drawerComponent
+    };
+}
diff --git a/app/features/navbar/components/Navbar.js b/app/features/navbar/components/Navbar.js
index f767436..c193211 100644
--- a/app/features/navbar/components/Navbar.js
+++ b/app/features/navbar/components/Navbar.js
@@ -4,7 +4,9 @@
 import Navigation, { AkGlobalItem } from '@atlaskit/navigation';
 
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 
+import { SettingsAction, SettingsDrawer } from '../../settings';
 import { isElectronMac } from '../../utils';
 
 import HelpAction from './HelpAction';
@@ -24,6 +26,19 @@ class Navbar extends Component<*> {
     }
 
     /**
+     * Get the array of Primary actions of Global Navigation.
+     *
+     * @returns {ReactElement[]}
+     */
+    _getPrimaryActions() {
+        return [
+            <AkGlobalItem key = { 0 }>
+                <SettingsAction />
+            </AkGlobalItem>
+        ];
+    }
+
+    /**
      * Get the array of Secondary actions of Global Navigation.
      *
      * @returns {ReactElement[]}
@@ -44,6 +59,12 @@ class Navbar extends Component<*> {
     render() {
         return (
             <Navigation
+                drawers = { [
+                    <SettingsDrawer
+                        isOpen = { this.props._isSettingsDrawerOpen }
+                        key = { 0 } />
+                ] }
+                globalPrimaryActions = { this._getPrimaryActions() }
                 globalPrimaryIcon = { this._getPrimaryIcon() }
                 globalSecondaryActions = { this._getSecondaryActions() }
                 isElectronMac = { isElectronMac() }
@@ -53,4 +74,19 @@ class Navbar extends Component<*> {
     }
 }
 
-export default Navbar;
+/**
+ * Maps (parts of) the redux state to the React props.
+ *
+ * @param {Object} state - The redux state.
+ * @returns {{
+ *     _isSettingsDrawerOpen: boolean
+ * }}
+ */
+function _mapStateToProps(state: Object) {
+    return {
+        _isSettingsDrawerOpen: state.navbar.openDrawer === SettingsDrawer
+    };
+}
+
+
+export default connect(_mapStateToProps)(Navbar);
diff --git a/app/features/navbar/components/index.js b/app/features/navbar/components/index.js
index ee1d016..0e08bca 100644
--- a/app/features/navbar/components/index.js
+++ b/app/features/navbar/components/index.js
@@ -1 +1,2 @@
+export { default as Logo } from './Logo';
 export { default as Navbar } from './Navbar';
diff --git a/app/features/navbar/index.js b/app/features/navbar/index.js
index 07635cb..da41a84 100644
--- a/app/features/navbar/index.js
+++ b/app/features/navbar/index.js
@@ -1 +1,6 @@
+export * from './actions';
+export * from './actionTypes';
 export * from './components';
+export * from './styled';
+
+export { default as reducer } from './reducer';
diff --git a/app/features/navbar/reducer.js b/app/features/navbar/reducer.js
new file mode 100644
index 0000000..ec0e498
--- /dev/null
+++ b/app/features/navbar/reducer.js
@@ -0,0 +1,39 @@
+// @flow
+
+import type { ComponentType } from 'react';
+
+import { CLOSE_DRAWER, OPEN_DRAWER } from './actionTypes';
+
+type State = {
+    openDrawer: typeof undefined | ComponentType<*>
+};
+
+const DEFAULT_STATE = {
+    openDrawer: undefined
+};
+
+/**
+ * Reduces redux actions for features/settings.
+ *
+ * @param {State} state - Current reduced redux state.
+ * @param {Object} action - Action which was dispatched.
+ * @returns {State} - Updated reduced redux state.
+ */
+export default (state: State = DEFAULT_STATE, action: Object) => {
+    switch (action.type) {
+    case CLOSE_DRAWER:
+        return {
+            ...state,
+            openDrawer: undefined
+        };
+
+    case OPEN_DRAWER:
+        return {
+            ...state,
+            openDrawer: action.drawerComponent
+        };
+
+    default:
+        return state;
+    }
+};
diff --git a/app/features/navbar/styled/DrawerContainer.js b/app/features/navbar/styled/DrawerContainer.js
new file mode 100644
index 0000000..8f4a2dc
--- /dev/null
+++ b/app/features/navbar/styled/DrawerContainer.js
@@ -0,0 +1,8 @@
+// @flow
+
+import styled from 'styled-components';
+
+export default styled.div`
+    margin-right: 68px;
+    padding: 0 8px;
+`;
diff --git a/app/features/navbar/styled/index.js b/app/features/navbar/styled/index.js
new file mode 100644
index 0000000..065175a
--- /dev/null
+++ b/app/features/navbar/styled/index.js
@@ -0,0 +1 @@
+export { default as DrawerContainer } from './DrawerContainer';