From 3733d88b9388e2414d913acd8d219ad26ff4bba5 Mon Sep 17 00:00:00 2001
From: Philipp Pracht <philipp.pracht@sap.com>
Date: Mon, 11 May 2020 11:00:09 +0200
Subject: [PATCH] added selected state

---
 core/src/navigation/MobileTopNavDropDown.html | 8 +++++++-
 core/src/navigation/ProductSwitcher.html      | 2 +-
 docs/navigation-parameters-reference.md       | 1 +
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/core/src/navigation/MobileTopNavDropDown.html b/core/src/navigation/MobileTopNavDropDown.html
index 2b97537678..a61731eb5c 100644
--- a/core/src/navigation/MobileTopNavDropDown.html
+++ b/core/src/navigation/MobileTopNavDropDown.html
@@ -13,7 +13,7 @@ <h3 class="fd-dialog__title">{label}</h3>
           {#if nodes}
           {#each nodes as node}
           <li
-            class="fd-product-switch__item {noSubTitle == 'true' ? 'y-has-no-subtitle' : '' }"
+            class="fd-product-switch__item {noSubTitle == 'true' ? 'y-has-no-subtitle' : '' } {node.selected?'selected':''}"
             on:click="{() => onActionClick(node)}"
             data-e2e="mobile-topnav-item"
             data-testid="{getTestId(node)}"
@@ -77,6 +77,12 @@ <h3 class="fd-dialog__title">{label}</h3>
 </script>
 
 <style type="text/scss">
+  /* TODO remove after update to fundamental 0.9 */
+  .fd-product-switch__item.selected .fd-product-switch__title:before,
+  .fd-product-switch__item.selected .fd-product-switch__title:after {
+    content: none !important;
+  }
+
   @media (max-width: 1023px) {
     .fd-product-switch__body--mobile {
       .fd-product-switch__icon {
diff --git a/core/src/navigation/ProductSwitcher.html b/core/src/navigation/ProductSwitcher.html
index b696b523e3..a090eabf57 100644
--- a/core/src/navigation/ProductSwitcher.html
+++ b/core/src/navigation/ProductSwitcher.html
@@ -40,7 +40,7 @@
             {#each productSwitcherItems as productSwitcherItem}
             {#if productSwitcherItem.label}
             <li
-              class="fd-product-switch__item"
+              class="fd-product-switch__item {productSwitcherItem.selected?'selected':''}"
               on:click="{() => onActionClick(productSwitcherItem)}"
               data-testid="{getTestId(productSwitcherItem)}"
             >
diff --git a/docs/navigation-parameters-reference.md b/docs/navigation-parameters-reference.md
index d845e75545..bbadc944fe 100644
--- a/docs/navigation-parameters-reference.md
+++ b/docs/navigation-parameters-reference.md
@@ -432,6 +432,7 @@ The product switcher is a pop-up window available in the top navigation bar. It
   - **icon** is the name of an icon from the [OpenUI](https://openui5.hana.ondemand.com/1.40.10/iconExplorer.html) or a custom link (relative or absolute) to an image displayed next to the label or instead of it.
   - **altText** adds the HTML `alt` attribute to an icon. Note that this property only applies to icons with a defined absolute or relative path.
   - **link** defines an absolute link to a **node**.
+  - **selected** if set to true, the item is displayed in selected state, useful e.g. if the item refers to the current product.
   - **externalLink** is an object which indicates that the node links to an external URL. If this parameter
  is defined, the **link** parameter
  is ignored. It has the following attributes: