Adding some navigation items from #262 to the getting started screen

4 files changed, 83 insertions, 6 deletions

diff --git a/app/assets/javascripts/components/features/getting_started/index.jsx b/app/assets/javascripts/components/features/getting_started/index.jsx
index 5a9c4db89..bff75f86f 100644
--- a/app/assets/javascripts/components/features/getting_started/index.jsx
+++ b/app/assets/javascripts/components/features/getting_started/index.jsx
@@ -1,12 +1,40 @@
 import Column from '../ui/components/column';
+import ColumnLink from '../ui/components/column_link';
 import { Link } from 'react-router';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { connect } from 'react-redux';
 
-const GettingStarted = () => {
+const messages = defineMessages({
+  heading: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
+  public_timeline: { id: 'navigation_bar.public_timeline', defaultMessage: 'Public timeline' },
+  settings: { id: 'navigation_bar.settings', defaultMessage: 'Settings' }
+});
+
+const mapStateToProps = state => ({
+  me: state.getIn(['meta', 'me'])
+});
+
+const hamburgerStyle = {
+  background: '#373b4a',
+  color: '#fff',
+  fontSize: '16px',
+  padding: '15px',
+  position: 'absolute',
+  right: '0',
+  top: '-48px',
+  cursor: 'default'
+};
+
+const GettingStarted = ({ intl, me }) => {
   return (
-    <Column>
+    <Column icon='asterisk' heading={intl.formatMessage(messages.heading)}>
+      <div style={{ position: 'relative' }}>
+        <div style={hamburgerStyle}><i className='fa fa-bars' /></div>
+        <ColumnLink icon='globe' text={intl.formatMessage(messages.public_timeline)} to='/timelines/public' />
+        <ColumnLink icon='cog' text={intl.formatMessage(messages.settings)} href='/settings/profile' />
+      </div>
+
       <div className='static-content'>
-        <h1><FormattedMessage id='getting_started.heading' defaultMessage='Getting started' /></h1>
         <p><FormattedMessage id='getting_started.about_addressing' defaultMessage='You can follow people if you know their username and the domain they are on by entering an e-mail-esque address into the form at the top of the sidebar.' /></p>
         <p><FormattedMessage id='getting_started.about_shortcuts' defaultMessage='If the target user is on the same domain as you, just the username will work. The same rule applies to mentioning people in statuses.' /></p>
         <p><FormattedMessage id='getting_started.about_developer' defaultMessage='The developer of this project can be followed as Gargron@mastodon.social' /></p>
@@ -15,4 +43,4 @@ const GettingStarted = () => {
   );
 };
 
-export default GettingStarted;
+export default connect(mapStateToProps)(injectIntl(GettingStarted));
diff --git a/app/assets/javascripts/components/features/ui/components/column_link.jsx b/app/assets/javascripts/components/features/ui/components/column_link.jsx
new file mode 100644
index 000000000..a2f7c13a6
--- /dev/null
+++ b/app/assets/javascripts/components/features/ui/components/column_link.jsx
@@ -0,0 +1,41 @@
+import { Link } from 'react-router';
+
+const outerStyle = {
+  display: 'block',
+  padding: '15px',
+  fontSize: '16px',
+  color: '#fff',
+  textDecoration: 'none'
+};
+
+const iconStyle = {
+  display: 'inline-block',
+  marginRight: '5px'
+};
+
+const ColumnLink = ({ icon, text, to, href }) => {
+  if (href) {
+    return (
+      <a href={href} style={outerStyle} className='column-link'>
+        <i className={`fa fa-fw fa-${icon}`} style={iconStyle} />
+        {text}
+      </a>
+    );
+  } else {
+    return (
+      <Link to={to} style={outerStyle} className='column-link'>
+        <i className={`fa fa-fw fa-${icon}`} style={iconStyle} />
+        {text}
+      </Link>
+    );
+  }
+};
+
+ColumnLink.propTypes = {
+  icon: React.PropTypes.string.isRequired,
+  text: React.PropTypes.string.isRequired,
+  to: React.PropTypes.string,
+  href: React.PropTypes.string
+};
+
+export default ColumnLink;
diff --git a/app/assets/javascripts/components/locales/en.jsx b/app/assets/javascripts/components/locales/en.jsx
index d4878f7cd..93369654f 100644
--- a/app/assets/javascripts/components/locales/en.jsx
+++ b/app/assets/javascripts/components/locales/en.jsx
@@ -23,7 +23,7 @@ const en = {
   "account.followers": "Followers",
   "account.follows_you": "Follows you",
   "getting_started.heading": "Getting started",
-  "getting_started.about_addressing": "You can follow people if you know their username and the domain they are on by entering an e-mail-esque address into the form at the top of the sidebar.",
+  "getting_started.about_addressing": "You can follow people if you know their username and the domain they are on by entering an e-mail-esque address into the search form.",
   "getting_started.about_shortcuts": "If the target user is on the same domain as you, just the username will work. The same rule applies to mentioning people in statuses.",
   "getting_started.about_developer": "The developer of this project can be followed as Gargron@mastodon.social",
   "column.home": "Home",
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 3446cfc87..517fcd3f1 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -522,3 +522,11 @@
   left: 27px;
   border-color: #2b90d9;
 }
+
+.column-link {
+  background: #373b4a;
+
+  &:hover {
+    background: lighten(#373b4a, 5%);
+  }
+}