BT4 + header migration (wip)

client/main.js

@@ -1,3 +1,3 @@
-import '../imports/startup/client';/*
+import '../imports/startup/client';
-import '../node_modules/daemonite-material/js/material.min.js';
+/* import '../node_modules/daemonite-material/js/material.min.js';
-import '../node_modules/daemonite-material/css/material.css';*/
+ * import '../node_modules/daemonite-material/css/material.css';*/

imports/ui/components/AuthenticatedNavigation/AuthenticatedNavigation.js

@@ -2,22 +2,35 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { LinkContainer } from 'react-router-bootstrap';
-import { Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
+import { Nav, NavDropdown, MenuItem } from 'react-bootstrap';
+/*
+   FIXME:
+   navitem needs a nav-link class but does not works
+   https://github.com/react-bootstrap/react-bootstrap/issues/2644
+   className="nav-link"
+   so we did a custom NavLink
+ */
+import NavItem from '../NavItem/NavItem';
 import { Meteor } from 'meteor/meteor';
 
 const AuthenticatedNavigation = ({ name, history }) => (
   <div>
     {/*
-    https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Nav.js
+    https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Nav.js */}
     <Nav>
-      <LinkContainer to="/documents">
+      <LinkContainer className="nav-item" anchorClassName="nav-link" to="/documents">
-        <NavItem href="/documents">Documents</NavItem>
+        <NavItem eventKey={1} href="/documents">Documents</NavItem>
       </LinkContainer>
-</Nav> */}
+    </Nav>
-    <div title={name} className="dropdown-menu dropdown-menu-right">
+    <Nav pullRight>
-      <a className="dropdown-item" href="/profile">Profile</a>
+      <NavDropdown eventKey={2} title={name} id="user-nav-dropdown">
-      <a className="dropdown-item" onClick={() => history.push('/logout')} >Logout</a>
+        <LinkContainer className="nav-item" anchorClassName="nav-link" to="/profile">
-    </div>
+          <NavItem eventKey={2.1} href="/profile">Profile</NavItem>
+        </LinkContainer>
+        <MenuItem divider />x
+        <MenuItem eventKey={2.2} onClick={() => history.push('/logout')}>Logout</MenuItem>
+      </NavDropdown>
+    </Nav>
   </div>
 );
 

imports/ui/components/NavItem/NavItem.js

@@ -0,0 +1,79 @@
+import classNames from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { SafeAnchor } from 'react-bootstrap';
+import createChainedFunction from 'react-bootstrap/lib/utils/createChainedFunction';
+
+const propTypes = {
+  active: PropTypes.bool,
+  disabled: PropTypes.bool,
+  role: PropTypes.string,
+  href: PropTypes.string,
+  onClick: PropTypes.func,
+  onSelect: PropTypes.func,
+  eventKey: PropTypes.any,
+};
+
+const defaultProps = {
+  active: false,
+  disabled: false,
+};
+
+class NavItem extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(e) {
+    if (this.props.onSelect) {
+      e.preventDefault();
+
+      if (!this.props.disabled) {
+        this.props.onSelect(this.props.eventKey, e);
+      }
+    }
+  }
+
+  render() {
+    const { active, disabled, onClick, className, anchorClassName, style, ...props } =
+      this.props;
+
+    delete props.onSelect;
+    delete props.eventKey;
+
+    // These are injected down by `<Nav>` for building `<SubNav>`s.
+    delete props.activeKey;
+    delete props.activeHref;
+
+    if (!props.role) {
+      if (props.href === '#') {
+        props.role = 'button';
+      }
+    } else if (props.role === 'tab') {
+      props['aria-selected'] = active;
+    }
+
+    return (
+      <li
+        role="presentation"
+        className={classNames(className, { active, disabled })}
+        style={style}
+      >
+        <SafeAnchor
+          {...props}
+            disabled={disabled}
+            className={anchorClassName}
+          onClick={createChainedFunction(onClick, this.handleClick)}
+        />
+      </li>
+    );
+  }
+}
+
+NavItem.propTypes = propTypes;
+NavItem.defaultProps = defaultProps;
+
+export default NavItem;

imports/ui/components/Navigation/Navigation.js

@@ -9,21 +9,23 @@ import { translate } from 'react-i18next';
 import './Navigation.scss';
 
 const Navigation = props => (
-
+  <Navbar bsClass="navbar navbar-light">
-  <Navbar>
+    {/* https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Navbar.js */}
     <Navbar.Header>
       <Navbar.Brand>
-        <Link to="/">{props.t('AppName')}</Link>
+        <Link to="/">{props.t('Inicio')}</Link>
       </Navbar.Brand>
-      <Navbar.Toggle />
+      {/* <Navbar.Toggle/> */}
+      <button className="sr-only navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span className="navbar-toggler-icon"></span>
+      </button>
     </Navbar.Header>
     <Navbar.Collapse>
       {!props.authenticated ? <PublicNavigation /> : <AuthenticatedNavigation {...props} />}
-     </Navbar.Collapse>
+    </Navbar.Collapse>
-   </Navbar>
+  </Navbar>
 );
 
-
 Navigation.defaultProps = {
   name: '',
 };

imports/ui/components/PublicNavigation/PublicNavigation.js

@@ -1,12 +1,24 @@
 import React from 'react';
 import { LinkContainer } from 'react-router-bootstrap';
-import { Nav, NavItem } from 'react-bootstrap';
+import { Nav } from 'react-bootstrap';
+/*
+   FIXME:
+   navitem needs a nav-link class but does not works
+   https://github.com/react-bootstrap/react-bootstrap/issues/2644
+   className="nav-link"
+   so we did a custom NavLink
+ */
+import NavItem from '../NavItem/NavItem';
 
 const PublicNavigation = () => (
-  <div className="dropdown-menu dropdown-menu-right">
+  <Nav pullRight>
-    <a className="dropdown-item" href="/signup">Sign Up</a>
+    <LinkContainer className="nav-item" anchorClassName="nav-link" to="/signup">
-    <a className="dropdown-item" href="/login">Log In</a>
+      <NavItem eventKey={1} href="/signup">Sign Up</NavItem>
-  </div>
+    </LinkContainer>
+    <LinkContainer className="nav-item" anchorClassName="nav-link" to="/login">
+      <NavItem eventKey={2} href="/login">Log In</NavItem>
+    </LinkContainer>
+  </Nav>
 );
 
 export default PublicNavigation;