at the end of the day, it was inevitable

2022-12-09 08:36:26 -06:00
commit 1218570914
1768 changed files with 887087 additions and 0 deletions
@@ -0,0 +1,84 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { translate } from 'react-i18next';
+import UserSettingsMenu from './UserSettingsMenu';
+import { DropdownToggle, DropdownMenu, Dropdown } from 'reactstrap';
+import { faAngleDown, faUser } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export class HeaderSettings extends React.Component {
+  static propTypes = {
+    userFirstName: PropTypes.string.isRequired,
+    userLastName: PropTypes.string.isRequired
+  };
+
+  state = {
+    isOpen: false
+  };
+
+  toggleUserSettingsDrop = () => {
+    this.setState((prev) => ({ isOpen: !prev.isOpen }));
+  };
+
+  render() {
+    const { userFirstName, userLastName } = this.props;
+    const isRTL = document.documentElement.dir === 'rtl';
+
+    return (
+      <Fragment>
+        <div className="header-btn-lg pr-0">
+          <div className="widget-content p-0">
+            <div className="widget-content-wrapper">
+              <div className="widget-content-left">
+                <Dropdown
+                  isOpen={this.state.isOpen}
+                  toggle={this.toggleUserSettingsDrop}
+                >
+                  <DropdownToggle
+                    color="link"
+                    title="User Profile"
+                    className="d-flex align-items-center p-0"
+                    data-tour="app-header-user-settings"
+                  >
+                    <div className="user-profile">
+                      <FontAwesomeIcon
+                        className="user-profile-icon"
+                        icon={faUser}
+                      />
+                    </div>
+                    {window.outerWidth >= 768 && (
+                      <FontAwesomeIcon
+                        className="ml-2 opacity-8"
+                        icon={faAngleDown}
+                      />
+                    )}
+                  </DropdownToggle>
+                  <DropdownMenu
+                    className={`rm-pointers dropdown-menu-lg${
+                      isRTL ? ' dropdown-menu-left' : ''
+                    }`}
+                  >
+                    <UserSettingsMenu
+                      toggleMenu={this.toggleUserSettingsDrop}
+                      userFirstName={userFirstName}
+                      userLastName={userLastName}
+                    />
+                  </DropdownMenu>
+                </Dropdown>
+              </div>
+              <div className="widget-content-left ml-3 header-user-info">
+                <div className="widget-heading">
+                  {userFirstName + ' ' + userLastName}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+export default translate(['common'], { wait: true })(
+  React.memo(HeaderSettings)
+);