JSFiddle - React, Tailwind, and code Playground

by cmruser

CSS

.nav-side [data-icon]::before {
  font-size: 24px;
}

.nav-side [data-parent] > a {
    background: #1e66a0;
    color: #fff;
}

.aside-collapsed aside[role=complementary] {
    margin-left: 0px;
    width: 54px;
    background: #1e66a0;
}
.aside-collapsed .nav-side ul {
  background: none;
}

.aside-collapsed [data-parent] > a {
  display: none;
}
.aside-collapsed [data-child] {
  position: relative;
}
.aside-collapsed [data-child] > a {
   color: #fff;
}
.aside-collapsed [data-child] > a:hover {
  color: #fff;
}
.aside-collapsed [data-child] > a .truncate {
   display: none;
}
.aside-collapsed [data-child] a::after {
  display: none;
}

.aside-collapsed .show > ul {
  display: none;
}

.aside-collapsed [data-child]:hover > ul {
  position: absolute;
  background: #478ec7;
  z-index: 2;
  top: 0;
  left: 100%;
  text-indent: 0;
  display: block;
}
.aside-collapsed [data-child]:hover > a {
   background: #478ec7;
}

.aside-collapsed [data-child]:hover > ul li {
  
}

.aside-collapsed [data-child]:hover > ul a {
  padding: 1.6em;
  color: #fff;
}
.aside-collapsed [data-child]:hover > ul a:hover {
  color: #fff;
  background: #333;
}

/*
.aside-collapsed [data-child].show > ul {
  display: none;
}
.aside-collapsed [data-child].show > a {
   background: #478ec7;
}

.aside-collapsed [data-child].show > ul li {
  
}

.aside-collapsed [data-child].show > ul a {
  padding: 1.6em;
  color: #fff;
}
.aside-collapsed [data-child].show > ul a:hover {
  color: #fff;
  background: #333;
}
*/