Add icon to topnav for myep to save space

web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_area-nav.scss

@@ -27,7 +27,7 @@
   list-style: none;
   width: 100%;
   @include mq($from: desktop) {
-    display: block !important; // Required bc. of jquery animation
+    display: flex !important; // Required bc. of jquery animation
     position: relative;
     top: auto;
     left: auto;
@@ -46,8 +46,8 @@
     border-right: none;
   }
   @include mq($from: desktop) {
+    flex-grow: 1;
     background: none;
-    display: inline-block;
     border-top: none;
     border-left: 1px solid #404040;
     &:last-child {
@@ -56,6 +56,9 @@
     }
     font-size: 1rem;
     width: percentage(1/6);
+    &--icon {
+      flex-basis: 0;
+    }
   }
 }
 
@@ -77,6 +80,9 @@
     &:hover {
       background-color: $color-brand-secondary;
     }
+    .area-nav__list-item--icon & {
+      padding: 10px 8px;
+    }
   }
 }
 

web/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html

@@ -16,6 +16,13 @@
                         </li>
                     </f:for>
                 </v:menu>
+                <f:if condition="{settings.myEpPageUid}">
+                    <li class="area-nav__list-item area-nav__list-item--icon">
+                        <f:link.typolink parameter="{settings.myEpPageUid}" class="area-nav__link" title="My E&P">
+                            <i class="fa fa-user"></i><span class="hidden-md hidden-lg">&nbsp;My E&amp;P</span>
+                        </f:link.typolink>
+                    </li>
+                </f:if>
             </ul>
         </nav>
     </div>