Initial saved items

src/newsreader/js/pages/homepage/components/sidebar/CategoryItem.js

@@ -26,7 +26,9 @@ class CategoryItem extends React.Component {
   render() {
     const chevronClass = this.state.open ? 'fas fa-chevron-down' : 'fas fa-chevron-right';
     const selected = isSelected(this.props.category, this.props.selected, CATEGORY_TYPE);
-    const className = selected ? 'category category--selected' : 'category';
+    const className = selected
+      ? 'sidebar__container sidebar__container--selected'
+      : 'sidebar__container';
 
     const ruleItems = this.props.rules.map(rule => {
       return <RuleItem key={rule.id} rule={rule} selected={this.props.selected} />;
@@ -35,13 +37,13 @@ class CategoryItem extends React.Component {
     return (
       <li className="sidebar__item">
         <div className={className}>
-          <div className="category__menu" onClick={() => this.toggleRules()}>
+          <span className="sidebar__icon" onClick={() => this.toggleRules()}>
             <i className={chevronClass} />
-          </div>
+          </span>
 
-          <div className="category__info" onClick={() => this.handleSelect()}>
-            <span className="category__name">{this.props.category.name}</span>
-            <span className="badge category__badge">{this.props.category.unread}</span>
+          <div className="sidebar__text" onClick={() => this.handleSelect()}>
+            <span>{this.props.category.name}</span>
+            <span className="badge">{this.props.category.unread}</span>
           </div>
         </div>
 

src/newsreader/js/pages/homepage/components/sidebar/SavedItem.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+class SavedItem extends React.Component {
+  render() {
+    return (
+      <li className="sidebar__item">
+        <div className="sidebar__container">
+          <span className="sidebar__icon saved-icon" />
+          <div className="sidebar__text">
+            <span>Saved posts</span>
+          </div>
+        </div>
+      </li>
+    );
+  }
+}
+
+export default connect()(SavedItem);

src/newsreader/js/pages/homepage/components/sidebar/Sidebar.js

@@ -6,12 +6,13 @@ import { filterCategories, filterRules } from './filters.js';
 
 import LoadingIndicator from '../../../../components/LoadingIndicator.js';
 import CategoryItem from './CategoryItem.js';
+import SavedItem from './SavedItem.js';
 import ReadButton from './ReadButton.js';
 
 // TODO: show empty category message
 class Sidebar extends React.Component {
   render() {
-    const items = this.props.categories.items.map(category => {
+    const categoryItems = this.props.categories.items.map(category => {
       const rules = this.props.rules.items.filter(rule => {
         return rule.category === category.id;
       });
@@ -32,7 +33,10 @@ class Sidebar extends React.Component {
           <LoadingIndicator />
         )}
 
-        <ul className="sidebar__nav">{items}</ul>
+        <ul className="sidebar__nav">
+          <SavedItem />
+          {categoryItems}
+        </ul>
 
         {!isEqual(this.props.selected.item, {}) && <ReadButton />}
       </div>

src/newsreader/scss/components/category/_category.scss

@@ -1,41 +0,0 @@
-.category {
-  display: flex;
-  align-items: center;
-
-  padding: 5px;
-
-  &__info {
-    display: flex;
-    justify-content: space-between;
-
-    width: 100%;
-    padding: 0 0 0 20px;
-
-    overflow: hidden;
-    white-space: nowrap;
-
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  &__name {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  &__menu {
-    display: flex;
-    align-items: center;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  &--selected, &:hover {
-    background-color: var(--lighter-accent-color);
-  }
-}

src/newsreader/scss/components/category/index.scss

@@ -1 +0,0 @@
-@import './category';

src/newsreader/scss/components/index.scss

@@ -21,7 +21,6 @@
 @import './integrations/index';
 
 @import './rules/index';
-@import './category/index';
 
 @import './post/index';
 @import './post-message/index';

src/newsreader/scss/components/sidebar/_sidebar.scss

@@ -16,8 +16,37 @@
 
     list-style: none;
 
-    &__item {
-      padding: 2px 10px 5px 10px;
+  }
+
+  &__container {
+    display: flex;
+    align-items: center;
+
+    padding: 5px;
+
+    &--selected, &:hover {
+      background-color: var(--lighter-accent-color);
+    }
+  }
+
+  &__icon {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  &__text {
+    display: flex;
+    justify-content: space-between;
+
+    width: 100%;
+    padding: 0 0 0 20px;
+
+    overflow: hidden;
+    white-space: nowrap;
+
+    &:hover {
+      cursor: pointer;
     }
   }