sigmasternchen/tagify
1
0
Fork 0
mirror of https://github.com/sigmasternchen/tagify synced 2025-03-16 23:58:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added styling for sidebar

Browse source
This commit is contained in:
overflowerror 2021-10-28 20:29:31 +02:00
parent 702a6a29e4
commit 032de89f08
2 changed files with 27 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/Sidebar/Sidebar.css
View file

@ -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;
}

12
src/components/Sidebar/index.tsx
View file

@ -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>
))
}