<div id="app" class="container"></div>
@import 'https://fonts.googleapis.com/css?family=Share+Tech+Mono';

@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
    width: 100vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/jess-harding-lqT6NAmTaiY-unsplash.jpg'),radial-gradient(#28a3dd, #0d7751);
    background-size: cover;
    background-position: center;
    font-family: "Share Tech Mono", monospace;
    font-size: 2rem;
    background-blend-mode: multiply,screen, overlay;
}

.container {
    position: relative;
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(20px);
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    padding:2vw;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: .3s ease;
    margin: 3vw;
}

ul, li {
  list-style: none outside none;
}

li {
  position: relative;
}

input[type="radio"]{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.nav {
  border-radius: 4px;
  background: #2a394f;
  min-width: 30vw;
  
  label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    cursor: pointer;
    
    span {
       padding: 25px;
       position: relative;
       width: 100%;
       color: #eff4fa;
       border-bottom: 1px solid #293649;
       font-size: 3vh;
       display: flex;
       align-items: center;
      
      &::after {
        content: "\f054";
        font-family: FontAwesome;
        margin-left: auto;
        font-size: 2vh;
      }
      
      &::before {
        content: '';
        font-family: FontAwesome;
        margin-right: 10px;
        font-size: 2.5vh;
      }
    }
  }
}

.nav li:first-child span::before {
  content: "\f0e4";
}

.nav li:nth-child(2) span::before {
  content: "\f21a";
}

.nav li:last-child span::before {
  content: "\f075";
}
.nav__sub {
  display: none;
  
  li {
    width: 100%;
    background: #15a4fa;
    padding: 25px;
    text-indent: 25px;
    box-shadow: 0px 0px #126CA1  inset;
    transition: box-shadow .3s,text-indent .3s;
    position: relative;
    font-size: 3vh;
    color: #eff4fa;
  }
}

input[type='radio']:checked + label {
  background: #212e41;
  text-indent: 4px;
}

input[type='radio']:checked + label span::after {
  content: "\f078";
}

input[type='radio']:checked + label .nav__sub {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #212e41;
  flex: 1;
}

input[type='radio']:checked + label .nav__sub li:hover{
  background: #0c93e4;
  box-shadow: 3px 0px #126CA1 inset;
}
View Compiled

const listsData = [
    {
        title: 'Dashboard',
        items: ['Tools', 'Reports', 'Analytics', 'Code Blocks']
    },
    {
        title: 'Sales',
        items: ['New Sales', 'Expired Sales', 'Sales Reports', 'Deliveries']
    },
    {
        title: ' Messages',
        items: ['Inbox', 'Outbox', 'Sent', 'Archived']
    }
]


const Menu = ({lists}) => {
    return (
      <ul className="nav">
        {
          lists.map((list, index) => (
            <li key={index}>
              <input id={list.title} name="menu" type="radio" />
              <label htmlFor={list.title}>
                <span className="nav__title">{list.title}</span>
                <ul className="nav__sub">
                {
                  list.items.map((item, index) => (
                    <li key={index}>{item}</li>
                  ))
                }
                </ul>
              </label>
            </li>
          ))
        }
      </ul>
    )
}

const rootElement = document.getElementById("app");
ReactDOM.render(<Menu lists={listsData} />, rootElement);
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js