diff --git a/src/newsreader/js/pages/homepage/components/sidebar/CategoryItem.js b/src/newsreader/js/pages/homepage/components/sidebar/CategoryItem.js index 505f5d1..5d384db 100644 --- a/src/newsreader/js/pages/homepage/components/sidebar/CategoryItem.js +++ b/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 ; @@ -35,13 +37,13 @@ class CategoryItem extends React.Component { return (
  • -
    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 ( +
  • +
    + +
    + Saved posts +
    +
    +
  • + ); + } +} + +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 { )} -
      {items}
    +
      + + {categoryItems} +
    {!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; } }