Avatar in top right corner

app/templates/_base/navbar.html.j2

@@ -10,7 +10,12 @@
       </a>
       <ul class="right hide-on-med-and-down">
         <li><a href="{{ url_for('main.news') }}"><i class="material-icons left">email</i>News</a></li>
-        <li><a class="dropdown-trigger no-autoinit" data-target="nav-more-dropdown" href="#!" id="nav-more-dropdown-trigger"><i class="material-icons">more_vert</i></a></li>
+        <li>
+          <a class="dropdown-trigger no-autoinit" data-target="nav-more-dropdown" href="#!" id="nav-more-dropdown-trigger">
+            <img src="{{ url_for('users.user_avatar', user_id=current_user.id) }}" alt="avatar" class="circle left" style="height: 54px; padding: 10px 10px 0 0;">
+            {{ current_user.username }} ({{ current_user.email }})
+          </a>
+        </li>
       </ul>
     </div>
     <div class="nav-content primary-variant-color">
@@ -22,9 +27,6 @@
         {% endif %}
         {%- endfor -%}
       </ul>
-      {# {% if current_user.is_authenticated %}
-      <a class="btn-floating btn-large halfway-fab modal-trigger pink tooltipped waves-effect waves-light" data-tooltip="Roadmap" href="#roadmap-modal"><i class="material-icons">explore</i></a>
-      {% endif %} #}
       <a class="btn-floating btn-large halfway-fab modal-trigger pink tooltipped waves-effect waves-light" data-tooltip="Manual" href="#manual-modal"><i class="material-icons">help</i></a>
     </div>
   </nav>

app/templates/_base/sidenav.html.j2

@@ -2,21 +2,6 @@
   <li>
     <div class="user-view">
       <div class="background primary-color"></div>
-        <span class="white-text name">
-          {% if current_user.username|length > 32 %}
-          {{ current_user.username[:29] + '...' }}
-          {% else %}
-          {{ current_user.username }}
-          {% endif %}
-        </span>
-        <span class="white-text email">
-          {% if current_user.email|length > 32 %}
-            {{ current_user.email[:29] + '...' }}
-          {% else %}
-            {{ current_user.email }}
-          {% endif %}
-        </span>
-      </div>
     </div>
   </li>
   {# <li class="primary-color">
@@ -24,8 +9,8 @@
       <img class="hide-on-small-only" src="{{ url_for('static', filename='images/nopaque_-_logo_name_slogan.svg') }}" style="height: 128px; margin-top: -32px; margin-left: ;">
     </div>
   </li> #}
-  {# <li><a href="{{ url_for('main.index') }}">nopaque</a></li> #}
-  <li class="hide-on-large-only">
+  <li><a href="{{ url_for('main.index') }}"><i class="material-icons left">home</i>nopaque</a></li>
+  <li>
     <a class="waves-effect" href="{{ url_for('main.news') }}"><i class="material-icons left">email</i>News</a>
   </li>
   {# <li><a href="{{ url_for('main.user_manual') }}"><i class="material-icons">help</i>Manual</a></li> #}