Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SideBar with Heading
import React from 'react';
import {SideBarItem} from './SideBarItem/SideBarItem';
import {Menu, Divider} from 'semantic-ui-react';
import './SideBar.scss';
import {SideBarHeader} from './SideBarHeader/SideBarHeader';
export class SideBar extends React.Component {
render() {
return (
<Menu borderless vertical stackable fixed='left' className='side-nav'>
<SideBarItem highlight={true} label='Home' icon='home'/>
<SideBarItem label='Trending' icon='fire'/>
<SideBarItem label='Followers' icon='spy'/>
<Divider/>
<SideBarHeader title='Library'/>
<SideBarItem label='History' icon='history'/>
<SideBarItem label='Watch later' icon='clock'/>
<SideBarItem label='Liked videos' icon='thumbs up'/>
<Divider/>
<SideBarHeader title='More from Youtube'/>
<SideBarItem label='Movies and Shows' icon='film'/>
<Divider/>
<SideBarItem label='Report history' icon='flag'/>
<SideBarItem label='Help' icon='help circle'/>
<SideBarItem label='Send feedback' icon='comment'/>
<Divider/>
</Menu>
);
}
}
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.