Fix Filters CSS and add a clear filters button
This commit is contained in:
parent
089ef5f9cc
commit
f9bbb2c07d
|
@ -8,7 +8,7 @@
|
|||
|
||||
.filters {
|
||||
width: 10%;
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
align-self: flex-start;
|
||||
top: 200px;
|
||||
right: 10%;
|
||||
|
|
|
@ -17,7 +17,7 @@ import {
|
|||
Typography
|
||||
} from "@material-ui/core";
|
||||
import { red } from "@material-ui/core/colors";
|
||||
import { AccountCircle, Favorite, Link as LinkIcon } from "@material-ui/icons";
|
||||
import { AccountCircle, Favorite, Link as LinkIcon, Delete } from "@material-ui/icons";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import NavBar from "./shared/NavBar";
|
||||
|
||||
|
@ -97,9 +97,6 @@ function App() {
|
|||
}
|
||||
|
||||
function toggleCategory(category) {
|
||||
console.log(category);
|
||||
console.log(categories);
|
||||
console.log(categories.includes(category));
|
||||
if (categories.includes(category))
|
||||
setCategories(categories.filter(i => i !== category));
|
||||
else
|
||||
|
@ -115,6 +112,7 @@ function App() {
|
|||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
return (<>
|
||||
<NavBar>
|
||||
<div>
|
||||
|
@ -154,8 +152,13 @@ function App() {
|
|||
{visibleFeeds.map(feed => <FeedCard key={feed.id} feed={feed} />)}
|
||||
</div>
|
||||
<div className="filters">
|
||||
<Typography variant="h5" component="p">Filters</Typography>
|
||||
{feedCategories.map(category => (
|
||||
<div style={{display: "flex", justifyContent: "space-between"}}>
|
||||
<Typography variant="h5" component="p">Filters</Typography>
|
||||
<IconButton style={{color: red.A200}} onClick={() => setCategories([])}>
|
||||
<Delete />
|
||||
</IconButton>
|
||||
</div>
|
||||
{feedCategories.sort().map(category => (
|
||||
<FormControlLabel
|
||||
key={category}
|
||||
control={
|
||||
|
|
Loading…
Reference in New Issue