Design of the user menu

Resources/public/sass/custom/modules/_navigation.scss

@@ -1,9 +1,11 @@
-// For cutomizing the navigation
-
 .navigation {
    background-color: $chill-blue;
 
    li.more.nav-link {
+      a {
+         margin-bottom: 2px;
+      }
+
       a:after {
          color: $chill-dark-gray;
       }

Resources/views/Menu/section.html.twig

@@ -19,13 +19,17 @@
 <li class="nav-link more"><a href="javascript:void(0)">Sections</a>
     <ul class="submenu width-15-em">
         {% for route in routes %}
-            <li><a href="{{ path(route.key, args ) }}">
-                {% spaceless %}
+            <li>
+                <a href="{{ path(route.key, args ) }}" style="background-color:transparent;">
+                    <div style="background-color: #333333; width: calc(100% - 3em); float: left; text-align:center;">
+                    {{ route.label|trans }}</div>
+                    <div style="background-color: #333333; width: 3em; color: rgba(255, 255, 255, 0.7); text-align:center;width: 2em; float: left; margin-left:1px;">{% spaceless %}
                         {% for icon in route.icons %}
                             <i class="fa fa-{{ icon }}"></i> 
                         {% endfor %}
-                {% endspaceless %}
-                {{ route.label|trans }}</a></li>
+                    {% endspaceless %}</div>
+                </a>
+            </li>
         {% endfor %}
     </ul>
 </li>

Resources/views/Menu/user.html.twig

@@ -16,7 +16,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #}
 
-<li class="nav-link more"><a href="javascript:void(0)">{{ app.user.username }}</a>
+<li class="nav-link more">
+	<a href="javascript:void(0)">
+		{{ 'Welcome' | trans }}
+		<b>{{ app.user.username }}</b>
+	</a>
     <ul class="submenu width-11-em">
         {% for route in routes %}
             <li><a href="{{ path(route.key, args ) }}"><i class="fa fa-{{ route.icon }}"></i> {{ route.label|trans }}</a></li>