DEV Community

Cover image for Building a Twitter Sidebar Clone with Material-UI and React
OpenReplay Tech Blog
OpenReplay Tech Blog

Posted on • Originally published at blog.openreplay.com

Building a Twitter Sidebar Clone with Material-UI and React

#react #tutorial #javascript

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, 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.
You can do that with this command:

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

// with yarn
$ yarn add @material-ui/core
Enter fullscreen mode Exit fullscreen mode

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.

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

function App() {
  return (
    <Button>
      Hello World
    </Button>
  );
}
Enter fullscreen mode Exit fullscreen mode

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. There is also an option to change the looks of these icons to be either Filled, Outlined, Rounded, etc. 
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>

   )
}
Enter fullscreen mode Exit fullscreen mode

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.

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. 
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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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.

  • 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.


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>
  )
}
Enter fullscreen mode Exit fullscreen mode

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 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

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
Enter fullscreen mode Exit fullscreen mode

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

import "./App.css";

function App() {
    return (

    );
}
export default App;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 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

Happy debugging, for modern frontend teams - Start monitoring your web app for free.

Building Twitter sidebar clone

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

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

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;
Enter fullscreen mode Exit fullscreen mode

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

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

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

import "./sidebarLink.css";

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

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

.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;
}
Enter fullscreen mode Exit fullscreen mode

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

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

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

export default App
Enter fullscreen mode Exit fullscreen mode

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

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

...
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";

...
Enter fullscreen mode Exit fullscreen mode

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

src/Sidebar.js

...
    <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}/>
...
Enter fullscreen mode Exit fullscreen mode

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

...
function SidebarLink({ text, Icon }) {
  return(
    <div className="link">
        <Icon />
        <h2>{text}</h2>
    </div>
  );
}
...
Enter fullscreen mode Exit fullscreen mode

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

src/sidebarLink.css

.link > .MuiSvgIcon-root {
  padding: 20px;
}
Enter fullscreen mode Exit fullscreen mode

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 documentation.

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

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

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

...
Enter fullscreen mode Exit fullscreen mode

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

src/Sidebar.js

...
<Button id="tweet">
    Tweet
</Button>
...
Enter fullscreen mode Exit fullscreen mode

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

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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

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

Now our Twitter sidebar clone looks like this:

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

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

...
Enter fullscreen mode Exit fullscreen mode

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

...
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';

...
Enter fullscreen mode Exit fullscreen mode

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

...
<Menu
    id="long-menu"
    open={open}
    onClose={handleClose}
>
</Menu>
...
Enter fullscreen mode Exit fullscreen mode

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

...
const [open, setOpen] = useState(false);
...
Enter fullscreen mode Exit fullscreen mode

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

src/Sidebar.js

...
const handleClose = () => {
  setOpen(false);
};
...
Enter fullscreen mode Exit fullscreen mode

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

...
<Button onClick={handleClick} id="moreLinks">
  <MoreHorizIcon/> More
</Button>
...
Enter fullscreen mode Exit fullscreen mode

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

...
const handleClick = (event) => {
  setOpen(true);
};
...
Enter fullscreen mode Exit fullscreen mode

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

...
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/> },

  ];
...
Enter fullscreen mode Exit fullscreen mode

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

...
{options.map((option) => (
  <MenuItem key={option.link} onClick={handleClose}>
    {option.icon} {option.link}
  </MenuItem>
))}
...
Enter fullscreen mode Exit fullscreen mode

The Sidebar component now looks like this:

src/Sidebar.js

...
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>
  );
}
...
Enter fullscreen mode Exit fullscreen mode

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

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

#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;
}
Enter fullscreen mode Exit fullscreen mode

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

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.

Top comments (4)

Collapse
 
christinec_dev profile image
christine •

I've been meaning to try out Material UI, thanks!

Collapse
 
latze profile image
latze •

nice

Collapse
 
amirofski profile image
amirofski •

Nice . thanks

Collapse
 
mohdahmad1 profile image
Mohd Ahmad •

I think material ui is overused

Read next

mayank_mohapatra profile image

Creating a Multilingual Expense Tracker with Tolgee

Mayank Mohapatra -

shafayeat profile image

The Evolution of JavaScript

Shafayet Hossain -

im_santhiya_guna profile image

Strapi — Why

Santhiya G -

nag5000 profile image

Discover JSREPL.io – A JavaScript REPL & Playground

Aleksey Nagovitsyn -