Side nav (#6309)

* [user panel] combined 7 commits into 1:

[user side nav] added 'fold/unfold' for the sidebar

[redesign] redesigned toolbar for 'my libs' & 'shared with all'; redesigned 'top bar' for 'help', 'clients' and other pages

[Shared with all] 'share existing libraries' dialog: added the 'close' icon back, enabled clicking outside to close the dialog

['Invite Guest' page] redesigned the toolbar

['Share Admin' - 'Links'] 'Share Links' page: redesigned the toolbar

['Share Admin' - 'Links'] 'Upload Links' page: redesigned the toolbar

cleaned up code

* [user side panel] update

* [user panel] update

* [code style] update: remove an eslint warning

frontend/src/components/header.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Logo from './logo';
+import CommonToolbar from './toolbar/common-toolbar';
+
+const propTypes = {
+  isSidePanelClosed: PropTypes.bool,
+  onCloseSidePanel: PropTypes.func,
+  onShowSidePanel: PropTypes.func,
+  onSearchedClick: PropTypes.func,
+  searchPlaceholder: PropTypes.string,
+  showSearch: PropTypes.bool
+};
+
+class Header extends React.Component {
+
+  render() {
+    const { onShowSidePanel, onSearchedClick, showSearch } = this.props;
+    return (
+      <div id="header" className="d-flex justify-content-between py-2 px-4">
+        <div className={'flex-shrink-0 d-none d-md-flex'}>
+          <Logo onCloseSidePanel={this.props.onCloseSidePanel} />
+        </div>
+        <div className="flex-shrink-0 d-flex flex-fill">
+          <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>
+          </div>
+          <CommonToolbar
+            showSearch={showSearch}
+            searchPlaceholder={this.props.searchPlaceholder}
+            onSearchedClick={onSearchedClick}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+Header.propTypes = propTypes;
+
+export default Header;