Building a Twitter Sidebar Clone with Material-UI and React
Tags: react, tutorial, javascript
Published: 2021-08-29 19:21:23

_by author [Taminoturoko Briggs]()_

Material-UI is an  open-source React component library for building responsive UI applications. It's a reliable component library that provides React components that can be easily customized to meet our UI development needs.
Material-UI is based on [Google’s Material Design](https://material.io/design/introduction), providing a high-quality digital experience while developing front-end applications.

## Benefits of using Material-UI

- Well-designed responsive components, helping you to focus more on business logic.
- A large community and properly written document.
- Design consistency
- Faster development with ready-made components.

These are just some of the benefits of using Material-UI.

Material-UI also has some drawbacks like:

- Missing components.
- Also, it's not intuitive to use.

## Material-UI usage
To get started with Material-UI, you have to first install the [npm package](https://www.npmjs.com/package/@material-ui/core).
You can do that with this command:


```
// with npm
$ npm install @material-ui/core

// with yarn
$ yarn add @material-ui/core
```


After installation, to start using the components all you have to do is import them.
Here is a quick example of how you can use the Button components.


```javascript
import Button from '@material-ui/core/Button';

function App() {
  return (
    <Button>
      Hello World
    </Button>
  );
}
```


This is really all you need to start using Material UI.

Here are some use cases for Material UI.

- Icons — There are over 1,100+ React material icons ready to use from the [official site](https://material-ui.com/components/material-icons/). There is also an option to change the looks of these icons to be either Filled, Outlined, Rounded, etc.
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ux0ommpsfnr0x5adyb8x.png)



```javascript
import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart'
import AddAPhotoOutlinedIcon from '@material-ui/icons/AddAPhotoOutlined'
import HomeRoundedIcon from '@material-ui/icons/HomeRounded'
import ContactMailTwoToneIcon from '@material-ui/icons/ContactMailTwoTone'
import MailSharpIcon from '@material-ui/icons/MailSharp'

function App(){
   return (
    <div style={{display: 'flex', justifyContent: 'space-evenly', marginTop: 70}}>
      <AddShoppingCartIcon fontSize="large"/>
      <AddAPhotoOutlinedIcon fontSize="large"/>
      <HomeRoundedIcon fontSize="large"/>
      <ContactMailTwoToneIcon fontSize="large"/>
      <MailSharpIcon fontSize="large"/>
    </div>

   )
}
```


Here, we imported the Icons from the material-ui icon package then rendered them in the **App** component. We also passed a **fontSize** prop to the icons with a value “large”, which will make the icons large. This is one of the props that can be used to customize the icons. You can take a look at others in the [Icon API docs](https://material-ui.com/api/icon/).

Note: Before using Material-UI icons, you have to install the icon package which is **@material-ui/icons.**



- Grid systems — With Material UI Grid component, you can create responsive grid layouts.
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xa3moxg4og65bu823ojk.png)



```javascript
import Grid from '@material-ui/core/Grid'
import Paper from '@material-ui/core/Paper'

function App() {
  return (
    <Grid container style={{width: '90%', margin: '0 auto'}}>
      <Grid item xs={12}>
        <Paper style={{height: 100, margin: 10}}></Paper>
      </Grid>
      <Grid item xs={6}>
        <Paper style={{height: 100, margin: 10}}></Paper>
      </Grid>
      <Grid item xs={6}>
        <Paper style={{height: 100, margin: 10}}></Paper>
      </Grid>
    </Grid>
  );
}
```


At the top of the code, we imported the Grid component from the material-ui package, we also imported a Paper component which adds a nice box-shadow to the Grid.
The Grid component behaves like a CSS flexbox. In the first Grid component we rendered, we passed a prop called **container**, this makes it have a flex container behaviour, it defines a flex context for all its direct children. Then, in the other Grid’s which are under the container Grid, we passed an **item** prop to them, this gives them a flex item behaviour, we also passed an **xs** prop which defines the number of grid space the component will use for very small screen and also wider screen if not handled. The highest number of grids is 12 which means the Grid component we passed an **xs** prop of 12 to will occupy the entire screen width. There are also other props that can be used to target other screen sizes like **xl** for very large screens, **md** for middle screens, etc. You can take a look at the others in the [Grid API docs](https://material-ui.com/api/grid/).


- Navigations — Material-UI has different navigation components that you can utilize to meet your navigation requirements, like Bottom Navigation, Breadcrumb, etc. Here is an example of how to use the Bottom Navigation component.


![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v49p7dbdh9joqg7b841j.png)



```javascript
import {useState} from 'react'
import BottomNavigation from '@material-ui/core/BottomNavigation'
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction'
import FolderIcon from '@material-ui/icons/Folder'
import RestoreIcon from '@material-ui/icons/Restore'
import FavoriteIcon from '@material-ui/icons/Favorite'
import LocationOnIcon from '@material-ui/icons/LocationOn'

function App() {
  const [value, setValue] = useState('recents')
  const handleChange = (event, newValue) => {
    setValue(newValue)
  }
  return (
    <BottomNavigation value={value} onChange={handleChange} style={{width: 500, margin: '70px auto'}}>
      <BottomNavigationAction label="Recents" value="recents" icon={<RestoreIcon />} />
      <BottomNavigationAction label="Favorites" value="favorites" icon={<FavoriteIcon />} />
      <BottomNavigationAction label="Nearby" value="nearby" icon={<LocationOnIcon />} />
      <BottomNavigationAction label="Folder" value="folder" icon={<FolderIcon />} />
    </BottomNavigation>
  )
}
```


To create Bottom navigation that displays a nice animation when clicked, this is literally all you have to do. In the above code what we did majorly was setting an initial value to the state, we defined a **handleChange** function that is responsible for changing the state when it is called, we rendered the `ButtomNavigation` component passing it a **value** prop which holds the current value of the state, we also passed an **onChange** event which calls the **handleChange** function, Finally, we used the BottomNavigationAction component to display action for the Bottom Navigation.

## Exploring Material-UI

Using Material-UI to meet your UI needs can really save a lot of time while developing an application. In the previous section, we have seen some cool components that Material-UI provides but that isn’t all, Material-UI has a lot more. Also, there are API references for each Material-UI component which can be a big help when making use of them. In this section, we will cover all of this and we will also cover Material-UI styles.

### Material-UI component
Material-UI components are divided into eight(8) categories.
Here is a list of the categories and the most common of their components:

- Layout — Container, Grid, Box, Image List, etc.
- Inputs — Button, Checkbox, Radio, Text Field, etc.
- Navigation — Button Navigation, Breadcrumbs, Drawer, Link Menu, etc.
- Surfaces — App Bar, Paper, Card, Accordion.
- Feedback — Progress, Dialog, Snackbar, Backdrop.
- Data Display — Avatar, Badge, Chip, Divider, Icons, Material Icons, etc.
- Utils — CSS Baseline, Modal, Click Away Listener, Portal, etc.
- Lab — Alert, Autocomplete, Pagination, Speed Dail, etc.

To view the list of all the components Material-UI provides, go to the [Material-UI](https://material-ui.com/) official site, click on the menu icon, and in the sidebar click on Components.

### Material-UI component API
The component API provides detailed documentation of the props and CSS customization points for Material-UI components.

You will find the component API section in the sidebar of Material-UI’s official site.

### Material-UI styles
Material-UI styles provide an alternative means of styling components, whether or not you are using Material-UI components. It’s not compulsory to use Material-UI’s styling solution since it is interoperable with all the major styling solutions.
There are three APIs you can use to generate and apply Material UI styles, they are:

- Hook API
- Styled components API 
- Higher-order components API

You can read about these APIs and how to get started with them in [Material-UI docs](https://material-ui.com/styles/basics/)

At this point, you know what Material-UI is, its benefits, and more. Now let's build something with it. In the following sections, we will build a Twitter sidebar clone, utilizing Material Icons and button components.


## Getting started

First, let’s create a new React app and also Install the dependencies for our application.

### Creating and setting up React
Type the following command in your terminal to create a new React app


```
$ npx create-react-app twitter_sidebar
```

Here our app's name is **twitter_sidebar,** but you can give it any name you want as long as it's not a restricted npm name. After the installation is complete, in the **src** directory of the **twitter_sidebar** app delete (optional) the following files:


- App.test.js
- logo.svg
- setupTests.js

We deleted these files because they are not relevant to us in our project.

That’s not all, clean up the **App.js** file and let what is left look like this:

*src/App.js*

```javascript
import "./App.css";

function App() {
    return (

    );
}
export default App;
```


Now that we have set up our React app, let's install the dependencies for our app.

### Installing dependencies
In the terminal, make sure you are in the the **twitter_sidebar** directory, then type in the following command to install the dependencies for our app.


```
// with npm
$ npm install @material-ui/core @material-ui/icons

// with yarn
$ yarn add @material-ui/core @material-ui/icons

```

These are the dependencies we need to build Twitter sidebar clone.

## Open Source Session Replay
Debugging a web application in production may be challenging and time-consuming. [OpenReplay](https://github.com/openreplay/openreplay) is an Open-source alternative to FullStory, LogRocket and Hotjar. It allows you to monitor and replay everything your users do and shows how your app behaves for every issue. 
It’s like having your browser’s inspector open while looking over your user’s shoulder.
OpenReplay is the only open-source alternative currently available.

![OpenReplay](https://raw.githubusercontent.com/openreplay/openreplay/main/static/replayer.png)

Happy debugging, for modern frontend teams - [Start monitoring your web app for free](https://github.com/openreplay/openreplay).


## Building Twitter sidebar clone

This is what we are going to build in this section.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69b2hdk6nhn8vtjqjv2e.png)


On the main Twitter sidebar, when you click on the More button, you will see a menu just like the one in our second image. We are going to be building that too. There are a few Twitter icons Material-UI does not have. For does we will improvise with other Material-UI icons. without further ado, let’s begin.

### Building Sidebar component
In the **src** directory, create a **Sidebar.js** file and add the following lines of code:

*src/Sidebar.js*

```javascript
import "./sidebar.css";
import SidebarLink from "./SidebarLink";

function Sidebar(){
  return(
    <div className="sidebar">
        <SidebarLink text="Home" />
        <SidebarLink text="Explore" />
        <SidebarLink text="Notifications" />
        <SidebarLink text="Messages" />
        <SidebarLink text="Bookmarks" />
        <SidebarLink text="Lists" />
        <SidebarLink text="Profile" />
        <SidebarLink text="More" />
    </div>
  );
}

export default Sidebar;

```

The **SidebarLink** component we used represents the options present in the Twitter sidebar clone. We will create this component shortly. But first, let's add the styling for our Sidebar component.
In the **src** directory, create a **sidebar.css** file and add the following CSS style:

*src/sidebar.css*

```css
.sidebar{
  width: 250px;
  min-width: 250px;
  padding: 20px 20px;
  margin: 20px auto 0 auto;
  box-shadow: 0 0 6px hsl(210 14% 90%);
}
```


Now, let's create the **SidebarLink** component.
In the **src** directory, create a **SidebarLink.js** file and add the following lines of code:

*src/SidebarLink.js*

```javascript
import "./sidebarLink.css";

function SidebarLink({ text }) {
  return(
    <div className="link" >
        <h2>{text}</h2>
    </div>
  );
}
export default SidebarLink;

```

Let’s add some styling for this component.
In the **src** directory, create a **sidebarLink.css** file and add the following style:

*src/sidebarLink.css*

```css
.link{
  display: flex;
  align-items: cover;
  cursor: pointer;
  border-radius: 30px;
}
.link:hover{
  background-color: #e8f5fe;
  color: #50b7f5;
  transition: color 100ms ease-out;
}
.link > h2{
  font-weight: 700;
  font-size: 20px;
  margin-right: 20px;
}
```


Let’s see how far we have gone in building the Twitter sidebar clone. But first, we need to render the **Sidebar** component. Open the **App.js** file and add the **Sidebar** component to the return statements.
The App.js file should now look like this:

*src/App.js*

```javascript
import "./App.css"
import Sidebar from "./Sidebar"

function App() {
    return (
      <Sidebar/>
    );
}

export default App
```


Run the development server and open this link: http://localhost:3000/,  you will see a screen like this:

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4v54219107uwe1g7qxw.png)


It’s not yet looking like the Twitter sidebar clone we want to build. Some things are missing, like the icons and button. We will use Material-UI components to handle that.

### Using Material-UI components
We have already installed the dependencies needed to use Material-UI in our app, what we need to do now is to import the needed components and start using them.
First, let’s add the icons.
In the **Sidebar.js** file import the icons from Material-UI like this:

*src/Sidebar.js*

```javascript
...
import HomeIcon from "@material-ui/icons/Home";
import SearchIcon from "@material-ui/icons/Search";
import NotificationsNoneIcon from "@material-ui/icons/NotificationsNone";
import MailOutlineIcon from "@material-ui/icons/MailOutline";
import BookmarkBorderIcon from "@material-ui/icons/BookmarkBorder";
import ListAltIcon from "@material-ui/icons/ListAlt";
import PermIdentityIcon from "@material-ui/icons/PermIdentity";
import MoreHorizIcon from "@material-ui/icons/MoreHoriz";

...
```


Then, pass the icon components as props to **SidebarLink** like this:

*src/Sidebar.js*

```javascript
...
    <SidebarLink text="Home" Icon={HomeIcon} />
    <SidebarLink text="Explore" Icon={SearchIcon} />
    <SidebarLink text="Notifications" Icon={NotificationsNoneIcon} />
    <SidebarLink text="Messages" Icon={MailOutlineIcon} />
    <SidebarLink text="Bookmarks" Icon={BookmarkBorderIcon} />
    <SidebarLink text="Lists" Icon={ListAltIcon} />
    <SidebarLink text="Profile" Icon={PermIdentityIcon} />
    <SidebarLink text="More" Icon={MoreHorizIcon}/>
...
```


Now we need to destructure the icons component from the **SidebarLink** props and also add it to the `<div>` element.
In the **SidebarLink.js** file, modify the **SidebarLink** component to look like this:

*src/SidebarLink.js*

```javascript
...
function SidebarLink({ text, Icon }) {
  return(
    <div className="link">
        <Icon />
        <h2>{text}</h2>
    </div>
  );
}
...
```

Let’s add some styling for the icons.
In the **sidebarLink.css** file, add the following CSS style:

*src/sidebarLink.css*

```css
.link > .MuiSvgIcon-root {
  padding: 20px;
}
```

In our CSS, we styled the **.MuiSvgIcon-root** class name, this is how you style the root element of the Material UI icon component. You will see all the CSS customization points for the icons in the [Material-UI SvgIcon API](https://material-ui.com/api/svg-icon/) documentation.

Now if you start the development server and open the app, it should look like this:

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmy2i52rdeypp1gsxafv.png)


We have successfully added the icons, now what is left is to add the button.
In the **Sidebar.js** file import the Button component from Material-UI as follows:

*src/Sidebar.js*

```javascript
...
import { Button } from "@material-ui/core";

...
```

Now, include the **Button** component before the ending of the `<div>` element of the **Sidebar** component like this:

*src/Sidebar.js*

```javascript
...
<Button id="tweet">
    Tweet
</Button>
...
```

Here, we gave the button and **id** of “tweet”. You might be wondering why we used an **id** instead of a class name. That's because **id** have higher specificity than class, so styling we give the Button will override the style already given to the Button. 

*src/Sidebar.js*

```javascript
function Sidebar(){
  return(
    <div className="sidebar">
        <SidebarLink text="Home" active={true} Icon={HomeIcon} />
        <SidebarLink text="Explore" Icon={SearchIcon} />
        <SidebarLink text="Notifications" Icon={NotificationsNoneIcon} />
        <SidebarLink text="Messages" Icon={MailOutlineIcon} />
        <SidebarLink text="Bookmarks" Icon={BookmarkBorderIcon} />
        <SidebarLink text="Lists" Icon={ListAltIcon} />
        <SidebarLink text="Profile" Icon={PermIdentityIcon} />
        <SidebarLink text="More" Icon={MoreHorizIcon}/>
        <Button id="tweet">
            Tweet
        </Button>
    </div>
  );
}
```

Let’s add some styling to make the Button component look nice.
In the **sidebar.css** file add the following lines of code:

*src/sidebar.css*

```css
#tweet{
  width: 100%;
  height: 50px;
  background-color: hsl(203, 89%, 64%);
  border-radius: 20px;
  color: white;
  font-weight: 700;
  text-transform: inherit;
}
```

Now our Twitter sidebar clone looks like this:

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gakbgxiipgzf125qigf3.png)


If you click on the Tweet button, you will see a nice animation that displays from the point in the button you clicked. This is one cool feature Material-UI adds to all its clickable components.

Now let's add the feature where when you click on the More button a menu will appear. For that, we are going to use Material-UI’s Menu component.
Open the **Sidebar.js** file and add the following imports:

*src/Sidebar.js*

```javascript
...
import {useState} from 'react'
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';

...
```

These are what we need to start using the Menu component. We also need to import the Icons we are going to use for the menu.
Add the following imports to the Sidebar.js file:

*src/Sidebar.js*

```javascript
...
import BookmarkBorderOutlinedIcon from '@material-ui/icons/BookmarkBorderOutlined';
import ListAltOutlinedIcon from '@material-ui/icons/ListAltOutlined';
import ChatOutlinedIcon from '@material-ui/icons/ChatOutlined';
import OfflineBoltOutlinedIcon from '@material-ui/icons/OfflineBoltOutlined';
import PostAddOutlinedIcon from '@material-ui/icons/PostAddOutlined';
import CallMadeOutlinedIcon from '@material-ui/icons/CallMadeOutlined';
import BarChartOutlinedIcon from '@material-ui/icons/BarChartOutlined';
import SettingsOutlinedIcon from '@material-ui/icons/SettingsOutlined';
import HelpOutlineOutlinedIcon from '@material-ui/icons/HelpOutlineOutlined';
import BrushOutlinedIcon from '@material-ui/icons/BrushOutlined';
import AccessibilityNewOutlinedIcon from '@material-ui/icons/AccessibilityNewOutlined';

...
```

Now that we have imported the Menu component, we need to render it in the Sidebar component.
Add this code before the ending of the `<div>` element in the return statement of the Sidebar component:

*src/Sidebar.js*

```javascript
...
<Menu
    id="long-menu"
    open={open}
    onClose={handleClose}
>
</Menu>
...
```

We passed an **id** of “long-menu”, an **open** prop with a variable open. If this variable is equal to true the menu will be open, otherwise, it wont’t. We also passed an **onClose** prop which calls a **handleClose** function, this function will be responsible for closing the Menu.
First, let's create the open variable. This variable will reside in the state, which means we have to create a state for the Sidebar component. We will do that using the useState hook which we imported earlier.

Add this line of code at the beginning of the Sidebar component:

*src/Sidebar.js*

```javascript
...
const [open, setOpen] = useState(false);
...
```

Now, let’s create the **handleClose** function.
Add the following lines after the state we just created:

*src/Sidebar.js*

```javascript
...
const handleClose = () => {
  setOpen(false);
};
...
```

Now, let’s make it possible that when More is clicked on our Twitter sidebar clone it will display the Material-UI Menu. For that, we need to change the More link to a Button then add an **onClick** event to it.

In the Sidebar component, replace the the **SidebarLink** which has **text** prop equal to “More” with this:

*src/Sidebar.js*

```html
...
<Button onClick={handleClick} id="moreLinks">
  <MoreHorizIcon/> More
</Button>
...
```

The **onClick** event calls a **handleClick** function that will be responsible for changing the state to true. 
Let’s create the **handleClick** function. Add the following lines of code under the useState hook of Sidebar component:

*src/Sidebar.js*

```javascript
...
const handleClick = (event) => {
  setOpen(true);
};
...
```

The More button on our Twitter sidebar clone now works, but if you click on it now you won’t see anything. This is because we haven’t added the menu links. Let’s do that now.
At the beginning of the Sidebar component, add the following line of code:

*src/Sidebar.js*

```javascript
...
const options = [
    { link: 'Bookmarks', icon: <BookmarkBorderOutlinedIcon fontSiz0px/> },
    { link: 'List', icon: <ListAltOutlinedIcon/> },
    { link: 'Topic', icon: <ChatOutlinedIcon/> },
    { link: 'Moments', icon: <OfflineBoltOutlinedIcon/> },
    { link: 'Newsletters', icon: <PostAddOutlinedIcon/> },
    { link: 'Twitter Ads', icon: <CallMadeOutlinedIcon/> },
    { link: 'Analytics', icon: <BarChartOutlinedIcon/> },
    { link: 'Settings', icon: <SettingsOutlinedIcon/> },
    { link: 'Help Center', icon: <HelpOutlineOutlinedIcon/> },
    { link: 'Display', icon: <BrushOutlinedIcon/> },
    { link: 'Keyboard shortcuts', icon: <AccessibilityNewOutlinedIcon/> },

  ];
...
```

This is an Array of the links and icons present in the menu. All we have to do now is to iterate through it and display it within the Material-UI Menu component. We are going to use JavaScript’s map function to loop through it, then we will use the **MenuItem** component we imported earlier to display it with the Menu.

Add the following lines of code within the **Menu:**

*src/Sidebar.js*

```javascript
...
{options.map((option) => (
  <MenuItem key={option.link} onClick={handleClose}>
    {option.icon} {option.link}
  </MenuItem>
))}
...
```

The Sidebar component now looks like this:

*src/Sidebar.js*

```javascript
...
function Sidebar(){
  const options = [
    { link: 'Bookmarks', icon: <BookmarkBorderOutlinedIcon fontSiz0px/> },
    { link: 'List', icon: <ListAltOutlinedIcon/> },
    { link: 'Topic', icon: <ChatOutlinedIcon/> },
    { link: 'Moments', icon: <OfflineBoltOutlinedIcon/> },
    { link: 'Newsletters', icon: <PostAddOutlinedIcon/> },
    { link: 'Twitter Ads', icon: <CallMadeOutlinedIcon/> },
    { link: 'Analytics', icon: <BarChartOutlinedIcon/> },
    { link: 'Settings', icon: <SettingsOutlinedIcon/> },
    { link: 'Help Center', icon: <HelpOutlineOutlinedIcon/> },
    { link: 'Display', icon: <BrushOutlinedIcon/> },
    { link: 'Keyboard shortcuts', icon: <AccessibilityNewOutlinedIcon/> },

  ];

  const [open, setOpen] = useState(false);

  const handleClick = (event) => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };
  return(

    <div className="sidebar">
        <SidebarLink text="Home" Icon={HomeIcon} />
        <SidebarLink text="Explore" Icon={SearchIcon} />
        <SidebarLink text="Notifications" Icon={NotificationsNoneIcon} />
        <SidebarLink text="Messages" Icon={MailOutlineIcon} />
        <SidebarLink text="Bookmarks" Icon={BookmarkBorderIcon} />
        <SidebarLink text="Lists" Icon={ListAltIcon} />
        <SidebarLink text="Profile" Icon={PermIdentityIcon} />
        <Button onClick={handleClick} id="moreLinks">
          <MoreHorizIcon/> More
        </Button>
        <Button id="tweet">
          Tweet
        </Button>

        <Menu
          open={open}
          onClose={handleClose}
          id="long-menu"
        >
          {options.map((option) => (
            <MenuItem key={option.link} onClick={handleClose}>
              {option.icon} {option.link}
            </MenuItem>
          ))}
        </Menu>
      </div>
  );
}
...
```

Our Twitter sidebar clone now looks something like this when the More button has been clicked:

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vj7dbnwq70zrt1xbfzqh.png)


In our Twitter sidebar clone things like the More button, the Menu and the icons are not looking nice. Let’s add some styling to fix that.
In the **sidebar.css** file, add the following styling:

*src/sidebar.css*

```css
#moreLinks{
  width: 100%;
  border-radius: 30px;
  font-weight: 700;
  justify-content: unset;
  font-size: 20px;
  margin-right: 20px;
  text-transform: inherit;
  color: black;
  height: 60px;
  padding-left: 10px;
  padding-right: 30px;
  margin-bottom: 5px;
}
#moreLinks .MuiSvgIcon-root{
  margin-right: 20px;
}
#moreLinks:hover{
  background-color: hsl(205, 92%, 95%);
  color: hsl(203, 89%, 64%);
  transition: color 100ms ease-out;
}
#long-menu .MuiMenu-paper{
  width: 220px;
  max-height: 100vh;
  left: 40% !important;
  top: unset !important;
}
#long-menu .MuiListItem-root{
  padding-bottom: 15px;
  padding-top: 15px;
}
.MuiListItem-root:nth-child(6){
  border-bottom: 1px solid hsl(210, 12%, 95%);
}
.MuiListItem-root .MuiSvgIcon-root{
  font-size: 20px;
  color: hsl(210, 12%, 20%);
  font-weight: 400;
  margin-right: 10px;
}
```

With that, we are done building the Twitter sidebar clone, it now looks like this when the More button has been clicked:

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqnxl3gjmbcvojxhwkqq.png)



## Conclusion

Material-UI is really a helpful library to use when developing the frontend. I really like the way all its clickable components display a cool animation when clicked and also how it makes it easy to use and customize SVG icons. 
Though there are still some useful icons and components that it doesn’t have yet, overall Material-UI is a nice component library to use in any web application.