-
this.toggleRules()}>
+ this.toggleRules()}>
-
+
-
this.handleSelect()}>
-
{this.props.category.name}
-
{this.props.category.unread}
+
this.handleSelect()}>
+ {this.props.category.name}
+ {this.props.category.unread}
diff --git a/src/newsreader/js/pages/homepage/components/sidebar/SavedItem.js b/src/newsreader/js/pages/homepage/components/sidebar/SavedItem.js
new file mode 100644
index 0000000..96c4573
--- /dev/null
+++ b/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 (
+
+
+
+ );
+ }
+}
+
+export default connect()(SavedItem);
diff --git a/src/newsreader/js/pages/homepage/components/sidebar/Sidebar.js b/src/newsreader/js/pages/homepage/components/sidebar/Sidebar.js
index 3780afb..706e90b 100644
--- a/src/newsreader/js/pages/homepage/components/sidebar/Sidebar.js
+++ b/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 {
)}
-
+
{!isEqual(this.props.selected.item, {}) &&
}
diff --git a/src/newsreader/scss/components/category/_category.scss b/src/newsreader/scss/components/category/_category.scss
deleted file mode 100644
index 8f5e109..0000000
--- a/src/newsreader/scss/components/category/_category.scss
+++ /dev/null
@@ -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);
- }
-}
diff --git a/src/newsreader/scss/components/category/index.scss b/src/newsreader/scss/components/category/index.scss
deleted file mode 100644
index d434e4f..0000000
--- a/src/newsreader/scss/components/category/index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import './category';
diff --git a/src/newsreader/scss/components/index.scss b/src/newsreader/scss/components/index.scss
index 0240ee1..d0419ac 100644
--- a/src/newsreader/scss/components/index.scss
+++ b/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';
diff --git a/src/newsreader/scss/components/sidebar/_sidebar.scss b/src/newsreader/scss/components/sidebar/_sidebar.scss
index c70594a..1650a40 100644
--- a/src/newsreader/scss/components/sidebar/_sidebar.scss
+++ b/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;
}
}