Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
SideBarItem for youtube-react app
import React from 'react';
import {Icon, Menu} from "semantic-ui-react";
import './SideBarItem.scss';
export function SideBarItem(props) {
// React will ignore custom boolean attributes, therefore we pass a string
// we use this attribute in our SCSS for styling
const highlight = props.highlight ? 'highlight-item' : null;
return (
<Menu.Item className={['sidebar-item', highlight].join(' ')}>
<div className='sidebar-item-alignment-container'>
<span><Icon size='large' name={props.icon}/> </span>
.sidebar-item {
background: #f5f5f5;
span {
i.icon {
margin-right: 20px;
color: #888888;
&.highlight-item {
span {
font-weight: 600;
i.icon {
color: #ff0002;
.sidebar-item-alignment-container {
display: flex;
align-items: center;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.