From 58cda9cc7fb79ca9df6746de7f9662bc08dc156a Mon Sep 17 00:00:00 2001
From: Stefan Malzner <stefan@adlk.io>
Date: Fri, 13 Oct 2017 12:29:40 +0200
Subject: initial commit

---
 src/components/layout/Sidebar.js | 75 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 src/components/layout/Sidebar.js

(limited to 'src/components/layout/Sidebar.js')

diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
new file mode 100644
index 000000000..4aee1ec60
--- /dev/null
+++ b/src/components/layout/Sidebar.js
@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ReactTooltip from 'react-tooltip';
+import { defineMessages, intlShape } from 'react-intl';
+
+import Tabbar from '../services/tabs/Tabbar';
+import { ctrlKey } from '../../environment';
+
+const messages = defineMessages({
+  settings: {
+    id: 'sidebar.settings',
+    defaultMessage: '!!!Settings',
+  },
+});
+
+export default class Sidebar extends Component {
+  static propTypes = {
+    openSettings: PropTypes.func.isRequired,
+    isPremiumUser: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    isPremiumUser: false,
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  state = {
+    tooltipEnabled: true,
+  };
+
+  enableToolTip() {
+    this.setState({ tooltipEnabled: true });
+  }
+
+  disableToolTip() {
+    this.setState({ tooltipEnabled: false });
+  }
+
+  render() {
+    const { openSettings, isPremiumUser } = this.props;
+    const { intl } = this.context;
+    return (
+      <div className="sidebar">
+        <Tabbar
+          {...this.props}
+          enableToolTip={() => this.enableToolTip()}
+          disableToolTip={() => this.disableToolTip()}
+        />
+        <button
+          onClick={openSettings}
+          className="sidebar__settings-button"
+          data-tip={`Settings (${ctrlKey}+,)`}
+        >
+          {isPremiumUser && (
+            <span className="emoji">
+              <img src="./assets/images/emoji/star.png" alt="" />
+            </span>
+          )}
+          <img
+            src="./assets/images/logo.svg"
+            className="sidebar__logo"
+            alt=""
+          />
+          {intl.formatMessage(messages.settings)}
+        </button>
+        {this.state.tooltipEnabled && (
+          <ReactTooltip place="right" type="dark" effect="solid" />
+        )}
+      </div>
+    );
+  }
+}
-- 
cgit v1.2.3-54-g00ecf