From 1225ce56ff3f7802a46aaca96d84d66159c23d0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <mail@bjo3rn.com>
Date: Thu, 6 Jun 2019 17:36:29 +0200
Subject: [PATCH] Add icon to topnav for myep to save space

---
 .../Configuration/TypoScript/constants.typoscript      |  2 ++
 .../ep_theme/Configuration/TypoScript/setup.typoscript |  1 +
 .../Resources/Private/Assets/scss/remix/_area-nav.scss | 10 ++++++++--
 .../ep_theme/Resources/Private/Partials/Topnav.html    |  7 +++++++
 4 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/constants.typoscript b/public/typo3conf/ext/ep_theme/Configuration/TypoScript/constants.typoscript
index 2df66d1c..dbdecbe6 100644
--- a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/constants.typoscript
+++ b/public/typo3conf/ext/ep_theme/Configuration/TypoScript/constants.typoscript
@@ -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
diff --git a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/setup.typoscript b/public/typo3conf/ext/ep_theme/Configuration/TypoScript/setup.typoscript
index 79685648..b0c29894 100644
--- a/public/typo3conf/ext/ep_theme/Configuration/TypoScript/setup.typoscript
+++ b/public/typo3conf/ext/ep_theme/Configuration/TypoScript/setup.typoscript
@@ -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}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_area-nav.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_area-nav.scss
index 1bd558be..99f7964f 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_area-nav.scss
+++ b/public/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;
+    }
   }
 }
 
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html
index 7f0b0f9e..4772d3c7 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html
+++ b/public/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>