mirror of
https://github.com/sigmasternchen/tagify
synced 2025-03-14 22:58:55 +00:00
added styling for sidebar
This commit is contained in:
parent
702a6a29e4
commit
032de89f08
2 changed files with 27 additions and 5 deletions
|
@ -3,4 +3,24 @@
|
|||
width: 300px;
|
||||
height: 100%;
|
||||
background-color: #4BD5F2;
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar li {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.sidebar li:hover {
|
||||
background-color: #0B95a2;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background-color: #528AD9;
|
||||
}
|
|
@ -11,14 +11,16 @@ export type SidebarProps = {
|
|||
const Sidebar: FunctionComponent<SidebarProps> = ({countedTags, selected, onSelect}) => {
|
||||
return (
|
||||
<div className="sidebar">
|
||||
<h2>Tags</h2>
|
||||
<ul>
|
||||
{
|
||||
countedTags.map(t => (
|
||||
<li key={t.name}>
|
||||
{ selected.indexOf(t.name) >= 0 && "#" }
|
||||
<a onClick={() => onSelect(t.name)}>
|
||||
{t.name} ({t.count})
|
||||
</a>
|
||||
<li
|
||||
key={t.name}
|
||||
className={selected.indexOf(t.name) >= 0 ? "selected" : ""}
|
||||
onClick={() => onSelect(t.name)}
|
||||
>
|
||||
{t.name} ({t.count})
|
||||
</li>
|
||||
))
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue