Add icon to topnav for myep to save space

web/typo3conf/ext/ep_theme/Configuration/TypoScript/constants.txt

@@ -54,6 +54,8 @@ plugin.tx_eptheme {
 		germanPageUid =
 		# cat=eptheme/200/290; type=string; label=Concepts page UID
 		conceptsPageUid =
+		# cat=eptheme/200/300; type=string; label=My E&P page UID
+		myEpPageUid =
 
 		# cat=eptheme/400/100; type=string; label=Phone number general
 		phoneNumber = 0221 - 272 276 0

web/typo3conf/ext/ep_theme/Configuration/TypoScript/setup.txt

@@ -87,6 +87,7 @@ plugin.tx_eptheme {
         englishPageUid = {$plugin.tx_eptheme.settings.englishPageUid}
         germanPageUid = {$plugin.tx_eptheme.settings.germanPageUid}
         conceptsPageUid = {$plugin.tx_eptheme.settings.conceptsPageUid}
+        myEpPageUid = {$plugin.tx_eptheme.settings.myEpPageUid}
         myEpApiBaseUrl = {$plugin.tx_eptheme.settings.myEpApiBaseUrl}
         facebookViewContentValues {
             productUid = {$plugin.tx_eptheme.settings.facebookViewContentProductUid}

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>