JSFiddle - React, Tailwind, and code Playground

by Wagner Souza

HTML

<nav id="usuario">
    <ul id="menu2">
        <li><a href="#"><i class="fa fa-search" title="Pesquisar"></i></a></li>
        <li><a href="/profile?mode=editprofile"><i class="fa fa-user" title="Editar Perfil"></i></a></li>
        <li><a href="/privmsg?folder=inbox"><i class="fa fa-comments-o" title="Mensagens Privadas"></i></a></li>
        <li><a href="/search?search_id=watchsearch"><i class="fa fa-bell" title="Notificações"></i></a></li>
        <li style="margin: -10px 0 0;">
            <span class="avatar"><img src="http://r16.imgfast.net/users/1615/40/26/04/avatars/1-73.png" alt=""></span>
            <a href="/profile?mode=editprofile" title="Seu Perfil" class="username">USER AQUI</a>
            <br>
            <a href="/login?logout" style="font-size: 13px">Sair</a>

        </li>
        </li>
    </ul>
</nav>

JavaScript

;(function($) {

   var $user = $('#usuario');

   if( _userdata.session_logged_in !== 1 ) {
      $user.remove();
   }
   else {
      $user.find('.username').text( _userdata.username );
      $user.find('.avatar').html( 'src', _userdata.avatar );
   }

} (jQuery));