How to make simple filter menu in css

Issue #643

Use material icons

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

div#filter-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10%;
    height: 60px;
}

div#filter-items {
    display: inline-flex;
    
    background-color: #fff;
    box-shadow: 0 0 1px 0 rgba(52, 46, 173, 0.25), 0 15px 30px 0 rgba(52, 46, 173, 0.1);
    border-radius: 12px;
    overflow: hidden;
    padding: 10px;
}

a.filter-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100px;
    text-decoration: none;
    padding: 10px;
}

a.filter-item:hover {
    background-color: rgb(239, 240, 241);
    border-radius: 10px;
}

a.filter-item:active {
    transform: scale(0.9);
}

a.filter-item.selected {
    background-color: rgb(239, 240, 241);
    border-radius: 10px;
}

span.material-icons {
	font-family: "Material Icons";
	display: block;
	margin-bottom: 4px;
	font-size: 26px;
	color: mix(#fff, #342ead, 60%);
	transition: 0.25s ease;
}

span.name {
	display: block;
	font-size: 13px;
	color: mix(#fff, #342ead, 70%);
    transition: 0.25s ease;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
}

filters.forEach((filter) => {
    const item = document.createElement('a')
    item.href = '#'
    item.className = 'filter-item'
    container.appendChild(item)

    const icon = document.createElement('span')
    icon.className = 'material-icons'
    icon.innerText = filter.icon
    item.appendChild(icon)

    const name = document.createElement('span')
    name.className = 'name'
    name.innerText = filter.name
    item.appendChild(name)

    item.onclick = () => {
        handleFilterClick(item, filter)
    }
})

Updated at 2020-04-27 22:03:13