JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/hpvm-menu@1.0.0/dist/js/all.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hpvm-menu@1.0.0/dist/css/all.css">
<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">
  <title>Hyper Parametrizable Vanilla Menu</title>
</head>

<body>
  <div class="icon-bar container">
    <div class="icon-bar-top">
    </div>
    <div class="icon-bar-bottom">
    </div>
  </div>

  <div id="overlay"><i class="fa-solid fa-sync fa-spin fa-5x is-loaded" style="--fa-animation-duration: 5s;"></i></div>

  <div class='wrapper' />

  <div class='sidebar'>
    <div class='sidebar-widelogo'>
      <img src="https://via.placeholder.com/220x55/e0e0e0/000000/?text=LOGO+HERE" alt="Logo" />
    </div>
    <div id='sidebarTitle' class='sidebar-title'>
      Title Here
    </div>
    <div class='search'>
      <input class='searchInput' placeholder='Procurar no menu...' type="text"
        onkeyup="HpvMenu.sidebar.filterFn(this, 'menuItems')" />
      <button class='btn btn-outline-success' type='button'><i class='fas fa-search'></i></button>
    </div>
    <ul id='menuItems' class='nav'>
    </ul>
    <div id='sideBarStatusText'>
      <p>No item available</p>
    </div>
  </div>

  <div id='content' class="content">
    <p>Your content goes here!<br> You can click on this div to close sidebar.</p>
  </div>
</body>

</html>

CSS

#menuItems.nav.menu-bookmarks>li>a {
      padding: 10px 15px 10px 15px;
      display: flex;
      align-items: center;
    }

    #menuItems.nav.menu-bookmarks>li>a>div {
      display: flex;
      flex-direction: column;
      width: -webkit-fill-available;
    }

    #menuItems.nav.menu-bookmarks>li>a>div>span:nth-child(1) {
      font-weight: bold;
      color: rgb(73, 73, 73);
    }

    #menuItems.nav.menu-bookmarks>li>a>div>span:nth-child(2) {
      color: rgb(82, 82, 82);
      font-style: italic;
      width: 80%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #menuItems.nav.menu-alerts>ul>li>a {
      justify-content: space-between;
      align-items: center;
      display: flex;
    }

    #menuItems.nav.menu-alerts>ul>li>a>div:nth-child(1) {
      display: flex;
      flex-direction: column;
    }

    #menuItems.nav.menu-alerts>ul>li>a>div:nth-child(1)>span:nth-child(1) {
      font-weight: bold;
      color: rgb(73, 73, 73);
    }

    #menuItems.nav.menu-alerts>ul>li>a>div:nth-child(1)>span:nth-child(2) {
      color: rgb(82, 82, 82);
      font-style: italic;
    }

    #menuItems.nav.menu-alerts>ul>li>a>div:nth-child(2) {
      display: flex;
      color: rgb(73, 73, 73);
    }

    #menuItems.nav .sidebar-anchor-no-href {
      color: rgb(217 65 65 / 84%);
    }

JavaScript

// side bar item click handler
    function handleSidebarClick(event, entry, item) {
      if (item.href) {
        // change iframe src
        document.getElementById('iContent').src = item.href;
        HpvMenu.mixin.closeSideBar();
        HpvMenu.overlay.showLoading();
      }
    }

    ////////////// ICONBAR STARTS HERE ////////////////
    HpvMenu.iconbar.registerEntry({
      'parentCls': 'icon-bar-top',
      'classes': ['mini-logo'], // custom class if needed
      'innerHtml': '<img src="https://www.svgrepo.com/show/366969/drgn.svg" width="32" heigh="32">',
      'tooltiptext': 'Vortus Solutions',
      'onClick': function (event) {
        // open site on new window
        window.open('https://vortus.solutions', '_blank');
      }
    });

    HpvMenu.iconbar.registerEntry({
      'parentCls': 'icon-bar-top',
      'innerHtml': '<i class="fa fa-house-chimney-user"></i>',
      'tooltiptext': 'User Home',
      'onClick': function (event) {
        // mixin contains helper functions that connects all the components
        // in this case, it will mark iconbar as selected and open sidebar and show overlay
        HpvMenu.mixin.handleIconBarClick(event, 'user_home');
      }
    });

    HpvMenu.iconbar.registerEntry({
      'parentCls': 'icon-bar-top',
      'innerHtml': '<i class="fa fa-bell"></i>',
      'tooltiptext': 'Alerts',
      'onClick': function (event) {
        // mixin contains helper functions that connects all the components
        // in this case, it will mark iconbar as selected and open sidebar and show overlay
        HpvMenu.mixin.handleIconBarClick(event, 'alerts');
      }
    });

    HpvMenu.iconbar.registerEntry({
      'parentCls': 'icon-bar-top',
      'innerHtml': '<i class="fa fa-star"></i>',
      'tooltiptext': 'Bookmarks',
      'onClick': function (event) {
        // mixin contains helper functions that connects all the components
        // in this case, it will mark iconbar as selected and open sidebar and show...