init invite people

frontend/src/components/main-side-nav.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@reach/router';
 import Group from '../models/group';
-import { gettext, siteRoot, enableWiki, canAddRepo, canGenerateShareLink, canGenerateUploadLink } from '../utils/constants';
+import { gettext, siteRoot, enableWiki, canAddRepo, canGenerateShareLink, canGenerateUploadLink, canInvitePeople } from '../utils/constants';
 import { seafileAPI } from '../utils/seafile-api';
 import { Badge } from 'reactstrap';
 
@@ -223,6 +223,14 @@ class MainSideNav extends React.Component {
                 <span className="nav-text">{gettext('Linked Devices')}</span>
               </Link>
             </li>
+            {canInvitePeople &&
+                <li className="nav-item">
+                <Link className={`nav-link ellipsis ${this.getActiveClass('invitations')}`} to={siteRoot + 'invitations/'} title={gettext('Invite People')} onClick={() => this.tabItemClick('invitations')}>
+                  <span className="sf2-icon-invite" aria-hidden="true"></span>
+                  <span className="nav-text">{gettext('Invite People')}</span>
+                </Link>
+              </li>
+            }
             <li className="nav-item flex-column" id="share-admin-nav">
               <a className="nav-link ellipsis" title={gettext('Share Admin')} onClick={this.shExtend}>
                 <span className={`toggle-icon float-right fas ${this.state.sharedExtended ? 'fa-caret-down':'fa-caret-left'}`} aria-hidden="true"></span>

frontend/src/components/toolbar/invitations-toolbar.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MediaQuery from 'react-responsive';
+import CommonToolbar from './common-toolbar';
+import { Button } from 'reactstrap';
+import { gettext } from '../../utils/constants';
+
+const propTypes = {
+  onShowSidePanel: PropTypes.func.isRequired,
+  onSearchedClick: PropTypes.func.isRequired,
+};
+
+class InvitationsToolbar extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let { onShowSidePanel, onSearchedClick } = this.props;
+    return (
+      <div className="main-panel-north border-left-show">
+        <div className="cur-view-toolbar">
+          <span title="Side Nav Menu" onClick={onShowSidePanel}
+            className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none">
+          </span>
+
+          <MediaQuery query="(min-width: 768px)">
+            <div className="operation">
+              <Button color="btn btn-secondary operation-item" >
+                <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Invite People')}
+              </Button>
+            </div>
+          </MediaQuery>
+          <MediaQuery query="(max-width: 768px)">
+            <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('Invite People')}></span>
+          </MediaQuery>
+        </div>
+        <CommonToolbar searchPlaceholder={this.props.searchPlaceholder} onSearchedClick={onSearchedClick}/>
+      </div>
+    );
+  }
+}
+
+
+export default InvitationsToolbar;