work on menu highlighing (not working yet)

This commit is contained in:
seotts 2020-09-03 11:11:43 -04:00 committed by Karishma Chadha
parent ff24f74fca
commit 17cb454036

View file

@ -1,7 +1,7 @@
// const bindAll = require('lodash.bindall');
const bindAll = require('lodash.bindall');
const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
const FormattedMessage = require('react-intl').FormattedMessage;
const injectIntl = require('react-intl').injectIntl;
// const injectIntl = require('react-intl').injectIntl;
// const intlShape = require('react-intl').intlShape;
const React = require('react');
@ -17,7 +17,31 @@ const render = require('../../lib/render.jsx');
require('./annual-report.scss');
const AnnualReport = () => (
class AnnualReport extends React.Component {
constructor () {
super();
this.missionRef = null;
bindAll(this, [
'scrollTo',
'setMissionRef'
]);
}
scrollTo (element) {
console.log(element);
element.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
setMissionRef (ref) {
this.missionRef = ref;
}
render () {
return (
<div>
<div className="subnavigation">
<FlexRow className="inner">
@ -29,7 +53,7 @@ const AnnualReport = () => (
</a>
<a
className="link"
href="/annual-report#mission"
onClick={() => this.scrollTo(this.missionRef.current)}
>
<FormattedMessage id="annualReport.subnavMission" />
</a>
@ -96,6 +120,7 @@ const AnnualReport = () => (
<div
className="mission"
id="mission"
ref={this.setMissionRef}
>
<div className="inner">
</div>
@ -541,6 +566,8 @@ const AnnualReport = () => (
</div>
</div>
);
}
}
render(
<Page><AnnualReport /></Page>, document.getElementById('app')