react-antd-dashboard/build/layout/HeaderDropdown/index.js

React dashboard layout solution created using AntD and permission based navigation. Supports theming with Less, parameterized routes and private routing. Contains useful components for dashboard application.

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import { Dropdown, Menu, Avatar } from "antd";
import React from "react";
import './index.css';
import { UserOutlined } from '@ant-design/icons';

const menuHeaderDropdown = menuItems => {
  const onClick = ({
    key
  }) => {
    const item = menuItems.find(i => i.key === key);
    if (item && item.callback) item.callback();
  };

  return /*#__PURE__*/React.createElement(Menu, {
    onClick: onClick,
    selectedKeys: []
  }, menuItems.map(item => {
    const {
      key,
      icon,
      value
    } = item;
    return /*#__PURE__*/React.createElement(Menu.Item, {
      key: key
    }, icon, /*#__PURE__*/React.createElement("span", null, value));
  }));
};

const HeaderDropdown = props => {
  const {
    user,
    menuItems
  } = props;
  if (!user) return null;
  const {
    firstName,
    lastName,
    avatar
  } = user;
  return /*#__PURE__*/React.createElement(Dropdown, _extends({
    overlay: menuHeaderDropdown(menuItems)
  }, props), /*#__PURE__*/React.createElement("div", {
    className: "header-container"
  }, avatar ? /*#__PURE__*/React.createElement(Avatar, {
    size: "small",
    src: avatar,
    style: {
      marginRight: 4
    }
  }) : /*#__PURE__*/React.createElement(Avatar, {
    size: "small",
    style: {
      marginRight: 4
    },
    icon: /*#__PURE__*/React.createElement(UserOutlined, null)
  }), /*#__PURE__*/React.createElement("span", null, firstName, " ", lastName)));
};

;
export default HeaderDropdown;