Files (#5881)

* [side nav] redesigned it: added a new item 'Files', and made 'My Libraries' and some other items as its sub nav items

* ['Files'] added new page 'Files'(added 'My Libraries' to it)

* ['Files'] added 'Shared with me' to it

* ['Files'] added 'Shared with all' to it

* ['Files'] added 'Shared with groups' to it (removed 'details' for 'department')

frontend/src/components/toolbar/my-libs-toolbar.js

@@ -0,0 +1,91 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { DropdownToggle, Dropdown, DropdownMenu, DropdownItem } from 'reactstrap';
+import { Link, navigate } from '@gatsbyjs/reach-router';
+import { Utils } from '../../utils/utils';
+import { siteRoot, gettext } from '../../utils/constants';
+import ModalPortal from '../modal-portal';
+import CreateRepoDialog from '../dialog/create-repo-dialog';
+
+const propTypes = {
+  onCreateRepo: PropTypes.func.isRequired,
+  moreShown: PropTypes.bool
+};
+
+class MyLibsToolbar extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isCreateRepoDialogOpen: false,
+      isOpen: false,
+    };
+  }
+
+  onCreateRepo = (repo) => {
+    this.props.onCreateRepo(repo);
+    this.onCreateToggle();
+  };
+
+  onCreateToggle = () => {
+    this.setState({isCreateRepoDialogOpen: !this.state.isCreateRepoDialogOpen});
+  };
+
+  toggleMore = () => {
+    this.setState({ isOpen: !this.state.isOpen });
+  };
+
+  onDropdownToggleKeyDown = (e) => {
+    if (e.key == 'Enter' || e.key == 'Space') {
+      this.toggleMore();
+    }
+  };
+
+  visitDeletedviaKey = (e) => {
+    if (e.key == 'Enter' || e.key == 'Space') {
+      navigate(`${siteRoot}my-libs/deleted/`);
+    }
+  };
+
+  render() {
+    const { moreShown = false } = this.props;
+    return (
+      <Fragment>
+        {Utils.isDesktop() ? (
+          <div className="operation">
+            <button className="btn btn-secondary operation-item" title={gettext('New Library')} onClick={this.onCreateToggle}>
+              <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Library')}
+            </button>
+            {moreShown &&
+              <Dropdown isOpen={this.state.isOpen} toggle={this.toggleMore}>
+                <DropdownToggle className='btn btn-secondary operation-item' onKeyDown={this.onDropdownToggleKeyDown}>
+                  {gettext('More')}
+                </DropdownToggle>
+                <DropdownMenu>
+                  <DropdownItem className="link-dropdown-container" onKeyDown={this.visitDeletedviaKey}>
+                    <Link className="link-dropdown-item" to={siteRoot + 'my-libs/deleted/'}>{gettext('Deleted Libraries')}</Link>
+                  </DropdownItem>
+                </DropdownMenu>
+              </Dropdown>
+            }
+          </div>
+        ) : (
+          <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('New Library')} onClick={this.onCreateToggle}></span>
+        )}
+        {this.state.isCreateRepoDialogOpen && (
+          <ModalPortal>
+            <CreateRepoDialog
+              libraryType='mine'
+              onCreateRepo={this.onCreateRepo}
+              onCreateToggle={this.onCreateToggle}
+            />
+          </ModalPortal>
+        )}
+      </Fragment>
+    );
+  }
+}
+
+MyLibsToolbar.propTypes = propTypes;
+
+export default MyLibsToolbar;