Full prototype, including menu and shelf view.

src/Article.js

@@ -1,8 +1,17 @@
 import React, { Component } from 'react';
 import './Article.css';
-import featuredimage from './image-3-medium.jpg';
 
 class Article extends Component {
+  constructor(props) {
+    super(props);
+    this.articleContent = React.createRef();
+  }
+
+  componentDidUpdate() {
+    console.log(this._div);
+    this.articleContent.current.scrollTop = 0;
+  }
+
   getDatePublished() {
     return (
       new Intl.DateTimeFormat('en-US', {
@@ -14,11 +23,11 @@ class Article extends Component {
   }
 
   render() {
-    const toggledClass = this.props.expanded ? 'expanded' : 'collapsed';
+    const toggledClass = this.props.isExpanded ? 'expanded' : 'collapsed';
     const image = require(`${this.props.article.featuredImage}`);
     return (
       <div className="c-mobile-article">
-      	<div className={`c-mobile-article__content ${toggledClass}`}>
+      	<div ref={this.articleContent} className={`c-mobile-article__content ${toggledClass}`}>
           <h1 className="c-mobile-article__headline">{this.props.article.headline}</h1>
           <div className="c-mobile-article__info">
             <div className="c-mobile-article__info--left">
@@ -36,8 +45,8 @@ class Article extends Component {
             {this.props.article.content}
           </p>
         </div>
-      	{this.props.expanded ? '' : (<div id="gradient"></div>)}
-      	{this.props.expanded ? '' : (<button onClick={() => this.props.onClick()}>Read full article</button>)}
+      	{this.props.isExpanded ? '' : (<div id="gradient"></div>)}
+      	{this.props.isExpanded ? '' : (<button onClick={() => this.props.onClick()}>Read full article</button>)}
       </div>
     );
   }

src/CarouselSlider.css

@@ -1,11 +1,24 @@
 .o-mobile-carouselitem {
-  height: 105px;
+  height: 101px;
   position: relative;
-  max-height: 105px;
+  max-height: 101px;
+}
+
+.o-mobile-carouselitem__content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 95%;
+}
+
+.o-mobile-carouselitem__content.selected {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  border: 1px solid #0070c9;
 }
 
 .o-mobile-carouselitem__image {
-  margin-top: 3px;
   margin-left: auto;
   margin-right: auto;
   max-height: 55px;
@@ -14,7 +27,34 @@
 
 .o-mobile-carouselitem__headline {
   margin-top: 2px;
-
-  font-size: 8.5px;
   text-align: center;
+  font-size: 8px;
+  overflow: hidden;
+  position: relative;
+  line-height: 1.2em;
+  max-height: 3.6em;
+  padding-right: 1em;
+  padding-left: 1em;
+}
+
+.o-mobile-carouselitem__headline span {
+  display: inline-block;
+  text-align: justify;
+}
+
+.o-mobile-carouselitem__headline span:before {
+  content: '...';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
+
+.o-mobile-carouselitem__headline span:after {
+  content: '';
+  position: absolute;
+  right: 0;
+  width: 1em;
+  height: 1em;
+  margin-top: 0.2em;
+  background: white;
 }

src/CarouselSlider.js

@@ -5,15 +5,18 @@ import './CarouselSlider.css'
 class CarouselItem extends Component {
   render() {
     const { item, ...props } = this.props;
+    const status = this.props.isSelected ? 'selected' : 'notselected';
     var image = require(`${item.featuredImage}`);
     console.log(props);
     return (
       <div className="o-mobile-carouselitem" onClick={props.onClick} {...props}>
-        <div>
-          <img src={image} class="o-mobile-carouselitem__image" />
-        </div>
-        <div className="o-mobile-carouselitem__headline">
-          {item.headline}
+        <div className={`o-mobile-carouselitem__content ${status}`}>
+          <div>
+            <img src={image} class="o-mobile-carouselitem__image" />
+          </div>
+          <div className="o-mobile-carouselitem__headline">
+            <span>{item.headline}</span>
+          </div>
         </div>
       </div>
     );
@@ -39,9 +42,12 @@ export default class CarouselSlider extends Component {
     return (
       <div>
         <Slider {...settings}>
-          {this.props.articles.map((item, index) => {
+          {this.props.articles.map((item) => {
+            if (item.articleId === this.props.selected) {
+              return (<CarouselItem isSelected='selected' item={item} onClick={() => this.props.onClick(item.articleId)} />)              
+            }
             console.log('Entered');
-            return (<CarouselItem item={item} onClick={() => this.props.onClick(index)} />)
+            return (<CarouselItem item={item} onClick={() => this.props.onClick(item.articleId)} />)
           })}
         </Slider>
       </div>

src/Footer.js

@@ -9,7 +9,8 @@ class Footer extends Component {
       <div className="c-mobile-footer">
       	<FooterAd />
       	<FooterNav
-      	  onClick={(index) => this.props.onClick(index)}
+      	  onClick={(id) => this.props.onClick(id)}
+          category={this.props.category}
       	  selected={this.props.selected}
       	  articles={this.props.articles} />
       </div>

src/FooterNav.js

@@ -4,16 +4,15 @@ import CarouselSlider from './CarouselSlider';
 
 class FooterNav extends Component {
   render() {
-    let selected = this.props.selected;
     return (
       <div className="c-mobile-footernav">
       	<div class="c-mobile-footernav__category">
-      		{this.props.articles[selected].category.toUpperCase()}
+      		{this.props.category.toUpperCase()}
       	</div>
       	<CarouselSlider
           selected={this.props.selected}
           articles={this.props.articles}
-          onClick={(index) => this.props.onClick(index)} />
+          onClick={(id) => this.props.onClick(id)} />
       </div>
     );
   }

src/Header.css

@@ -7,15 +7,13 @@
   line-height: 54px;
 }
 
-a {
+.c-mobile-header-left {
   height: 54px;
   position: absolute;
   vertical-align: middle;
 
   background: rgba(255, 255, 255, 0.99);
-}
 
-.c-mobile-header-left {
   top: 0;
   bottom: 0;
   left: 0;
@@ -32,6 +30,12 @@ a {
 }
 
 .c-mobile-header-logo {
+  height: 54px;
+  position: absolute;
+  vertical-align: middle;
+
+  background: rgba(255, 255, 255, 0.99);
+
   display: block;
   margin-left: auto;
   margin-right: auto;

src/Header.js

@@ -6,7 +6,7 @@ class Header extends Component {
   render() {
     return (
       <div className="c-mobile-header">
-      	<a class="c-mobile-header-left" href="#"><i class="fa fa-bars"></i></a>
+      	<a class="c-mobile-header-left" onClick={() => this.props.onClick()}><i class="fa fa-bars"></i></a>
       	<a class="c-mobile-header-logo" href="/"><img src={logo} class="c-mobile-header-logo-image" type="text/css" /></a>
       </div>
     );

src/Menu.css

@@ -0,0 +1,22 @@
+.c-mobile-menu.visible {
+  background-color: white;
+  opacity: 0.90;
+  margin-top: 54px;
+  width: 33%;
+  color: #0070c9;
+  position: absolute;
+  height: calc(100vh - 54px);
+  min-height: calc(100vh - 54px);
+  top: 0;
+  z-index: 700;
+  border-right: 1px solid #DADADA;
+}
+
+.c-mobile-menu.invisible {
+  display: none;
+}
+
+.c-mobile-menu__header {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}

src/Menu.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import './Menu.css';
+import MenuListing from './MenuListing';
+import MenuAds from './MenuAds';
+
+class Menu extends Component {
+  render() {
+    const isVisible = this.props.isVisible ? 'visible' : 'invisible';
+    return (
+      <div className="c-mobile-menu">
+        <div className={`c-mobile-menu ${isVisible}`}>
+          <div class="c-mobile-menu__header"><b>Categories</b></div>
+          <MenuListing onClick={(category) => this.props.onClick(category)} />
+          <MenuAds />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Menu;

src/MenuAds.css

@@ -0,0 +1,9 @@
+.c-mobile-menuads {
+  /*height: screen height - header bar - menu header - menu items - margins - ad box borders*/
+  height: calc(100vh - 54px - 38.4px - 227.2px - 45px - 4px);
+}
+
+.c-mobile-menuads__ad {
+  height: 50%;
+  border: 1px solid #DADADA;
+}

src/MenuAds.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import './MenuAds.css';
+
+class MenuAds extends Component {
+  render() {
+    return (
+      <div className="c-mobile-menuads">
+        <div class="c-mobile-menuads__ad">
+          Ad #1
+        </div>
+        <div class="c-mobile-menuads__ad">
+          Ad #2
+        </div>
+      </div>
+    );
+  }
+}
+
+export default MenuAds;

src/MenuItem.css

@@ -0,0 +1,12 @@
+.c-mobile-menuitem {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  background-color: #0070c9;
+  font-size: 16px;
+  color: white;
+  text-align: center;
+}

src/MenuItem.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import './MenuItem.css';
+
+class MenuItem extends Component {
+  render() {
+    return (
+      <div className="c-mobile-menuitem" onClick={() => this.props.onClick()}>
+      	<strong>{this.props.category}</strong>
+      </div>
+    );
+  }
+}
+
+export default MenuItem;

src/MenuListing.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import './MenuListing.css';
+import MenuItem from './MenuItem';
+
+class MenuListing extends Component {
+
+  generateMenuItems() {
+    return (
+      <div>
+        {this.renderMenuItem('News')}
+        {this.renderMenuItem('Culture')}
+        {this.renderMenuItem('Features')}
+        {this.renderMenuItem('Opinion')}
+        {this.renderMenuItem('Sports')}
+        {this.renderMenuItem('Blog')}
+        {this.renderMenuItem('Science')}
+        {this.renderMenuItem('Events')}
+      </div>
+    );
+  }
+
+  renderMenuItem(category) {
+    return (
+      <MenuItem category={category} onClick={() => this.props.onClick(category)} />
+    );
+  }
+
+  render() {
+    return (
+      <div className="MenuListing">
+        {this.generateMenuItems()}
+      </div>
+    );
+  }
+}
+
+export default MenuListing;