cluedin-widget/core/components/navigations/CluedInLogoMenu.jsx

This project contains all the pages needed for browsing entities and searching them. The aim is to replace the CluedIn.Webapp project with this one when all the pages ( including the Admin page ) will be ported to REACT.

import React, { PropTypes } from 'react';
import radium from 'radium';
import NavigationIcon from 'material-ui/svg-icons/navigation/menu';
import IconButton from 'material-ui/IconButton';
import { white } from '../../styles/colors';
import FlatButton from 'material-ui/FlatButton';
import { Link } from 'react-router';
import { FormattedMessage } from 'react-intl';

const CluedInLogoMenuStyle = {
  menu: {
    width: '225px',
  },
  menuList: {
    float: 'left',
    position: 'relative',
  },
  mainLinkHover: {
    ':hover': {
      backgroundColor: '#08c6cf',
    },
  },
  link: {
    color: '#fff',
    position: 'relative',
    display: 'block',
    textDecoration: 'none',
    height: '48px',
  },
  notifStyle: {
    width: '16px',
    color: 'white',
    position: 'absolute',
    height: '18px',
    background: 'red',
    fontSize: '14px',
    borderRadius: '18px',
    lineHeight: '18px',
    right: '6px',
    fontWeight: 'bold',
    top: '6px',
  },
};

const CluedInLogoMenu = (props) => {
  const {
    onMenuClick,
    currentOrganization,
    showNotification,
  } = props;

  const LoadingLabelMessage = <FormattedMessage id="CluedInLogoMeny.Loading"/>;
  const name = currentOrganization ? currentOrganization.OrganizationName : LoadingLabelMessage;
  let notifContent;

  if (showNotification) {
    notifContent = (
      <div style={CluedInLogoMenuStyle.notifStyle}>!</div>
    );
  }

  const labelStyle = {
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    maxWidth: '160px',
    display: 'inline-block',
    margin: 0,
  };

  return (
    <div style={[CluedInLogoMenuStyle.Menu]}>
      <ul>
        <li
          key="menuInisght"
          style={[CluedInLogoMenuStyle.menuList, CluedInLogoMenuStyle.mainLinkHover]}
        >
          <IconButton onClick={onMenuClick}>
            {notifContent}
            <NavigationIcon color={white}/>
          </IconButton>
        </li>
        <li
          key="home"
          style={[CluedInLogoMenuStyle.menuList, CluedInLogoMenuStyle.mainLinkHover]}
        >
          <Link style={CluedInLogoMenuStyle.link} to="/">
            <FlatButton
              style={{ color: white, lineHeight: '48px', height: '48px' }}
              labelStyle={labelStyle}
              label={name}
            />
          </Link>
        </li>
      </ul>
    </div>
  );
};

CluedInLogoMenu.propTypes = {
  onMenuClick: PropTypes.func,
  currentOrganization: PropTypes.object,
  showNotification: PropTypes.bool,
};

export default radium(CluedInLogoMenu);