From 3209694bcb668cb09a77abce79d38064450db9b3 Mon Sep 17 00:00:00 2001
From: Stanley Hsu <ching.hsiang.hsu@sap.com>
Date: Thu, 13 Jan 2022 10:50:14 +0100
Subject: [PATCH] Convert .html files to .svelte files - by VS Code svelte
 formatter

---
 core/src/App.html                             |   4 +-
 core/src/TopNavDropDown.html                  |   2 +-
 ...{BadgeCounter.html => BadgeCounter.svelte} |  19 +-
 ...xtSwitcher.html => ContextSwitcher.svelte} | 256 ++---
 core/src/navigation/ContextSwitcherNav.html   | 123 ---
 core/src/navigation/ContextSwitcherNav.svelte | 132 +++
 .../{GlobalNav.html => GlobalNav.svelte}      | 182 ++--
 core/src/navigation/LeftNav.html              |   2 +-
 core/src/navigation/LogoTitle.html            | 289 ------
 core/src/navigation/LogoTitle.svelte          | 320 +++++++
 core/src/navigation/MobileTopNavDropDown.html |   2 +-
 core/src/navigation/ProductSwitcher.html      | 220 -----
 core/src/navigation/ProductSwitcher.svelte    | 237 +++++
 core/src/navigation/TopNav.html               | 778 ----------------
 core/src/navigation/TopNav.svelte             | 872 ++++++++++++++++++
 .../{TopNavNode.html => TopNavNode.svelte}    |  33 +-
 16 files changed, 1831 insertions(+), 1640 deletions(-)
 rename core/src/navigation/{BadgeCounter.html => BadgeCounter.svelte} (74%)
 rename core/src/navigation/{ContextSwitcher.html => ContextSwitcher.svelte} (62%)
 delete mode 100644 core/src/navigation/ContextSwitcherNav.html
 create mode 100644 core/src/navigation/ContextSwitcherNav.svelte
 rename core/src/navigation/{GlobalNav.html => GlobalNav.svelte} (56%)
 delete mode 100644 core/src/navigation/LogoTitle.html
 create mode 100644 core/src/navigation/LogoTitle.svelte
 delete mode 100644 core/src/navigation/ProductSwitcher.html
 create mode 100644 core/src/navigation/ProductSwitcher.svelte
 delete mode 100644 core/src/navigation/TopNav.html
 create mode 100644 core/src/navigation/TopNav.svelte
 rename core/src/navigation/{TopNavNode.html => TopNavNode.svelte} (60%)

diff --git a/core/src/App.html b/core/src/App.html
index 57d53d245c..8cec211bbe 100644
--- a/core/src/App.html
+++ b/core/src/App.html
@@ -134,9 +134,9 @@
   import Backdrop from './Backdrop.html';
   import SplitView from './SplitView.html';
   import LeftNav from './navigation/LeftNav.html';
-  import TopNav from './navigation/TopNav.html';
+  import TopNav from './navigation/TopNav.svelte';
   import TabNav from './navigation/TabNav.html';
-  import GlobalNav from './navigation/GlobalNav.html';
+  import GlobalNav from './navigation/GlobalNav.svelte';
   import Breadcrumb from './navigation/Breadcrumb.html';
   import {
     afterUpdate,
diff --git a/core/src/TopNavDropDown.html b/core/src/TopNavDropDown.html
index 70fe741e26..4b8ea702c9 100644
--- a/core/src/TopNavDropDown.html
+++ b/core/src/TopNavDropDown.html
@@ -45,7 +45,7 @@
 />
 {/if}
 <script>
-  import BadgeCounter from './navigation/BadgeCounter.html';
+  import BadgeCounter from './navigation/BadgeCounter.svelte';
   import MobileTopNav from './navigation/MobileTopNavDropDown.html';
   import { beforeUpdate, createEventDispatcher, onMount, getContext } from 'svelte';
   import { Routing } from './services/routing';
diff --git a/core/src/navigation/BadgeCounter.html b/core/src/navigation/BadgeCounter.svelte
similarity index 74%
rename from core/src/navigation/BadgeCounter.html
rename to core/src/navigation/BadgeCounter.svelte
index bf9da37cf9..40d98d17bb 100644
--- a/core/src/navigation/BadgeCounter.html
+++ b/core/src/navigation/BadgeCounter.svelte
@@ -1,15 +1,18 @@
-{#if node && node.badgeCounter} {#await node.badgeCounter.count()} {:then count} {#if
-count > 0}
-<span
-  class="fd-counter fd-counter--notification fd-shellbar__counter--notification"
-  aria-label="{node.badgeCounter.label}"
-  >{count}</span
->
-{/if} {:catch error} {/await} {/if}
 <script>
   export let node;
 </script>
 
+{#if node && node.badgeCounter}
+  {#await node.badgeCounter.count() then count}
+    {#if count > 0}
+      <span
+        class="fd-counter fd-counter--notification fd-shellbar__counter--notification"
+        aria-label={node.badgeCounter.label}>{count}</span
+      >
+    {/if}
+  {/await}
+{/if}
+
 <style type="text/scss">
   :global(.fd-shellbar__action) {
     .fd-shellbar__counter--notification {
diff --git a/core/src/navigation/ContextSwitcher.html b/core/src/navigation/ContextSwitcher.svelte
similarity index 62%
rename from core/src/navigation/ContextSwitcher.html
rename to core/src/navigation/ContextSwitcher.svelte
index 83184dfe89..338922b419 100644
--- a/core/src/navigation/ContextSwitcher.html
+++ b/core/src/navigation/ContextSwitcher.svelte
@@ -1,125 +1,7 @@
-{#if contextSwitcherEnabled}
-<!-- DESKTOP VERSION (popover): -->
-{#if !isMobile}
-<div class="fd-shellbar__action fd-shellbar__action--desktop">
-  <div class="fd-popover fd-popover--right">
-    <div class="fd-popover__control" on:click|stopPropagation="{()=> {}}">
-      {#if addNavHrefForAnchor && (selectedOption !== config.defaultLabel) }
-      <a
-        href="{selectedNodePath}"
-        class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu lui-ctx-switch-menu"
-        aria-expanded="{dropDownStates.contextSwitcherPopover || false}"
-        aria-haspopup="true"
-        title="{selectedLabel ? selectedLabel : config.defaultLabel}"
-        on:click|preventDefault="{()=> {if (renderAsDropdown) toggleDropdownState()}}"
-        aria-disabled="{!renderAsDropdown}"
-        data-testid="luigi-contextswitcher-button"
-      >
-        {#if selectedOption && customSelectedOptionRenderer } {@html
-        customSelectedOptionRenderer(selectedOption)} {:else} {#if !selectedLabel}
-        {$getTranslation(config.defaultLabel)} {:else} {selectedLabel} {/if}
-        <i class="sap-icon--megamenu fd-shellbar__button--icon"></i>
-        {/if}
-      </a>
-      {:else}
-      <button
-        class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu lui-ctx-switch-menu"
-        aria-expanded="{dropDownStates.contextSwitcherPopover || false}"
-        aria-haspopup="true"
-        title="{selectedLabel ? selectedLabel : config.defaultLabel}"
-        on:click="{()=> {if (renderAsDropdown) toggleDropdownState()}}"
-        aria-disabled="{!renderAsDropdown}"
-        data-testid="luigi-contextswitcher-button"
-      >
-        {#if selectedOption && customSelectedOptionRenderer } {@html
-        customSelectedOptionRenderer(selectedOption)} {:else} {#if
-        !selectedLabel}{$getTranslation(config.defaultLabel)} {:else}{selectedLabel}{/if}
-        <i class="sap-icon--megamenu fd-shellbar__button--icon"></i>
-        {/if}
-      </button>
-      {/if}
-    </div>
-    <div
-      class="fd-popover__body fd-popover__body--right"
-      aria-hidden="{!(dropDownStates.contextSwitcherPopover || false)}"
-      id="contextSwitcherPopover"
-      data-testid="luigi-contextswitcher-popover"
-    >
-      <ContextSwitcherNav
-        {actions}
-        {config}
-        {customOptionsRenderer}
-        {options}
-        {selectedLabel}
-        {selectedOption}
-        {getNodeName}
-        {getRouteLink}
-        {getTestId}
-        {getTranslation}
-        {isMobile}
-        on:onActionClick="{onActionClick}"
-        on:goToOption="{goToOption}"
-      />
-    </div>
-  </div>
-</div>
-{/if}
-<!-- MOBILE VERSION (fullscreen dialog): -->
-{#if isMobile && dropDownStates.contextSwitcherPopover && renderAsDropdown}
-<div class="fd-dialog fd-dialog--active" on:click|stopPropagation="{()=>{}}">
-  <div
-    class="fd-dialog__content fd-dialog__content--mobile"
-    role="dialog"
-    aria-modal="true"
-    aria-labelledby="dialog-title-3"
-  >
-    <div class="fd-dialog__header fd-bar fd-bar--header">
-      <div class="fd-bar__left">
-        <div class="fd-bar__element">
-          <h2 class="fd-title fd-title--h5" id="dialog-title-3">
-            {#if !selectedLabel} {$getTranslation(config.defaultLabel)} {/if} {#if
-            selectedLabel} {selectedLabel} {/if}
-          </h2>
-        </div>
-      </div>
-    </div>
-    <div class="fd-dialog__body fd-dialog__body--no-vertical-padding">
-      <ContextSwitcherNav
-        {actions}
-        {config}
-        {customOptionsRenderer}
-        {options}
-        {selectedLabel}
-        {selectedOption}
-        {getNodeName}
-        {getRouteLink}
-        {getTestId}
-        {getTranslation}
-        {isMobile}
-        on:onActionClick="{onActionClick}"
-        on:goToOption="{goToOption}"
-      />
-    </div>
-    <footer class="fd-dialog__footer fd-bar fd-bar--cosy fd-bar--footer">
-      <div class="fd-bar__right">
-        <div class="fd-bar__element">
-          <button
-            class="fd-button fd-button--light fd-dialog__decisive-button"
-            on:click="{toggleDropdownState}"
-            data-testid="mobile-topnav-close"
-          >
-            Cancel
-          </button>
-        </div>
-      </div>
-    </footer>
-  </div>
-</div>
-{/if} {/if}
 <script>
   import { createEventDispatcher, onMount, getContext, beforeUpdate } from 'svelte';
   import { ContextSwitcherHelpers } from './services/context-switcher';
-  import ContextSwitcherNav from './ContextSwitcherNav.html';
+  import ContextSwitcherNav from './ContextSwitcherNav.svelte';
   import { LuigiConfig } from '../core-api';
   import { Routing } from '../services/routing';
   import {
@@ -351,6 +233,142 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-3">
   }
 </script>
 
+{#if contextSwitcherEnabled}
+  <!-- DESKTOP VERSION (popover): -->
+  {#if !isMobile}
+    <div class="fd-shellbar__action fd-shellbar__action--desktop">
+      <div class="fd-popover fd-popover--right">
+        <div class="fd-popover__control" on:click|stopPropagation={() => {}}>
+          {#if addNavHrefForAnchor && selectedOption !== config.defaultLabel}
+            <a
+              href={selectedNodePath}
+              class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu lui-ctx-switch-menu"
+              aria-expanded={dropDownStates.contextSwitcherPopover || false}
+              aria-haspopup="true"
+              title={selectedLabel ? selectedLabel : config.defaultLabel}
+              on:click|preventDefault={() => {
+                if (renderAsDropdown) toggleDropdownState();
+              }}
+              aria-disabled={!renderAsDropdown}
+              data-testid="luigi-contextswitcher-button"
+            >
+              {#if selectedOption && customSelectedOptionRenderer}
+                {@html customSelectedOptionRenderer(selectedOption)}
+              {:else}
+                {#if !selectedLabel}
+                  {$getTranslation(config.defaultLabel)}
+                {:else}
+                  {selectedLabel}
+                {/if}
+                <i class="sap-icon--megamenu fd-shellbar__button--icon" />
+              {/if}
+            </a>
+          {:else}
+            <button
+              class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu lui-ctx-switch-menu"
+              aria-expanded={dropDownStates.contextSwitcherPopover || false}
+              aria-haspopup="true"
+              title={selectedLabel ? selectedLabel : config.defaultLabel}
+              on:click={() => {
+                if (renderAsDropdown) toggleDropdownState();
+              }}
+              aria-disabled={!renderAsDropdown}
+              data-testid="luigi-contextswitcher-button"
+            >
+              {#if selectedOption && customSelectedOptionRenderer}
+                {@html customSelectedOptionRenderer(selectedOption)}
+              {:else}
+                {#if !selectedLabel}{$getTranslation(config.defaultLabel)}
+                {:else}{selectedLabel}{/if}
+                <i class="sap-icon--megamenu fd-shellbar__button--icon" />
+              {/if}
+            </button>
+          {/if}
+        </div>
+        <div
+          class="fd-popover__body fd-popover__body--right"
+          aria-hidden={!(dropDownStates.contextSwitcherPopover || false)}
+          id="contextSwitcherPopover"
+          data-testid="luigi-contextswitcher-popover"
+        >
+          <ContextSwitcherNav
+            {actions}
+            {config}
+            {customOptionsRenderer}
+            {options}
+            {selectedLabel}
+            {selectedOption}
+            {getNodeName}
+            {getRouteLink}
+            {getTestId}
+            {getTranslation}
+            {isMobile}
+            on:onActionClick={onActionClick}
+            on:goToOption={goToOption}
+          />
+        </div>
+      </div>
+    </div>
+  {/if}
+  <!-- MOBILE VERSION (fullscreen dialog): -->
+  {#if isMobile && dropDownStates.contextSwitcherPopover && renderAsDropdown}
+    <div
+      class="fd-dialog fd-dialog--active"
+      on:click|stopPropagation={() => {}}
+    >
+      <div
+        class="fd-dialog__content fd-dialog__content--mobile"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="dialog-title-3"
+      >
+        <div class="fd-dialog__header fd-bar fd-bar--header">
+          <div class="fd-bar__left">
+            <div class="fd-bar__element">
+              <h2 class="fd-title fd-title--h5" id="dialog-title-3">
+                {#if !selectedLabel}
+                  {$getTranslation(config.defaultLabel)}
+                {/if}
+                {#if selectedLabel} {selectedLabel} {/if}
+              </h2>
+            </div>
+          </div>
+        </div>
+        <div class="fd-dialog__body fd-dialog__body--no-vertical-padding">
+          <ContextSwitcherNav
+            {actions}
+            {config}
+            {customOptionsRenderer}
+            {options}
+            {selectedLabel}
+            {selectedOption}
+            {getNodeName}
+            {getRouteLink}
+            {getTestId}
+            {getTranslation}
+            {isMobile}
+            on:onActionClick={onActionClick}
+            on:goToOption={goToOption}
+          />
+        </div>
+        <footer class="fd-dialog__footer fd-bar fd-bar--cosy fd-bar--footer">
+          <div class="fd-bar__right">
+            <div class="fd-bar__element">
+              <button
+                class="fd-button fd-button--light fd-dialog__decisive-button"
+                on:click={toggleDropdownState}
+                data-testid="mobile-topnav-close"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+  {/if}
+{/if}
+
 <style type="text/scss">
   .lui-ctx-switch-menu {
     max-width: 30vw;
diff --git a/core/src/navigation/ContextSwitcherNav.html b/core/src/navigation/ContextSwitcherNav.html
deleted file mode 100644
index bf774853f7..0000000000
--- a/core/src/navigation/ContextSwitcherNav.html
+++ /dev/null
@@ -1,123 +0,0 @@
-<nav class="fd-menu lui-ctx-switch-nav { isMobile ? 'fd-menu--mobile' : '' }">
-  {#if actions && actions.length}
-  <ul class="fd-menu__list fd-menu__list--top">
-    {#each actions as node} {#if node.position === 'top' || !['top',
-    'bottom'].includes(node.position)}
-    <li
-      class="fd-menu__item"
-      on:click="{()=> onActionClick(node)}"
-      data-testid="{getTestId(node)}"
-    >
-      <a
-        href="{getRouteLink(node)}"
-        on:click|preventDefault="{()=> {}}"
-        class="fd-menu__link"
-      >
-        <span class="fd-menu__title">{$getTranslation(node.label)}</span>
-      </a>
-    </li>
-    {/if} {/each}
-  </ul>
-  {/if}
-  <ul class="fd-menu__list" id="context_menu_middle">
-    {#if options && options.length === 0}
-    <li class="lui-contextswitcher-indicator">
-      <div class="fd-busy-indicator" aria-hidden="false" aria-label="Loading">
-        <div class="fd-busy-indicator--circle-0"></div>
-        <div class="fd-busy-indicator--circle-1"></div>
-        <div class="fd-busy-indicator--circle-2"></div>
-      </div>
-    </li>
-    {/if} {#if options && options.length} {#each options as node} {#await
-    getNodeName(node.label, config.fallbackLabelResolver, node.id)} {:then label}
-    <li
-      class="fd-menu__item"
-      on:click="{()=> goToOption(node, selectedOption)}"
-      data-testid="{getTestId(node)}"
-    >
-      {#if customOptionsRenderer} {@html customOptionsRenderer(node, label ===
-      selectedLabel)} {:else}
-      <a
-        href="{getRouteLink(node)}"
-        on:click|preventDefault="{()=> {}}"
-        class="fd-menu__link {label === selectedLabel ? 'is-selected' : ''}"
-        title="{label}"
-      >
-        <span class="fd-menu__title">{label}</span>
-      </a>
-      {/if}
-    </li>
-    {/await} {/each} {/if}
-  </ul>
-  {#if actions && actions.length}
-  <ul class="fd-menu__list fd-menu__list--bottom">
-    {#each actions as node} {#if node.position === 'bottom'}
-    <li
-      class="fd-menu__item"
-      on:click="{()=> onActionClick(node)}"
-      data-testid="{getTestId(node)}"
-    >
-      <a
-        href="{getRouteLink(node)}"
-        on:click|preventDefault="{()=> {}}"
-        class="fd-menu__link"
-      >
-        <span class="fd-menu__title">{$getTranslation(node.label)}</span>
-      </a>
-    </li>
-    {/if} {/each}
-  </ul>
-  {/if}
-</nav>
-<script>
-  import { createEventDispatcher } from 'svelte';
-  const dispatch = createEventDispatcher();
-
-  export let actions = [];
-  export let config = {};
-  export let customOptionsRenderer;
-  export let options = [];
-  export let selectedLabel;
-  export let selectedOption;
-  export let isMobile;
-
-  export let getNodeName;
-  export let getRouteLink;
-  export let getTestId;
-  export let getTranslation;
-
-  export function onActionClick(node) {
-    dispatch('onActionClick', { node });
-  }
-
-  export function goToOption(option, selectedOption) {
-    dispatch('goToOption', { option, selectedOption });
-  }
-</script>
-
-<style type="text/scss">
-  :global(.fd-popover__body) {
-    .lui-ctx-switch-nav {
-      max-height: calc(100vh - 76px);
-      overflow-y: auto;
-    }
-  }
-
-  .fd-menu__list {
-    &--bottom {
-      border-top: 1px solid #eeeeef;
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
-    &--top {
-      border-bottom: 1px solid #eeeeef;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-
-  :global(.lui-contextswitcher-indicator) {
-    padding: 20px 0;
-    text-align: center;
-  }
-</style>
diff --git a/core/src/navigation/ContextSwitcherNav.svelte b/core/src/navigation/ContextSwitcherNav.svelte
new file mode 100644
index 0000000000..43dec220d8
--- /dev/null
+++ b/core/src/navigation/ContextSwitcherNav.svelte
@@ -0,0 +1,132 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+
+  export let actions = [];
+  export let config = {};
+  export let customOptionsRenderer;
+  export let options = [];
+  export let selectedLabel;
+  export let selectedOption;
+  export let isMobile;
+  export let getNodeName;
+  export let getRouteLink;
+  export let getTestId;
+  export let getTranslation;
+  const dispatch = createEventDispatcher();
+  export function onActionClick(node) {
+    dispatch('onActionClick', { node });
+  }
+
+  export function goToOption(option, selectedOption) {
+    dispatch('goToOption', { option, selectedOption });
+  }
+</script>
+
+<nav class="fd-menu lui-ctx-switch-nav {isMobile ? 'fd-menu--mobile' : ''}">
+  {#if actions && actions.length}
+    <ul class="fd-menu__list fd-menu__list--top">
+      {#each actions as node}
+        {#if node.position === 'top' || !['top', 'bottom'].includes(node.position)}
+          <li
+            class="fd-menu__item"
+            on:click={() => onActionClick(node)}
+            data-testid={getTestId(node)}
+          >
+            <a
+              href={getRouteLink(node)}
+              on:click|preventDefault={() => {}}
+              class="fd-menu__link"
+            >
+              <span class="fd-menu__title">{$getTranslation(node.label)}</span>
+            </a>
+          </li>
+        {/if}
+      {/each}
+    </ul>
+  {/if}
+  <ul class="fd-menu__list" id="context_menu_middle">
+    {#if options && options.length === 0}
+      <li class="lui-contextswitcher-indicator">
+        <div class="fd-busy-indicator" aria-hidden="false" aria-label="Loading">
+          <div class="fd-busy-indicator--circle-0" />
+          <div class="fd-busy-indicator--circle-1" />
+          <div class="fd-busy-indicator--circle-2" />
+        </div>
+      </li>
+    {/if}
+    {#if options && options.length}
+      {#each options as node}
+        {#await getNodeName(node.label, config.fallbackLabelResolver, node.id) then label}
+          <li
+            class="fd-menu__item"
+            on:click={() => goToOption(node, selectedOption)}
+            data-testid={getTestId(node)}
+          >
+            {#if customOptionsRenderer}
+              {@html customOptionsRenderer(node, label === selectedLabel)}
+            {:else}
+              <a
+                href={getRouteLink(node)}
+                on:click|preventDefault={() => {}}
+                class="fd-menu__link {label === selectedLabel
+                  ? 'is-selected'
+                  : ''}"
+                title={label}
+              >
+                <span class="fd-menu__title">{label}</span>
+              </a>
+            {/if}
+          </li>
+        {/await}
+      {/each}
+    {/if}
+  </ul>
+  {#if actions && actions.length}
+    <ul class="fd-menu__list fd-menu__list--bottom">
+      {#each actions as node}
+        {#if node.position === 'bottom'}
+          <li
+            class="fd-menu__item"
+            on:click={() => onActionClick(node)}
+            data-testid={getTestId(node)}
+          >
+            <a
+              href={getRouteLink(node)}
+              on:click|preventDefault={() => {}}
+              class="fd-menu__link"
+            >
+              <span class="fd-menu__title">{$getTranslation(node.label)}</span>
+            </a>
+          </li>
+        {/if}
+      {/each}
+    </ul>
+  {/if}
+</nav>
+
+<style type="text/scss">
+  :global(.fd-popover__body) {
+    .lui-ctx-switch-nav {
+      max-height: calc(100vh - 76px);
+      overflow-y: auto;
+    }
+  }
+
+  .fd-menu__list {
+    &--bottom {
+      border-top: 1px solid #eeeeef;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+    &--top {
+      border-bottom: 1px solid #eeeeef;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  :global(.lui-contextswitcher-indicator) {
+    padding: 20px 0;
+    text-align: center;
+  }
+</style>
diff --git a/core/src/navigation/GlobalNav.html b/core/src/navigation/GlobalNav.svelte
similarity index 56%
rename from core/src/navigation/GlobalNav.html
rename to core/src/navigation/GlobalNav.svelte
index 6fcce53a39..40f1dde71b 100644
--- a/core/src/navigation/GlobalNav.html
+++ b/core/src/navigation/GlobalNav.svelte
@@ -1,91 +1,10 @@
-<svelte:window on:click="{closeAllDropdowns}" on:blur="{closeAllDropdowns}" />
-{#if showGlobalNav}
-<div class="lui-globalnav">
-  <nav class="fd-side-nav fd-side-nav--condensed">
-    <div class="fd-side-nav__main-navigation">
-      {#if children && pathData.length > 0}
-      <ul class="fd-nested-list">
-        {#each children as node, i} {#if node.globalNav === true && !node.separator}
-        <li
-          class="fd-nested-list__item {node === selectedNode ? 'is-selected' : ''}"
-          data-testid="{getTestId(node)}"
-        >
-          <a
-            href="{addNavHrefForAnchor ? getRouteLink(node) : undefined}"
-            title="{$getTranslation(node.label)}"
-            on:click|preventDefault="{() => handleClick(node)}"
-            role="button"
-          >
-            <div class="lui-fd-nested-list__content">
-              {#if node.icon} {#if hasOpenUIicon(node)}
-              <span class="lui-text fd-top-nav__icon {getSapIconStr(node.icon)}"></span>
-              {:else}
-              <img
-                class="fd-top-nav__icon nav-icon"
-                src="{node.icon}"
-                alt="{node.altText ? node.altText : ''}"
-              />
-              {/if}
-              <!-- end hasOpenUIicon-->
-              {/if}
-              <!-- end node.icon -->
-              <div class="lui-text">{getNodeLabel(node)}</div>
-              <div class="lui-indicator"></div>
-            </div>
-          </a>
-        </li>
-        {/if} {/each}
-      </ul>
-      {/if}
-    </div>
-    <div class="fd-side-nav__utility" aria-label="Utility Menu">
-      {#if children && pathData.length > 0}
-      <ul class="fd-nested-list">
-        {#each children as node, i} {#if node.globalNav === 'bottom' && !node.separator}
-        <li
-          class="fd-nested-list__item {node === selectedNode ? 'is-selected' : ''}"
-          data-testid="{getTestId(node)}"
-        >
-          <a
-            href="{addNavHrefForAnchor ? getRouteLink(node) : undefined}"
-            title="{$getTranslation(node.label)}"
-          >
-            <div
-              class="lui-fd-nested-list__content"
-              on:click|preventDefault="{() => handleClick(node)}"
-            >
-              {#if node.icon} {#if hasOpenUIicon(node)}
-              <span class="lui-text fd-top-nav__icon {getSapIconStr(node.icon)}"></span>
-              {:else}
-              <img
-                class="fd-top-nav__icon nav-icon"
-                src="{node.icon}"
-                alt="{node.altText ? node.altText : ''}"
-              />
-              {/if}
-              <!-- end hasOpenUIicon-->
-              {/if}
-              <!-- end node.icon -->
-              <div class="lui-text">{getNodeLabel(node)}</div>
-              <div class="lui-indicator"></div>
-            </div>
-          </a>
-        </li>
-        {/if} {/each}
-      </ul>
-      {/if}
-    </div>
-  </nav>
-</div>
-{/if}
 <script>
   import { beforeUpdate, createEventDispatcher, onMount, getContext } from 'svelte';
-  import { LuigiAuth, LuigiConfig, LuigiI18N } from '../core-api';
+  import { LuigiConfig, LuigiI18N } from '../core-api';
   import {
     NavigationHelpers,
     RoutingHelpers,
     StateHelpers,
-    EventListenerHelpers,
     GenericHelpers
   } from '../utilities/helpers';
 
@@ -180,6 +99,105 @@
   }
 </script>
 
+<svelte:window on:click={closeAllDropdowns} on:blur={closeAllDropdowns} />
+{#if showGlobalNav}
+  <div class="lui-globalnav">
+    <nav class="fd-side-nav fd-side-nav--condensed">
+      <div class="fd-side-nav__main-navigation">
+        {#if children && pathData.length > 0}
+          <ul class="fd-nested-list">
+            {#each children as node, i}
+              {#if node.globalNav === true && !node.separator}
+                <li
+                  class="fd-nested-list__item {node === selectedNode
+                    ? 'is-selected'
+                    : ''}"
+                  data-testid={getTestId(node)}
+                >
+                  <a
+                    href={addNavHrefForAnchor ? getRouteLink(node) : undefined}
+                    title={$getTranslation(node.label)}
+                    on:click|preventDefault={() => handleClick(node)}
+                    role="button"
+                  >
+                    <div class="lui-fd-nested-list__content">
+                      {#if node.icon}
+                        {#if hasOpenUIicon(node)}
+                          <span
+                            class="lui-text fd-top-nav__icon {getSapIconStr(
+                              node.icon
+                            )}"
+                          />
+                        {:else}
+                          <img
+                            class="fd-top-nav__icon nav-icon"
+                            src={node.icon}
+                            alt={node.altText ? node.altText : ''}
+                          />
+                        {/if}
+                        <!-- end hasOpenUIicon-->
+                      {/if}
+                      <!-- end node.icon -->
+                      <div class="lui-text">{getNodeLabel(node)}</div>
+                      <div class="lui-indicator" />
+                    </div>
+                  </a>
+                </li>
+              {/if}
+            {/each}
+          </ul>
+        {/if}
+      </div>
+      <div class="fd-side-nav__utility" aria-label="Utility Menu">
+        {#if children && pathData.length > 0}
+          <ul class="fd-nested-list">
+            {#each children as node, i}
+              {#if node.globalNav === 'bottom' && !node.separator}
+                <li
+                  class="fd-nested-list__item {node === selectedNode
+                    ? 'is-selected'
+                    : ''}"
+                  data-testid={getTestId(node)}
+                >
+                  <a
+                    href={addNavHrefForAnchor ? getRouteLink(node) : undefined}
+                    title={$getTranslation(node.label)}
+                  >
+                    <div
+                      class="lui-fd-nested-list__content"
+                      on:click|preventDefault={() => handleClick(node)}
+                    >
+                      {#if node.icon}
+                        {#if hasOpenUIicon(node)}
+                          <span
+                            class="lui-text fd-top-nav__icon {getSapIconStr(
+                              node.icon
+                            )}"
+                          />
+                        {:else}
+                          <img
+                            class="fd-top-nav__icon nav-icon"
+                            src={node.icon}
+                            alt={node.altText ? node.altText : ''}
+                          />
+                        {/if}
+                        <!-- end hasOpenUIicon-->
+                      {/if}
+                      <!-- end node.icon -->
+                      <div class="lui-text">{getNodeLabel(node)}</div>
+                      <div class="lui-indicator" />
+                    </div>
+                  </a>
+                </li>
+              {/if}
+            {/each}
+          </ul>
+        {/if}
+      </div>
+    </nav>
+  </div>
+{/if}
+
 <style type="text/scss">
   @import 'styles/variables';
   .lui-globalnav {
diff --git a/core/src/navigation/LeftNav.html b/core/src/navigation/LeftNav.html
index f5a48a3dda..85e7616e77 100644
--- a/core/src/navigation/LeftNav.html
+++ b/core/src/navigation/LeftNav.html
@@ -298,7 +298,7 @@
   import { LuigiConfig, LuigiElements, LuigiI18N, LuigiNavigation } from '../core-api';
   import { CSS_BREAKPOINTS } from '../utilities/constants';
   import { SemiCollapsibleNavigation } from './services/semi-collapsed-navigation';
-  import BadgeCounter from './BadgeCounter.html';
+  import BadgeCounter from './BadgeCounter.svelte';
 
   //TODO refactor
   const __this = {
diff --git a/core/src/navigation/LogoTitle.html b/core/src/navigation/LogoTitle.html
deleted file mode 100644
index 0677958b55..0000000000
--- a/core/src/navigation/LogoTitle.html
+++ /dev/null
@@ -1,289 +0,0 @@
-{#if addNavHrefForAnchor}
-<a
-  class="fd-shellbar__logo { !hasLogo ? 'fd-shellbar__logo--image-replaced' : '' } { hasLogo ? 'lui-customlogo' : ''}"
-  aria-label="{title}"
-  on:click|preventDefault="{() => goTo('/')}"
-  href="/"
-  role="button"
-  tabindex="0"
->
-  {#if hasLogo}
-  <img data-testid="luigi-topnav-logo" bind:this="{logo}" alt="{title}" />
-  {/if}
-</a>
-{:else}
-<span
-  class="fd-shellbar__logo { !hasLogo ? 'fd-shellbar__logo--image-replaced' : '' } { hasLogo ? 'lui-customlogo' : ''}"
-  aria-label="{title}"
-  on:click="{() => goTo('/')}"
-  role="button"
-  tabindex="0"
->
-  {#if hasLogo}
-  <img data-testid="luigi-topnav-logo" bind:this="{logo}" alt="{title}" />
-  {/if}
-</span>
-{/if} {#if title} {#if !hasApps} {#if addNavHrefForAnchor}
-<a
-  class="fd-shellbar__title lui-shellbar-single-app-title"
-  data-testid="luigi-topnav-title"
-  on:click|preventDefault="{() => goTo('/')}"
-  href="/"
->
-  {$getTranslation(title)}
-</a>
-{:else}
-<span
-  class="fd-shellbar__title lui-shellbar-single-app-title"
-  data-testid="luigi-topnav-title"
-  on:click="{() => goTo('/')}"
->
-  {$getTranslation(title)}
-</span>
-{/if}{:else}
-<div class="fd-popover">
-  <div class="fd-popover__control" on:click|stopPropagation="{() => {}}">
-    {#if addNavHrefForAnchor} {#if appSwitcherItems && appSwitcherItems.length > 0} {#each
-    appSwitcherItems as item} {#if item === selectedItem && hasValidLink(item,
-    pathParams)}
-    <a
-      href="{getRouteLink(item)}"
-      class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu lui-app-switch"
-      aria-haspopup="true"
-      aria-expanded="{dropDownStates.appSwitcherPopover || false}"
-      on:click|preventDefault="{() => toggleDropdownState('appSwitcherPopover')}"
-      data-testid="app-switcher"
-    >
-      <span class="fd-shellbar__title" data-testid="luigi-topnav-title"
-        >{$getTranslation(title)}</span
-      >
-      <i class="sap-icon sap-icon--megamenu fd-shellbar__button--icon"></i>
-    </a>
-    {/if} {/each} {/if} {#if appSwitcherItems.length > 0 && !selectedItem}
-    <a
-      href="/"
-      class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu lui-app-switch"
-      aria-haspopup="true"
-      aria-expanded="{dropDownStates.appSwitcherPopover || false}"
-      on:click|preventDefault="{() => toggleDropdownState('appSwitcherPopover')}"
-      data-testid="app-switcher"
-    >
-      <span class="fd-shellbar__title" data-testid="luigi-topnav-title"
-        >{$getTranslation(title)}</span
-      >
-      <i class="sap-icon sap-icon--megamenu fd-shellbar__button--icon"></i>
-    </a>
-    {/if} {:else}
-    <button
-      class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu lui-app-switch"
-      aria-haspopup="true"
-      aria-expanded="{dropDownStates.appSwitcherPopover || false}"
-      on:click|stopPropagation="{() => toggleDropdownState('appSwitcherPopover')}"
-      data-testid="app-switcher"
-    >
-      <span class="fd-shellbar__title" data-testid="luigi-topnav-title"
-        >{$getTranslation(title)}</span
-      >
-      <i class="sap-icon sap-icon--megamenu fd-shellbar__button--icon"></i>
-    </button>
-    {/if}
-  </div>
-  <div
-    class="fd-popover__body fd-popover__body--left"
-    aria-hidden="{!(dropDownStates.appSwitcherPopover || false)}"
-    id="appSwitcherPopover"
-  >
-    <nav class="fd-menu">
-      <ul class="fd-menu__list fd-menu__list--no-shadow">
-        {#if showMainAppEntry && selectedItem}
-        <li class="fd-menu__item">
-          <a
-            href="/"
-            role="button"
-            class="fd-menu__link"
-            on:click|preventDefault="{goToRoot}"
-            data-testid="{getTestId(defaultTitle)}"
-          >
-            <span class="fd-menu__title">{$getTranslation(defaultTitle)}</span>
-          </a>
-        </li>
-        {/if} {#if appSwitcherItems && appSwitcherItems.length > 0} {#each
-        appSwitcherItems as item} {#if item !== selectedItem && hasValidLink(item,
-        pathParams)}
-        <li class="fd-menu__item">
-          <a
-            role="button"
-            class="fd-menu__link"
-            on:click|preventDefault="{() => goTo(item.link)}"
-            href="{addNavHrefForAnchor ? getRouteLink(item, pathParams) : undefined}"
-            data-testid="{getTestId(item)}"
-          >
-            <span class="fd-menu__title">{$getTranslation(item.title)}</span>
-          </a>
-        </li>
-        {/if} {/each} {/if}
-      </ul>
-    </nav>
-  </div>
-</div>
-{/if} {#if subTitle}
-<div class="fd-shellbar__subtitle">{$getTranslation(subTitle)}</div>
-{/if}{/if}
-<script>
-  import { beforeUpdate, createEventDispatcher, onMount, getContext } from 'svelte';
-  import * as Header from './services/header';
-  import { Routing } from '../services/routing';
-  import { NavigationHelpers, RoutingHelpers, StateHelpers } from '../utilities/helpers';
-  import { LuigiConfig } from '../core-api';
-
-  const dispatch = createEventDispatcher();
-
-  export let logo;
-  export let hasLogo;
-  export let title;
-  export let hasApps;
-  export let dropDownStates = {};
-  export let showMainAppEntry;
-  export let selectedItem;
-  export let defaultTitle;
-  export let appSwitcherItems;
-  export let pathParams;
-  export let subTitle;
-  export let defaultSubTitle;
-  export let pathData;
-  export let addNavHrefForAnchor;
-  let previousPathData;
-  let getUnsavedChangesModalPromise = getContext('getUnsavedChangesModalPromise');
-  let getTranslation = getContext('getTranslation');
-  let store = getContext('store');
-
-  //TODO refactor
-  const getComponentWrapper = () => {
-    return {
-      get: () => {
-        return {
-          pathData,
-          pathParams,
-          appSwitcherItems,
-          selectedItem,
-          defaultTitle,
-          title,
-          subTitle,
-          defaultSubTitle,
-          showMainAppEntry,
-          hasApps,
-          hasLogo,
-          logo
-        };
-      },
-      set: obj => {
-        if (obj) {
-          Object.getOwnPropertyNames(obj).forEach(prop => {
-            if (prop === 'pathData') {
-              pathData = obj.pathData;
-            } else if (prop === 'appSwitcherItems') {
-              appSwitcherItems = obj.appSwitcherItems;
-            } else if (prop === 'pathParams') {
-              pathParams = obj.pathParams;
-            } else if (prop === 'selectedItem') {
-              selectedItem = obj.selectedItem;
-            } else if (prop === 'title') {
-              title = obj.title;
-            } else if (prop === 'defaultSubTitle') {
-              defaultSubTitle = obj.defaultSubTitle;
-            } else if (prop === 'subTitle') {
-              subTitle = obj.subTitle;
-            } else if (prop === 'defaultTitle') {
-              defaultTitle = obj.defaultTitle;
-            } else if (prop === 'subTitle') {
-              subTitle = obj.subTitle;
-            } else if (prop === 'showMainAppEntry') {
-              showMainAppEntry = obj.showMainAppEntry;
-            } else if (prop === 'hasApps') {
-              hasApps = obj.hasApps;
-            } else if (prop === 'hasLogo') {
-              hasLogo = obj.hasLogo;
-            }
-          });
-        }
-      },
-      store
-    };
-  };
-
-  onMount(() => {
-    Header.processHeaderSettings(getComponentWrapper());
-  });
-
-  beforeUpdate(() => {
-    if (!previousPathData || previousPathData != pathData) {
-      Header.updateTitle(getComponentWrapper());
-      previousPathData = pathData;
-    }
-  });
-
-  export function goTo(path) {
-    getUnsavedChangesModalPromise().then(() => {
-      Routing.navigateTo(RoutingHelpers.applyPathParams(path, pathParams));
-    });
-  }
-
-  export function goToRoot() {
-    getUnsavedChangesModalPromise().then(() => {
-      Routing.navigateTo('/');
-    });
-  }
-
-  export function handleClick(node) {
-    dispatch('handleClick', { node });
-    toggleDropdownState('appSwitcherPopover');
-  }
-
-  export function toggleDropdownState(name) {
-    dispatch('toggleDropdownState', { name });
-  }
-
-  function getTestId(item) {
-    return item.testId
-      ? item.testId
-      : NavigationHelpers.prepareForTests(item.title || item);
-  }
-
-  function hasValidLink(item, pathParams) {
-    if (item.link) {
-      const concreteLink = RoutingHelpers.applyPathParams(item.link, pathParams);
-      if (concreteLink.indexOf(':') !== 0 && concreteLink.indexOf('/:') === -1) {
-        return true;
-      }
-    }
-    return false;
-  }
-
-  function getRouteLink(node) {
-    return RoutingHelpers.getNodeHref(node);
-  }
-</script>
-
-<style type="text/scss">
-  @import 'styles/variables';
-
-  // Force height because of base64 img src
-  .lui-customlogo img {
-    height: 24px;
-  }
-
-  .fd-shellbar__logo {
-    margin: 0 0.5rem;
-  }
-
-  .fd-shellbar__logo,
-  .fd-shellbar__title {
-    cursor: pointer;
-  }
-
-  @media (max-width: $desktopMinWidth) {
-    .fd-shellbar__subtitle {
-      display: none;
-    }
-  }
-</style>
diff --git a/core/src/navigation/LogoTitle.svelte b/core/src/navigation/LogoTitle.svelte
new file mode 100644
index 0000000000..31a0d81986
--- /dev/null
+++ b/core/src/navigation/LogoTitle.svelte
@@ -0,0 +1,320 @@
+<script>
+  import { beforeUpdate, createEventDispatcher, onMount, getContext } from 'svelte';
+  import * as Header from './services/header';
+  import { Routing } from '../services/routing';
+  import { NavigationHelpers, RoutingHelpers } from '../utilities/helpers';
+
+  const dispatch = createEventDispatcher();
+
+  export let logo;
+  export let hasLogo;
+  export let title;
+  export let hasApps;
+  export let dropDownStates = {};
+  export let showMainAppEntry;
+  export let selectedItem;
+  export let defaultTitle;
+  export let appSwitcherItems;
+  export let pathParams;
+  export let subTitle;
+  export let defaultSubTitle;
+  export let pathData;
+  export let addNavHrefForAnchor;
+  let previousPathData;
+  let getUnsavedChangesModalPromise = getContext('getUnsavedChangesModalPromise');
+  let getTranslation = getContext('getTranslation');
+  let store = getContext('store');
+
+  //TODO refactor
+  const getComponentWrapper = () => {
+    return {
+      get: () => {
+        return {
+          pathData,
+          pathParams,
+          appSwitcherItems,
+          selectedItem,
+          defaultTitle,
+          title,
+          subTitle,
+          defaultSubTitle,
+          showMainAppEntry,
+          hasApps,
+          hasLogo,
+          logo
+        };
+      },
+      set: obj => {
+        if (obj) {
+          Object.getOwnPropertyNames(obj).forEach(prop => {
+            if (prop === 'pathData') {
+              pathData = obj.pathData;
+            } else if (prop === 'appSwitcherItems') {
+              appSwitcherItems = obj.appSwitcherItems;
+            } else if (prop === 'pathParams') {
+              pathParams = obj.pathParams;
+            } else if (prop === 'selectedItem') {
+              selectedItem = obj.selectedItem;
+            } else if (prop === 'title') {
+              title = obj.title;
+            } else if (prop === 'defaultSubTitle') {
+              defaultSubTitle = obj.defaultSubTitle;
+            } else if (prop === 'subTitle') {
+              subTitle = obj.subTitle;
+            } else if (prop === 'defaultTitle') {
+              defaultTitle = obj.defaultTitle;
+            } else if (prop === 'subTitle') {
+              subTitle = obj.subTitle;
+            } else if (prop === 'showMainAppEntry') {
+              showMainAppEntry = obj.showMainAppEntry;
+            } else if (prop === 'hasApps') {
+              hasApps = obj.hasApps;
+            } else if (prop === 'hasLogo') {
+              hasLogo = obj.hasLogo;
+            }
+          });
+        }
+      },
+      store
+    };
+  };
+
+  onMount(() => {
+    Header.processHeaderSettings(getComponentWrapper());
+  });
+
+  beforeUpdate(() => {
+    if (!previousPathData || previousPathData != pathData) {
+      Header.updateTitle(getComponentWrapper());
+      previousPathData = pathData;
+    }
+  });
+
+  export function goTo(path) {
+    getUnsavedChangesModalPromise().then(() => {
+      Routing.navigateTo(RoutingHelpers.applyPathParams(path, pathParams));
+    });
+  }
+
+  export function goToRoot() {
+    getUnsavedChangesModalPromise().then(() => {
+      Routing.navigateTo('/');
+    });
+  }
+
+  export function handleClick(node) {
+    dispatch('handleClick', { node });
+    toggleDropdownState('appSwitcherPopover');
+  }
+
+  export function toggleDropdownState(name) {
+    dispatch('toggleDropdownState', { name });
+  }
+
+  function getTestId(item) {
+    return item.testId
+      ? item.testId
+      : NavigationHelpers.prepareForTests(item.title || item);
+  }
+
+  function hasValidLink(item, pathParams) {
+    if (item.link) {
+      const concreteLink = RoutingHelpers.applyPathParams(item.link, pathParams);
+      if (concreteLink.indexOf(':') !== 0 && concreteLink.indexOf('/:') === -1) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  function getRouteLink(node) {
+    return RoutingHelpers.getNodeHref(node);
+  }
+</script>
+
+{#if addNavHrefForAnchor}
+  <a
+    class="fd-shellbar__logo {!hasLogo
+      ? 'fd-shellbar__logo--image-replaced'
+      : ''} {hasLogo ? 'lui-customlogo' : ''}"
+    aria-label={title}
+    on:click|preventDefault={() => goTo('/')}
+    href="/"
+    role="button"
+    tabindex="0"
+  >
+    {#if hasLogo}
+      <img data-testid="luigi-topnav-logo" bind:this={logo} alt={title} />
+    {/if}
+  </a>
+{:else}
+  <span
+    class="fd-shellbar__logo {!hasLogo
+      ? 'fd-shellbar__logo--image-replaced'
+      : ''} {hasLogo ? 'lui-customlogo' : ''}"
+    aria-label={title}
+    on:click={() => goTo('/')}
+    role="button"
+    tabindex="0"
+  >
+    {#if hasLogo}
+      <img data-testid="luigi-topnav-logo" bind:this={logo} alt={title} />
+    {/if}
+  </span>
+{/if}
+{#if title}
+  {#if !hasApps}
+    {#if addNavHrefForAnchor}
+      <a
+        class="fd-shellbar__title lui-shellbar-single-app-title"
+        data-testid="luigi-topnav-title"
+        on:click|preventDefault={() => goTo('/')}
+        href="/"
+      >
+        {$getTranslation(title)}
+      </a>
+    {:else}
+      <span
+        class="fd-shellbar__title lui-shellbar-single-app-title"
+        data-testid="luigi-topnav-title"
+        on:click={() => goTo('/')}
+      >
+        {$getTranslation(title)}
+      </span>
+    {/if}{:else}
+    <div class="fd-popover">
+      <div class="fd-popover__control" on:click|stopPropagation={() => {}}>
+        {#if addNavHrefForAnchor}
+          {#if appSwitcherItems && appSwitcherItems.length > 0}
+            {#each appSwitcherItems as item}
+              {#if item === selectedItem && hasValidLink(item, pathParams)}
+                <a
+                  href={getRouteLink(item)}
+                  class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu lui-app-switch"
+                  aria-haspopup="true"
+                  aria-expanded={dropDownStates.appSwitcherPopover || false}
+                  on:click|preventDefault={() =>
+                    toggleDropdownState('appSwitcherPopover')}
+                  data-testid="app-switcher"
+                >
+                  <span
+                    class="fd-shellbar__title"
+                    data-testid="luigi-topnav-title"
+                    >{$getTranslation(title)}</span
+                  >
+                  <i
+                    class="sap-icon sap-icon--megamenu fd-shellbar__button--icon"
+                  />
+                </a>
+              {/if}
+            {/each}
+          {/if}
+          {#if appSwitcherItems.length > 0 && !selectedItem}
+            <a
+              href="/"
+              class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu lui-app-switch"
+              aria-haspopup="true"
+              aria-expanded={dropDownStates.appSwitcherPopover || false}
+              on:click|preventDefault={() =>
+                toggleDropdownState('appSwitcherPopover')}
+              data-testid="app-switcher"
+            >
+              <span class="fd-shellbar__title" data-testid="luigi-topnav-title"
+                >{$getTranslation(title)}</span
+              >
+              <i
+                class="sap-icon sap-icon--megamenu fd-shellbar__button--icon"
+              />
+            </a>
+          {/if}
+        {:else}
+          <button
+            class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu lui-app-switch"
+            aria-haspopup="true"
+            aria-expanded={dropDownStates.appSwitcherPopover || false}
+            on:click|stopPropagation={() =>
+              toggleDropdownState('appSwitcherPopover')}
+            data-testid="app-switcher"
+          >
+            <span class="fd-shellbar__title" data-testid="luigi-topnav-title"
+              >{$getTranslation(title)}</span
+            >
+            <i class="sap-icon sap-icon--megamenu fd-shellbar__button--icon" />
+          </button>
+        {/if}
+      </div>
+      <div
+        class="fd-popover__body fd-popover__body--left"
+        aria-hidden={!(dropDownStates.appSwitcherPopover || false)}
+        id="appSwitcherPopover"
+      >
+        <nav class="fd-menu">
+          <ul class="fd-menu__list fd-menu__list--no-shadow">
+            {#if showMainAppEntry && selectedItem}
+              <li class="fd-menu__item">
+                <a
+                  href="/"
+                  role="button"
+                  class="fd-menu__link"
+                  on:click|preventDefault={goToRoot}
+                  data-testid={getTestId(defaultTitle)}
+                >
+                  <span class="fd-menu__title"
+                    >{$getTranslation(defaultTitle)}</span
+                  >
+                </a>
+              </li>
+            {/if}
+            {#if appSwitcherItems && appSwitcherItems.length > 0}
+              {#each appSwitcherItems as item}
+                {#if item !== selectedItem && hasValidLink(item, pathParams)}
+                  <li class="fd-menu__item">
+                    <a
+                      role="button"
+                      class="fd-menu__link"
+                      on:click|preventDefault={() => goTo(item.link)}
+                      href={addNavHrefForAnchor
+                        ? getRouteLink(item, pathParams)
+                        : undefined}
+                      data-testid={getTestId(item)}
+                    >
+                      <span class="fd-menu__title"
+                        >{$getTranslation(item.title)}</span
+                      >
+                    </a>
+                  </li>
+                {/if}
+              {/each}
+            {/if}
+          </ul>
+        </nav>
+      </div>
+    </div>
+  {/if}
+  {#if subTitle}
+    <div class="fd-shellbar__subtitle">{$getTranslation(subTitle)}</div>
+  {/if}{/if}
+
+<style type="text/scss">
+  @import 'styles/variables';
+
+  // Force height because of base64 img src
+  .lui-customlogo img {
+    height: 24px;
+  }
+
+  .fd-shellbar__logo {
+    margin: 0 0.5rem;
+  }
+
+  .fd-shellbar__logo,
+  .fd-shellbar__title {
+    cursor: pointer;
+  }
+
+  @media (max-width: $desktopMinWidth) {
+    .fd-shellbar__subtitle {
+      display: none;
+    }
+  }
+</style>
diff --git a/core/src/navigation/MobileTopNavDropDown.html b/core/src/navigation/MobileTopNavDropDown.html
index 1b6abd01b6..1e991a1da9 100644
--- a/core/src/navigation/MobileTopNavDropDown.html
+++ b/core/src/navigation/MobileTopNavDropDown.html
@@ -64,7 +64,7 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-4">
 </div>
 
 <script>
-  import BadgeCounter from './BadgeCounter.html';
+  import BadgeCounter from './BadgeCounter.svelte';
   import { createEventDispatcher } from 'svelte';
 
   const dispatch = createEventDispatcher();
diff --git a/core/src/navigation/ProductSwitcher.html b/core/src/navigation/ProductSwitcher.html
deleted file mode 100644
index dd576a2643..0000000000
--- a/core/src/navigation/ProductSwitcher.html
+++ /dev/null
@@ -1,220 +0,0 @@
-<svelte:window on:resize="{setViewportHeightVariable}" />
-{#if productSwitcherItems && productSwitcherItems.length &&
-Object.keys(productSwitcherItems[0]).length }
-<!-- DESKTOP VERSION (popover): -->
-{#if !isMobile}
-<div class="fd-shellbar__action fd-shellbar__action--desktop">
-  <div class="fd-product-switch">
-    <div class="fd-popover fd-popover--right">
-      <div class="fd-popover__control" on:click|stopPropagation="{() => {}}">
-        <button
-          class="fd-button fd-button--transparent fd-product-switch__control"
-          aria-expanded="{dropDownStates.productSwitcherPopover || false}"
-          aria-haspopup="true"
-          on:click|stopPropagation="{toggleDropdownState}"
-          title="{config.label}"
-          data-testid="{getTestId(config)}"
-        >
-          <div class="lui-product-switch__icon">
-            {#if hasOpenUIicon(config)}
-            <!-- default: sap-icon--grid -->
-            <i class="sap-icon {getSapIconStr(config.icon)}"></i>
-            {:else}
-            <img src="{config.icon}" alt="{config.altText ? config.altText : ''}" />
-            {/if}
-          </div>
-        </button>
-      </div>
-      <div
-        class="fd-popover__body fd-popover__body--right"
-        aria-hidden="{!(dropDownStates.productSwitcherPopover || false)}"
-        id="productSwitcherPopover"
-      >
-        <div class="{columnsClass}">
-          <ul class="fd-product-switch__list">
-            {#each productSwitcherItems as productSwitcherItem} {#if
-            productSwitcherItem.label}
-            <li
-              class="fd-product-switch__item {productSwitcherItem.selected?'selected':''}"
-              on:click="{() => onActionClick(productSwitcherItem)}"
-              data-testid="{getTestId(productSwitcherItem)}"
-            >
-              {#if addNavHrefForAnchor}
-              <a
-                href="{getRouteLink(productSwitcherItem)}"
-                on:click|preventDefault="{() => {}}"
-                class="fd-menu__link"
-              >
-                <div class="lui-product-switch__icon">
-                  {#if hasOpenUIicon(productSwitcherItem)}
-                  <i
-                    class="sap-icon {productSwitcherItem.icon && hasOpenUIicon(productSwitcherItem) ? getSapIconStr(productSwitcherItem.icon) : '' }"
-                  ></i>
-                  {:else}
-                  <img
-                    src="{productSwitcherItem.icon}"
-                    alt="{productSwitcherItem.altText ? productSwitcherItem.altText : ''}"
-                  />
-                  {/if}
-                </div>
-                <div class="fd-product-switch__text">
-                  <div class="fd-product-switch__title">
-                    {getNodeLabel(productSwitcherItem)}
-                  </div>
-                  {#if getNodeSubtitle(productSwitcherItem)}
-                  <div class="fd-product-switch__subtitle">
-                    {getNodeSubtitle(productSwitcherItem)}
-                  </div>
-                  {/if}
-                </div>
-              </a>
-              {:else}
-              <div class="lui-product-switch__icon">
-                {#if hasOpenUIicon(productSwitcherItem)}
-                <i
-                  class="sap-icon {productSwitcherItem.icon && hasOpenUIicon(productSwitcherItem) ? getSapIconStr(productSwitcherItem.icon) : '' }"
-                ></i>
-                {:else}
-                <img
-                  src="{productSwitcherItem.icon}"
-                  alt="{productSwitcherItem.altText ? productSwitcherItem.altText : ''}"
-                />
-                {/if}
-              </div>
-              <div class="fd-product-switch__text">
-                <div class="fd-product-switch__title">
-                  {getNodeLabel(productSwitcherItem)}
-                </div>
-                {#if getNodeSubtitle(productSwitcherItem)}
-                <div class="fd-product-switch__subtitle">
-                  {getNodeSubtitle(productSwitcherItem)}
-                </div>
-                {/if}
-              </div>
-              {/if}
-            </li>
-            {/if} {/each}
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-{/if}
-<!-- MOBILE VERSION (fullscreen modal): -->
-{#if isMobile && dropDownStates.productSwitcherPopover}
-<MobileTopNav
-  on:click="{toggleDropdownState}"
-  on:listClick="{onActionClickExternal}"
-  nodes="{productSwitcherItems}"
-  label="{config.label}"
-  {hasOpenUIicon}
-  {getNodeLabel}
-  {getNodeSubtitle}
-  {getTestId}
-/>
-{/if} {/if}
-<script>
-  import MobileTopNav from './MobileTopNavDropDown.html';
-  import { createEventDispatcher, onMount, getContext } from 'svelte';
-  import { LuigiConfig, LuigiI18N } from '../core-api';
-  import { Routing } from '../services/routing';
-  import { StateHelpers, NavigationHelpers, RoutingHelpers } from '../utilities/helpers';
-
-  const dispatch = createEventDispatcher();
-
-  export let productSwitcherItems;
-  export let isMobile;
-  export let config;
-  export let dropDownStates;
-
-  let store = getContext('store');
-  let getUnsavedChangesModalPromise = getContext('getUnsavedChangesModalPromise');
-  let columnsClass;
-  export let addNavHrefForAnchor;
-
-  onMount(async () => {
-    StateHelpers.doOnStoreChange(
-      store,
-      async () => {
-        config = NavigationHelpers.getProductSwitcherConfig();
-        if (config) {
-          productSwitcherItems = await LuigiConfig.getConfigValueAsync(
-            'navigation.productSwitcher.items'
-          );
-          setColumnsClass();
-        }
-        setViewportHeightVariable();
-      },
-      ['navigation.productSwitcher']
-    );
-  });
-
-  // [svelte-upgrade suggestion]
-  // review these functions and remove unnecessary 'export' keywords
-  export function onActionClick(productSwitcherItem) {
-    getUnsavedChangesModalPromise().then(() => {
-      Routing.navigateToLink(productSwitcherItem);
-    });
-    toggleDropdownState();
-  }
-
-  export function onActionClickExternal(event) {
-    onActionClick(event.detail);
-  }
-
-  export function toggleDropdownState() {
-    dispatch('toggleDropdownState');
-  }
-
-  export function setViewportHeightVariable() {
-    // get the viewport height and multiple it by 1% to get a value for a vh unit
-    let vh = window.innerHeight * 0.01;
-    // set the value in the --vh custom property to the root of the document
-    document.documentElement.style.setProperty('--vh', `${vh}px`);
-  }
-
-  function getSapIconStr(iconString) {
-    return NavigationHelpers.renderIconClassName(iconString);
-  }
-
-  function hasOpenUIicon(node) {
-    return NavigationHelpers.isOpenUIiconName(node.icon);
-  }
-
-  function getNodeLabel(node) {
-    return LuigiI18N.getTranslation(node.label);
-  }
-
-  function getNodeSubtitle(node) {
-    return LuigiI18N.getTranslation(node.subTitle);
-  }
-
-  function setColumnsClass() {
-    const columns = NavigationHelpers.getProductSwitcherColumnsNumber();
-    if (columns === 3) {
-      columnsClass = 'fd-product-switch__body fd-product-switch__body--col-3';
-    } else {
-      columnsClass = 'fd-product-switch__body';
-    }
-  }
-
-  function getTestId(node) {
-    return node.testId ? node.testId : NavigationHelpers.prepareForTests(node.label);
-  }
-
-  function getRouteLink(node) {
-    return RoutingHelpers.getNodeHref(node);
-  }
-</script>
-
-<style type="text/scss">
-  .lui-product-switch__icon {
-    img {
-      max-height: 24px;
-    }
-    [class*='sap-icon'] {
-      color: var(--sapShell_InteractiveTextColor, #d1e8ff);
-    }
-  }
-</style>
diff --git a/core/src/navigation/ProductSwitcher.svelte b/core/src/navigation/ProductSwitcher.svelte
new file mode 100644
index 0000000000..ade1ab17ac
--- /dev/null
+++ b/core/src/navigation/ProductSwitcher.svelte
@@ -0,0 +1,237 @@
+<script>
+  import MobileTopNav from './MobileTopNavDropDown.html';
+  import { createEventDispatcher, onMount, getContext } from 'svelte';
+  import { LuigiConfig, LuigiI18N } from '../core-api';
+  import { Routing } from '../services/routing';
+  import { StateHelpers, NavigationHelpers, RoutingHelpers } from '../utilities/helpers';
+
+  const dispatch = createEventDispatcher();
+
+  export let productSwitcherItems;
+  export let isMobile;
+  export let config;
+  export let dropDownStates;
+
+  let store = getContext('store');
+  let getUnsavedChangesModalPromise = getContext('getUnsavedChangesModalPromise');
+  let columnsClass;
+  export let addNavHrefForAnchor;
+
+  onMount(async () => {
+    StateHelpers.doOnStoreChange(
+      store,
+      async () => {
+        config = NavigationHelpers.getProductSwitcherConfig();
+        if (config) {
+          productSwitcherItems = await LuigiConfig.getConfigValueAsync(
+            'navigation.productSwitcher.items'
+          );
+          setColumnsClass();
+        }
+        setViewportHeightVariable();
+      },
+      ['navigation.productSwitcher']
+    );
+  });
+
+  // [svelte-upgrade suggestion]
+  // review these functions and remove unnecessary 'export' keywords
+  export function onActionClick(productSwitcherItem) {
+    getUnsavedChangesModalPromise().then(() => {
+      Routing.navigateToLink(productSwitcherItem);
+    });
+    toggleDropdownState();
+  }
+
+  export function onActionClickExternal(event) {
+    onActionClick(event.detail);
+  }
+
+  export function toggleDropdownState() {
+    dispatch('toggleDropdownState');
+  }
+
+  export function setViewportHeightVariable() {
+    // get the viewport height and multiple it by 1% to get a value for a vh unit
+    let vh = window.innerHeight * 0.01;
+    // set the value in the --vh custom property to the root of the document
+    document.documentElement.style.setProperty('--vh', `${vh}px`);
+  }
+
+  function getSapIconStr(iconString) {
+    return NavigationHelpers.renderIconClassName(iconString);
+  }
+
+  function hasOpenUIicon(node) {
+    return NavigationHelpers.isOpenUIiconName(node.icon);
+  }
+
+  function getNodeLabel(node) {
+    return LuigiI18N.getTranslation(node.label);
+  }
+
+  function getNodeSubtitle(node) {
+    return LuigiI18N.getTranslation(node.subTitle);
+  }
+
+  function setColumnsClass() {
+    const columns = NavigationHelpers.getProductSwitcherColumnsNumber();
+    if (columns === 3) {
+      columnsClass = 'fd-product-switch__body fd-product-switch__body--col-3';
+    } else {
+      columnsClass = 'fd-product-switch__body';
+    }
+  }
+
+  function getTestId(node) {
+    return node.testId ? node.testId : NavigationHelpers.prepareForTests(node.label);
+  }
+
+  function getRouteLink(node) {
+    return RoutingHelpers.getNodeHref(node);
+  }
+</script>
+
+<svelte:window on:resize={setViewportHeightVariable} />
+{#if productSwitcherItems && productSwitcherItems.length && Object.keys(productSwitcherItems[0]).length}
+  <!-- DESKTOP VERSION (popover): -->
+  {#if !isMobile}
+    <div class="fd-shellbar__action fd-shellbar__action--desktop">
+      <div class="fd-product-switch">
+        <div class="fd-popover fd-popover--right">
+          <div class="fd-popover__control" on:click|stopPropagation={() => {}}>
+            <button
+              class="fd-button fd-button--transparent fd-product-switch__control"
+              aria-expanded={dropDownStates.productSwitcherPopover || false}
+              aria-haspopup="true"
+              on:click|stopPropagation={toggleDropdownState}
+              title={config.label}
+              data-testid={getTestId(config)}
+            >
+              <div class="lui-product-switch__icon">
+                {#if hasOpenUIicon(config)}
+                  <!-- default: sap-icon--grid -->
+                  <i class="sap-icon {getSapIconStr(config.icon)}" />
+                {:else}
+                  <img
+                    src={config.icon}
+                    alt={config.altText ? config.altText : ''}
+                  />
+                {/if}
+              </div>
+            </button>
+          </div>
+          <div
+            class="fd-popover__body fd-popover__body--right"
+            aria-hidden={!(dropDownStates.productSwitcherPopover || false)}
+            id="productSwitcherPopover"
+          >
+            <div class={columnsClass}>
+              <ul class="fd-product-switch__list">
+                {#each productSwitcherItems as productSwitcherItem}
+                  {#if productSwitcherItem.label}
+                    <li
+                      class="fd-product-switch__item {productSwitcherItem.selected
+                        ? 'selected'
+                        : ''}"
+                      on:click={() => onActionClick(productSwitcherItem)}
+                      data-testid={getTestId(productSwitcherItem)}
+                    >
+                      {#if addNavHrefForAnchor}
+                        <a
+                          href={getRouteLink(productSwitcherItem)}
+                          on:click|preventDefault={() => {}}
+                          class="fd-menu__link"
+                        >
+                          <div class="lui-product-switch__icon">
+                            {#if hasOpenUIicon(productSwitcherItem)}
+                              <i
+                                class="sap-icon {productSwitcherItem.icon &&
+                                hasOpenUIicon(productSwitcherItem)
+                                  ? getSapIconStr(productSwitcherItem.icon)
+                                  : ''}"
+                              />
+                            {:else}
+                              <img
+                                src={productSwitcherItem.icon}
+                                alt={productSwitcherItem.altText
+                                  ? productSwitcherItem.altText
+                                  : ''}
+                              />
+                            {/if}
+                          </div>
+                          <div class="fd-product-switch__text">
+                            <div class="fd-product-switch__title">
+                              {getNodeLabel(productSwitcherItem)}
+                            </div>
+                            {#if getNodeSubtitle(productSwitcherItem)}
+                              <div class="fd-product-switch__subtitle">
+                                {getNodeSubtitle(productSwitcherItem)}
+                              </div>
+                            {/if}
+                          </div>
+                        </a>
+                      {:else}
+                        <div class="lui-product-switch__icon">
+                          {#if hasOpenUIicon(productSwitcherItem)}
+                            <i
+                              class="sap-icon {productSwitcherItem.icon &&
+                              hasOpenUIicon(productSwitcherItem)
+                                ? getSapIconStr(productSwitcherItem.icon)
+                                : ''}"
+                            />
+                          {:else}
+                            <img
+                              src={productSwitcherItem.icon}
+                              alt={productSwitcherItem.altText
+                                ? productSwitcherItem.altText
+                                : ''}
+                            />
+                          {/if}
+                        </div>
+                        <div class="fd-product-switch__text">
+                          <div class="fd-product-switch__title">
+                            {getNodeLabel(productSwitcherItem)}
+                          </div>
+                          {#if getNodeSubtitle(productSwitcherItem)}
+                            <div class="fd-product-switch__subtitle">
+                              {getNodeSubtitle(productSwitcherItem)}
+                            </div>
+                          {/if}
+                        </div>
+                      {/if}
+                    </li>
+                  {/if}
+                {/each}
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  {/if}
+  <!-- MOBILE VERSION (fullscreen modal): -->
+  {#if isMobile && dropDownStates.productSwitcherPopover}
+    <MobileTopNav
+      on:click={toggleDropdownState}
+      on:listClick={onActionClickExternal}
+      nodes={productSwitcherItems}
+      label={config.label}
+      {hasOpenUIicon}
+      {getNodeLabel}
+      {getNodeSubtitle}
+      {getTestId}
+    />
+  {/if}
+{/if}
+
+<style type="text/scss">
+  .lui-product-switch__icon {
+    img {
+      max-height: 24px;
+    }
+    [class*='sap-icon'] {
+      color: var(--sapShell_InteractiveTextColor, #d1e8ff);
+    }
+  }
+</style>
diff --git a/core/src/navigation/TopNav.html b/core/src/navigation/TopNav.html
deleted file mode 100644
index 3722dbe69f..0000000000
--- a/core/src/navigation/TopNav.html
+++ /dev/null
@@ -1,778 +0,0 @@
-<svelte:window on:click="{closeAllDropdowns}" on:blur="{closeAllDropdowns}" />
-{#if showTopNav}
-<div class="fd-shellbar {hideNavComponent ? 'hideNavComponent' : ''}" tabindex="0">
-  <div class="fd-shellbar__group fd-shellbar__group--product">
-    {#if responsiveNavSetting==="simple" || responsiveNavSetting==="simpleMobileOnly" ||
-    responsiveNavSetting==="Fiori3"}
-    <button
-      class="fd-shellbar__button fd-button lui-burger"
-      on:click="{burgerClickHandler}"
-      tabindex="0"
-      title="{burgerTooltip}"
-    >
-      <i class="sap-icon sap-icon--menu2"></i>
-    </button>
-    {/if}
-    <LogoTitle
-      pathData="{pathData}"
-      pathParams="{pathParams}"
-      addNavHrefForAnchor="{addNavHrefForAnchor}"
-      bind:dropDownStates
-      on:toggleDropdownState="{toggleDropdownStateExternal}"
-      on:handleClick="{handleClickExternal}"
-    />
-  </div>
-  {#if globalSearchConfig && isGlobalSearchCentered}
-  <div class="lui-global-search">
-    <GlobalSearchCentered
-      globalSearchConfig="{globalSearchConfig}"
-      bind:isSearchFieldVisible
-      on:toggleSearch
-      on:handleSearchNavigation
-      bind:searchResult
-      bind:displaySearchResult
-      bind:displayCustomSearchResult
-      bind:inputElem
-      bind:luigiCustomSearchRenderer__slot
-      on:closeSearchResult
-    />
-  </div>
-  {/if}
-  <div class="fd-shellbar__group fd-shellbar__group--actions">
-    {#if !authorizationEnabled || isLoggedIn} {#if globalSearchConfig &&
-    !isGlobalSearchCentered}
-    <GlobalSearch
-      bind:isSearchFieldVisible
-      on:toggleSearch
-      on:handleSearchNavigation
-      bind:searchResult
-      bind:displaySearchResult
-      bind:displayCustomSearchResult
-      bind:inputElem
-      bind:luigiCustomSearchRenderer__slot
-      on:closeSearchResult
-      globalSearchConfig="{globalSearchConfig}"
-    />
-    {/if}
-    <ContextSwitcher
-      bind:dropDownStates
-      on:toggleDropdownState="{() => toggleDropdownState('contextSwitcherPopover')}"
-      isMobile="{false}"
-      addNavHrefForAnchor="{addNavHrefForAnchor}"
-    />
-    {/if} {#if globalSearchConfig || (children && pathData.length > 0)} {#if (children &&
-    pathData.length > 0)} {#each children as node, i} {#if !(node.hideFromNav ||
-    (showGlobalNav && node.globalNav))} {#if node.isCat}
-    <div
-      class="fd-shellbar__action fd-shellbar__action--hide fd-shellbar__action--desktop"
-    >
-      <div class="fd-popover fd-popover--right">
-        <div class="fd-popover__control" on:click|stopPropagation="{() => {}}">
-          <button
-            title="{resolveTooltipText(node, getNodeLabel(node))}"
-            class="fd-shellbar__button fd-button {node === selectedNode ? 'is-selected' : ''}"
-            aria-controls="dropDownPopover-{i}"
-            aria-expanded="{dropDownStates[`dropDownPopover-${i}`] || false}"
-            aria-haspopup="true"
-            on:click="{() => toggleDropdownState(`dropDownPopover-${i}`)}"
-            data-testid="{getTestId(node)}"
-          >
-            <TopNavNode bind:node />
-            <BadgeCounter {node} />
-          </button>
-        </div>
-        <div
-          class="fd-popover__body fd-popover__body--right"
-          aria-hidden="{!(dropDownStates[`dropDownPopover-${i}`] || false)}"
-          id="dropDownPopover-{i}"
-        >
-          <TopNavDropDown
-            node="{node}"
-            isMobile="{false}"
-            pathParams="{pathParams}"
-            addNavHrefForAnchor="{addNavHrefForAnchor}"
-          />
-        </div>
-      </div>
-    </div>
-    {:else}
-    <div
-      class="fd-shellbar__action fd-shellbar__action--hide fd-shellbar__action--desktop"
-    >
-      {#if addNavHrefForAnchor}
-      <a
-        href="{getRouteLink(node)}"
-        class="fd-shellbar__button fd-button {node === selectedNode ? 'is-selected' : ''}"
-        title="{resolveTooltipText(node, getNodeLabel(node))}"
-        aria-expanded="false"
-        aria-haspopup="true"
-        on:click|preventDefault="{() => handleClick(node)}"
-        data-testid="{getTestId(node)}"
-      >
-        <TopNavNode bind:node />
-        <BadgeCounter {node} />
-      </a>
-      {:else}
-      <button
-        title="{resolveTooltipText(node, getNodeLabel(node))}"
-        class="fd-shellbar__button fd-button {node === selectedNode ? 'is-selected' : ''}"
-        aria-expanded="false"
-        aria-haspopup="true"
-        on:click="{() => handleClick(node)}"
-        data-testid="{getTestId(node)}"
-      >
-        <TopNavNode bind:node />
-        <BadgeCounter {node} />
-      </button>
-      {/if}
-    </div>
-    {/if} {/if} {/each} {/if}
-    <!-- Sample Markup for Notifications
-            <div class="fd-shellbar__action fd-shellbar__action--desktop">
-              <button class="fd-shellbar__button fd-button sap-icon--bell" aria-label="Notifications">
-                <span class="fd-counter fd-counter--notification fd-shellbar__counter--notification" aria-label="Unread count">25</span>
-              </button>
-            </div>
-    -->
-
-    <!-- dropdown for top nav nodes on smaller screens -->
-    {#if (visibleNodeCount - globalNavNodeCount > 0) || isProductSwitcherAvailable ||
-    contextSwitcherConfig || globalSearchConfig }
-    <div class="fd-shellbar__action fd-shellbar__action--mobile">
-      <div class="fd-shellbar-collapse">
-        <div class="fd-popover fd-popover--right">
-          <div class="fd-popover__control" on:click|stopPropagation="{() => {}}">
-            <div
-              class="fd-shellbar-collapse--control"
-              aria-expanded="false"
-              aria-haspopup="true"
-              role="button"
-            >
-              <button
-                class="fd-shellbar__button fd-button"
-                aria-controls="overflowPopover"
-                aria-expanded="{dropDownStates.overflowPopover || false}"
-                aria-haspopup="true"
-                on:click="{() => toggleDropdownState('overflowPopover')}"
-                data-testid="mobile-menu"
-              >
-                <i class="sap-icon sap-icon--overflow"></i>
-                <BadgeCounter node="{totalBadgeNode}" special="true" />
-              </button>
-            </div>
-          </div>
-          <div
-            class="fd-popover__body fd-popover__body--right"
-            aria-hidden="{!(dropDownStates.overflowPopover || false)}"
-            id="overflowPopover"
-          >
-            <nav class="fd-menu">
-              <ul class="fd-menu__list fd-menu__list--no-shadow">
-                {#if globalSearchConfig && !isGlobalSearchCentered}
-                <li class="fd-menu__item">
-                  <a
-                    class="fd-menu__link"
-                    on:click|stopPropagation="{()=>{toggleSearch(),toggleDropdownState('overflowPopover')}}"
-                    data-testid="luigi-search-btn-mobile"
-                  >
-                    <i class="sap-icon sap-icon--search fd-top-nav__icon"></i>
-                    <span class="fd-menu__title">Search</span>
-                  </a>
-                </li>
-                {/if} {#if contextSwitcherConfig && (!authorizationEnabled || isLoggedIn)}
-                <li class="fd-menu__item">
-                  <a
-                    class="fd-menu__link"
-                    on:click|stopPropagation="{openMobileContextSwitcher}"
-                  >
-                    <i
-                      class="sap-icon fd-top-nav__icon {contextSwitcherConfig.icon && hasOpenUIicon(contextSwitcherConfig) ? getSapIconStr(contextSwitcherConfig.icon) : 'sap-icon--switch-views'}"
-                    ></i>
-                    <span class="fd-menu__title"
-                      >{selectedLabel ? selectedLabel : defaultLabelContextSwitcher}</span
-                    >
-                  </a>
-                </li>
-                {/if} {#if children} {#each children as node,i} {#if !(node.hideFromNav ||
-                (showGlobalNav && node.globalNav))} {#if !node.isCat}
-                <li class="fd-menu__item">
-                  <a
-                    href="{getRouteLink(node)}"
-                    class="fd-menu__link {node === selectedNode ? 'is-selected' : ''}"
-                    on:click|preventDefault="{() => handleClick(node)}"
-                    data-testid="{getTestId(node)}-mobile"
-                  >
-                    <span
-                      class="fd-top-nav__icon sap-icon {node.icon && hasOpenUIicon(node) ? getSapIconStr(node.icon) : '' }"
-                    >
-                      {#if !hasOpenUIicon(node)}
-                      <img src="{node.icon}" alt="{node.altText ? node.altText : ''}" />
-                      {/if}
-                      <BadgeCounter {node} />
-                    </span>
-                    <span class="fd-menu__title">{getNodeLabel(node)}</span>
-                  </a>
-                </li>
-                {:else}
-                <li class="fd-menu__item">
-                  <a
-                    href="{getRouteLink(node)}"
-                    title="{resolveTooltipText(node, getNodeLabel(node))}"
-                    class="fd-menu__link"
-                    on:click|preventDefault="{() => openMobileTopNavDropDown(node)}"
-                    data-e2e="mobile-topnav-dropdown-category"
-                  >
-                    <span class="fd-top-nav__icon">
-                      {#if hasOpenUIicon(node)}
-                      <i
-                        class="sap-icon {node.icon && hasOpenUIicon(node) ? getSapIconStr(node.icon) : '' }"
-                      ></i>
-                      {:else}
-                      <img src="{node.icon}" alt="{node.altText ? node.altText : ''}" />
-                      {/if}
-                      <BadgeCounter {node} />
-                    </span>
-                    <span class="fd-list__title">{getNodeLabel(node)}</span>
-                  </a>
-                </li>
-                <!-- {:else}
-                <li class="fd-menu__item">
-                  <a
-                    href="{getRouteLink(node)}"
-                    title="{getNodeLabel(node)}"
-                    class="fd-menu__link"
-                    on:click|preventDefault="openMobileTopNavDropDown(node)"
-                    data-testid="mobile-topnav-dropdown-category"
-                  >
-                    {#if node.icon} {#if hasOpenUIicon(node)}
-                    <span
-                      class="fd-top-nav__icon sap-icon {getSapIconStr(node.icon)}"
-                    ></span>
-                    {:else}
-                    <img
-                      class="fd-top-nav__icon nav-icon"
-                      src="{node.icon}"
-                    >
-                    {/if} {/if}
-                    <span class="fd-list__title">{getNodeLabel(node)}</span>
-                  </a>
-                </li>-->
-                <!-- {/if} -->
-                {/if} {/if} {/each} {/if} {#if isProductSwitcherAvailable}
-                <li class="fd-menu__item">
-                  <a
-                    class="fd-menu__link"
-                    on:click|stopPropagation="{openMobileProductSwitcher}"
-                    data-testid="mobile-product-switcher"
-                  >
-                    {#if hasOpenUIicon(productSwitcherConfig) ||
-                    !productSwitcherConfig.icon}
-                    <i
-                      class="fd-top-nav__icon sap-icon {getSapIconStr(productSwitcherConfig.icon || 'grid')}"
-                    ></i>
-                    {:else}
-                    <span class="fd-top-nav__icon sap-icon">
-                      <img
-                        src="{productSwitcherConfig.icon}"
-                        alt="{productSwitcherConfig.altText ? productSwitcherConfig.altText : ''}"
-                      />
-                    </span>
-                    {/if}
-                    <span class="fd-menu__title">{productSwitcherConfig.label}</span>
-                  </a>
-                </li>
-                {/if}
-              </ul>
-            </nav>
-          </div>
-          {#if isProductSwitcherAvailable}
-          <ProductSwitcher
-            bind:dropDownStates
-            on:toggleDropdownState="{() => toggleDropdownState('productSwitcherPopover')}"
-            isMobile="{true}"
-          />
-          {/if} {#if openMobileDropDown}
-          <TopNavDropDown
-            node="{nodeForMobile}"
-            isMobile="{true}"
-            on:close="{closeMobileTopNavDropDown}"
-            pathParams="{pathParams}"
-          />
-          {/if} {#if !authorizationEnabled || isLoggedIn}
-          <ContextSwitcher
-            bind:dropDownStates
-            on:toggleDropdownState="{() => toggleDropdownState('contextSwitcherPopover')}"
-            isMobile="{true}"
-            contextSwitcherToggle="{contextSwitcherToggle}"
-            bind:selectedLabel="{selectedLabel}"
-            bind:defaultLabel="{defaultLabelContextSwitcher}"
-          />
-          {/if}
-        </div>
-      </div>
-    </div>
-    {/if} {/if}
-    <!-- closes {#if children && pathData.length > 0} -->
-    {#if authorizationEnabled || profileItemsAvailable}
-    <div
-      class="fd-shellbar__action fd-shellbar__action--show-always"
-      data-testid="luigi-topnav-profile"
-    >
-      {#if profileTypeSettings === "Fiori3" &&
-      GenericHelpers.requestExperimentalFeature('profileMenuFiori3', true) }
-      <div class="fd-popover fd-popover--right fd-user-menu">
-        <div class="fd-popover__control" on:click|stopPropagation="{() => {}}">
-          {#if userInfo.picture}
-          <button
-            class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail"
-            aria-controls="profilePopover"
-            aria-expanded="true"
-            aria-haspopup="true"
-            title="{userInfo.name ? userInfo.name : undefined}"
-            tabindex="0"
-            style="background-image:url('{userInfo.picture}')"
-            on:click="{() => toggleDropdownState('profilePopover')}"
-            data-testid="luigi-topnav-profile-btn"
-          ></button>
-          {:else}
-          <button
-            class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail"
-            aria-expanded="true"
-            aria-haspopup="true"
-            title="{userInfo.name ? userInfo.name : undefined}"
-            tabindex="0"
-            on:click="{() => toggleDropdownState('profilePopover')}"
-            data-testid="luigi-topnav-profile-initials"
-          >
-            {userInfo.initials ? userInfo.initials : ''}
-          </button>
-          {/if}
-        </div>
-        <div
-          class="fd-popover__body fd-popover__body--right"
-          aria-hidden="{!(dropDownStates.profilePopover || false)}"
-          id="profilePopover"
-        >
-          <Authorization
-            on:toggleDropdownState="{() => toggleDropdownState('profilePopover')}"
-            on:userInfoUpdated="{userInfoUpdate}"
-            addNavHrefForAnchor="{addNavHrefForAnchor}"
-          />
-        </div>
-      </div>
-      {:else}
-      <div class="fd-user-menu">
-        <div class="fd-popover">
-          <div class="fd-popover__control" on:click|stopPropagation="{() => {}}">
-            <div class="{userInfo.picture ? 'fd-shellbar__button--user-menu' : '' }">
-              <button
-                class="fd-button fd-shellbar__button"
-                aria-expanded="{dropDownStates.profilePopover || false}"
-                aria-haspopup="true"
-                aria-controls="profilePopover"
-                on:click="{() => toggleDropdownState('profilePopover')}"
-                title="{userInfo.name ? userInfo.name : undefined}"
-                tabindex="0"
-                data-testid="luigi-topnav-profile-btn"
-              >
-                {#if userInfo.picture}
-                <span
-                  class="fd-avatar fd-avatar--xs fd-avatar--circle"
-                  style="background-image:url('{userInfo.picture}')"
-                ></span>
-                {:else}
-                <i
-                  class="sap-icon {!userInfo.picture?'sap-icon--customer':'fd-identifier fd-identifier--xs fd-identifier--circle'}"
-                ></i>
-                {/if}
-              </button>
-            </div>
-          </div>
-          <div
-            class="fd-popover__body fd-popover__body--right"
-            aria-hidden="{!(dropDownStates.profilePopover || false)}"
-            id="profilePopover"
-          >
-            <AuthorizationSimpleProfileMenu
-              on:toggleDropdownState="{() => toggleDropdownState('profilePopover')}"
-              on:userInfoUpdated="{userInfoUpdate}"
-              addNavHrefForAnchor="{addNavHrefForAnchor}"
-            />
-          </div>
-        </div>
-      </div>
-      {/if}
-    </div>
-    {/if} {#if isProductSwitcherAvailable}
-    <ProductSwitcher
-      bind:dropDownStates
-      on:toggleDropdownState="{() => toggleDropdownState('productSwitcherPopover')}"
-      isMobile="{false}"
-      addNavHrefForAnchor="{addNavHrefForAnchor}"
-    />
-    {/if}
-  </div>
-</div>
-{:else}
-<AuthorizationSimpleProfileMenu
-  on:toggleDropdownState="{() => toggleDropdownState('profilePopover')}"
-  isHidden="{true}"
-  addNavHrefForAnchor="{addNavHrefForAnchor}"
-/>
-{/if}
-<script>
-  import LogoTitle from './LogoTitle.html';
-  import BadgeCounter from './BadgeCounter.html';
-  import Authorization from '../Authorization.html';
-  import AuthorizationSimpleProfileMenu from '../AuthorizationSimpleProfileMenu.html';
-  import TopNavDropDown from '../TopNavDropDown.html';
-  import ContextSwitcher from './ContextSwitcher.html';
-  import ProductSwitcher from './ProductSwitcher.html';
-  import GlobalSearch from './GlobalSearch.html';
-  import GlobalSearchCentered from './GlobalSearchCentered.html';
-  import TopNavNode from './TopNavNode.html';
-  import { beforeUpdate, createEventDispatcher, onMount, getContext } from 'svelte';
-  import { LuigiAuth, LuigiConfig, LuigiI18N } from '../core-api';
-  import {
-    AuthHelpers,
-    NavigationHelpers,
-    RoutingHelpers,
-    StateHelpers,
-    EventListenerHelpers,
-    GenericHelpers
-  } from '../utilities/helpers';
-  import { SemiCollapsibleNavigation } from './services/semi-collapsed-navigation';
-
-  const dispatch = createEventDispatcher();
-  export let authorizationEnabled;
-  export let autologinEnabled;
-  export let isLoggedIn = false;
-  export let hideNavComponent;
-  export let responsiveNavSetting;
-  export let profileTypeSettings;
-  export let showGlobalNav;
-  export let pathData;
-  let previousPathData;
-  export let pathParams;
-  export let dropDownStates = {};
-  export let children;
-  export let selectedNode;
-  export let visibleNodeCount;
-  export let globalNavNodeCount;
-  export let totalBadgeNode;
-  export let isProductSwitcherAvailable;
-  export let productSwitcherConfig;
-  export let openMobileDropDown;
-  export let nodeForMobile;
-  export let profileItemsAvailable;
-  export let userInfo = {};
-  export let urlAuthError;
-  export let globalSearchConfig;
-  export let isGlobalSearchCentered;
-  export let isSearchFieldVisible;
-  export let inputElem;
-  export let luigiCustomSearchRenderer__slot;
-  export let displaySearchResult;
-  export let displayCustomSearchResult;
-  export let searchResult;
-  export let burgerTooltip;
-
-  let store = getContext('store');
-  let contextSwitcherToggle = false;
-  let selectedLabel;
-  let defaultLabelContextSwitcher;
-  let contextSwitcherConfig = LuigiConfig.getConfigValue('navigation.contextSwitcher');
-  export let addNavHrefForAnchor = LuigiConfig.getConfigBooleanValue(
-    'navigation.addNavHrefs'
-  );
-  const setTopNavData = async () => {
-    if (pathData && 0 < pathData.length) {
-      const tnd = await NavigationHelpers.generateTopNavNodes(pathData);
-      children = tnd.children;
-      selectedNode = tnd.selectedNode;
-      visibleNodeCount = tnd.visibleNodeCount;
-      totalBadgeNode = tnd.totalBadgeNode;
-      globalNavNodeCount = tnd.globalNavNodeCount;
-      window.TOPNAVDATA = tnd.children;
-      previousPathData = pathData;
-    }
-  };
-
-  const setLoggedInState = () => {
-    isLoggedIn = AuthHelpers.isLoggedIn();
-  };
-
-  onMount(() => {
-    StateHelpers.doOnStoreChange(
-      store,
-      () => {
-        authorizationEnabled = LuigiAuth.isAuthorizationEnabled();
-        profileItemsAvailable = LuigiConfig.getConfigValue('navigation.profile');
-        autologinEnabled = !Boolean(LuigiConfig.getConfigValue('auth.disableAutoLogin'));
-        isProductSwitcherAvailable = LuigiConfig.getConfigValue(
-          'navigation.productSwitcher'
-        );
-        hideNavComponent = LuigiConfig.getConfigBooleanValue('settings.hideNavigation');
-        responsiveNavSetting = LuigiConfig.getConfigValue(
-          'settings.responsiveNavigation'
-        );
-        profileTypeSettings = LuigiConfig.getConfigValue('settings.profileType');
-        productSwitcherConfig = NavigationHelpers.getProductSwitcherConfig();
-        globalSearchConfig = LuigiConfig.getConfigValue('globalSearch');
-        isGlobalSearchCentered =
-          globalSearchConfig &&
-          globalSearchConfig.searchFieldCentered &&
-          GenericHelpers.requestExperimentalFeature('globalSearchCentered', true);
-        showGlobalNav =
-          LuigiConfig.getConfigBooleanValue('settings.globalSideNavigation') &&
-          GenericHelpers.requestExperimentalFeature('globalNav', true);
-        addNavHrefForAnchor = LuigiConfig.getConfigBooleanValue('navigation.addNavHrefs');
-        contextSwitcherConfig = LuigiConfig.getConfigValue('navigation.contextSwitcher');
-      },
-      ['navigation']
-    );
-
-    EventListenerHelpers.addEventListener('message', e => {
-      if ('luigi.navigation.update-badge-counters' === e.data.msg) {
-        setTopNavData();
-      }
-    });
-  });
-
-  beforeUpdate(() => {
-    if (!previousPathData || previousPathData != pathData) {
-      setTopNavData();
-    }
-    setLoggedInState();
-  });
-
-  export let showTopNav;
-  $: showTopNav =
-    (authorizationEnabled && (!autologinEnabled || isLoggedIn)) || !authorizationEnabled;
-
-  function getSapIconStr(iconString) {
-    return NavigationHelpers.renderIconClassName(iconString);
-  }
-
-  function hasOpenUIicon(node) {
-    return NavigationHelpers.isOpenUIiconName(node.icon);
-  }
-
-  function getNodeLabel(node) {
-    return LuigiI18N.getTranslation(node.label);
-  }
-
-  function getTestId(node) {
-    return node.testId
-      ? node.testId
-      : NavigationHelpers.prepareForTests(node.pathSegment, node.label);
-  }
-
-  function getRouteLink(node) {
-    return RoutingHelpers.getNodeHref(node, pathParams);
-  }
-
-  function resolveTooltipText(node, translation) {
-    return NavigationHelpers.generateTooltipText(node, translation);
-  }
-
-  export function openMobileProductSwitcher() {
-    toggleDropdownState('productSwitcherPopover');
-  }
-
-  export function openMobileContextSwitcher() {
-    contextSwitcherToggle = !contextSwitcherToggle;
-    toggleDropdownState('contextSwitcherPopover');
-  }
-
-  export function openMobileTopNavDropDown(node) {
-    openMobileDropDown = true;
-    nodeForMobile = node;
-  }
-
-  export function closeMobileTopNavDropDown() {
-    openMobileDropDown = false;
-  }
-
-  export function handleClick(node) {
-    dispatch('handleClick', { node });
-  }
-
-  export function handleSearchNavigation(node) {
-    dispatch('handleSearchNavigation', { node });
-  }
-
-  export function handleClickExternal(event) {
-    handleClick(event.detail.node);
-  }
-
-  export function toggleDropdownState(name) {
-    const ddStates = dropDownStates || {};
-    const dropDownState = !ddStates[name];
-
-    closeAllDropdowns();
-    closeMobileTopNavDropDown();
-    ddStates[name] = dropDownState;
-
-    dropDownStates = ddStates;
-  }
-
-  export function toggleDropdownStateExternal(event) {
-    toggleDropdownState(event.detail.name);
-  }
-
-  function setFocusOnGlobalSearchFieldMobile() {
-    if (inputElem) {
-      inputElem.focus();
-    }
-  }
-
-  export function toggleSearch() {
-    if (!isSearchFieldVisible)
-      setTimeout(() => {
-        setFocusOnGlobalSearchFieldMobile();
-      });
-    dispatch('toggleSearch', {
-      isSearchFieldVisible,
-      inputElem,
-      luigiCustomSearchRenderer__slot
-    });
-  }
-
-  export function closeAllDropdowns() {
-    const ddStates = dropDownStates || {};
-    const keys = Object.keys(ddStates);
-    if (keys && keys.length > 0) {
-      keys.forEach(k => {
-        ddStates[k] = false;
-        dropDownStates = ddStates;
-      });
-    }
-  }
-
-  function burgerClickHandler() {
-    if (
-      responsiveNavSetting === 'simple' ||
-      responsiveNavSetting === 'simpleMobileOnly'
-    ) {
-      simpleNav();
-    } else {
-      semicollapsedNav();
-    }
-    setBurgerTooltip();
-  }
-
-  function setBurgerTooltip() {
-    if (!NavigationHelpers.getBurgerTooltipConfig()) {
-      return;
-    }
-    const [
-      collapseNavTooltip,
-      expandNavTooltip
-    ] = NavigationHelpers.getBurgerTooltipConfig();
-    if (collapseNavTooltip && expandNavTooltip) {
-      if (document.body.classList.contains('lui-simpleSlideInNav')) {
-        burgerTooltip = document.body.classList.contains('lui-leftNavToggle')
-          ? collapseNavTooltip
-          : expandNavTooltip;
-      }
-      if (document.body.classList.contains('lui-semiCollapsible')) {
-        burgerTooltip = document.body.classList.contains('semiCollapsed')
-          ? collapseNavTooltip
-          : expandNavTooltip;
-      }
-    }
-  }
-
-  export function simpleNav() {
-    document.body.classList.toggle('lui-leftNavToggle');
-    if (document.getElementsByClassName('fd-tabs').length > 0) {
-      dispatch('resizeTabNav', {});
-    }
-  }
-
-  export function semicollapsedNav() {
-    SemiCollapsibleNavigation.buttonClicked();
-    if (document.getElementsByClassName('fd-tabs').length > 0) {
-      dispatch('resizeTabNav', {});
-    }
-  }
-
-  export function userInfoUpdate(event) {
-    const uInfo = event.detail;
-    userInfo = uInfo ? uInfo : {};
-  }
-</script>
-
-<style type="text/scss">
-  @import 'styles/variables';
-  /*Remove Safari bug with blue outlines of dropdowns in the shellbar*/
-  .fd-shellbar:focus {
-    outline: none;
-  }
-
-  .fd-shellbar {
-    padding: 0 0.5rem;
-  }
-
-  .hideNavComponent {
-    display: none;
-  }
-
-  .nav-icon {
-    height: 100%;
-  }
-
-  .fd-top-nav__icon {
-    img {
-      max-height: 16px;
-      vertical-align: top;
-      max-width: 16px;
-    }
-  }
-
-  img {
-    &.fd-top-nav__icon {
-      height: 16px;
-      min-width: auto;
-    }
-  }
-
-  .fd-popover {
-    .nav-icon {
-      height: 2em;
-    }
-  }
-
-  .lui-burger {
-    cursor: pointer;
-    color: var(--sapShell_TextColor, #fff);
-  }
-
-  @media (min-width: $desktopMinWidth) {
-    :global(.lui-mobileOnly) .lui-burger {
-      display: none;
-    }
-  }
-
-  :global(.no-side-nav) {
-    .lui-burger {
-      display: none;
-    }
-  }
-
-  .fd-top-nav__icon {
-    display: inline-block;
-    vertical-align: middle;
-    min-width: 16px;
-  }
-
-  .fd-user-menu .fd-shellbar__button {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-  }
-
-  .fd-user-menu .fd-avatar {
-    cursor: pointer;
-  }
-</style>
diff --git a/core/src/navigation/TopNav.svelte b/core/src/navigation/TopNav.svelte
new file mode 100644
index 0000000000..bdaf9a19be
--- /dev/null
+++ b/core/src/navigation/TopNav.svelte
@@ -0,0 +1,872 @@
+<script>
+  import LogoTitle from './LogoTitle.svelte';
+  import BadgeCounter from './BadgeCounter.svelte';
+  import Authorization from '../Authorization.html';
+  import AuthorizationSimpleProfileMenu from '../AuthorizationSimpleProfileMenu.html';
+  import TopNavDropDown from '../TopNavDropDown.html';
+  import ContextSwitcher from './ContextSwitcher.svelte';
+  import ProductSwitcher from './ProductSwitcher.svelte';
+  import GlobalSearch from './GlobalSearch.html';
+  import GlobalSearchCentered from './GlobalSearchCentered.html';
+  import TopNavNode from './TopNavNode.svelte';
+  import { beforeUpdate, createEventDispatcher, onMount, getContext } from 'svelte';
+  import { LuigiAuth, LuigiConfig, LuigiI18N } from '../core-api';
+  import {
+    AuthHelpers,
+    NavigationHelpers,
+    RoutingHelpers,
+    StateHelpers,
+    EventListenerHelpers,
+    GenericHelpers
+  } from '../utilities/helpers';
+  import { SemiCollapsibleNavigation } from './services/semi-collapsed-navigation';
+
+  const dispatch = createEventDispatcher();
+  export let authorizationEnabled;
+  export let autologinEnabled;
+  export let isLoggedIn = false;
+  export let hideNavComponent;
+  export let responsiveNavSetting;
+  export let profileTypeSettings;
+  export let showGlobalNav;
+  export let pathData;
+  let previousPathData;
+  export let pathParams;
+  export let dropDownStates = {};
+  export let children;
+  export let selectedNode;
+  export let visibleNodeCount;
+  export let globalNavNodeCount;
+  export let totalBadgeNode;
+  export let isProductSwitcherAvailable;
+  export let productSwitcherConfig;
+  export let openMobileDropDown;
+  export let nodeForMobile;
+  export let profileItemsAvailable;
+  export let userInfo = {};
+  export let urlAuthError;
+  export let globalSearchConfig;
+  export let isGlobalSearchCentered;
+  export let isSearchFieldVisible;
+  export let inputElem;
+  export let luigiCustomSearchRenderer__slot;
+  export let displaySearchResult;
+  export let displayCustomSearchResult;
+  export let searchResult;
+  export let burgerTooltip;
+
+  let store = getContext('store');
+  let contextSwitcherToggle = false;
+  let selectedLabel;
+  let defaultLabelContextSwitcher;
+  let contextSwitcherConfig = LuigiConfig.getConfigValue('navigation.contextSwitcher');
+  export let addNavHrefForAnchor = LuigiConfig.getConfigBooleanValue(
+    'navigation.addNavHrefs'
+  );
+  const setTopNavData = async () => {
+    if (pathData && 0 < pathData.length) {
+      const tnd = await NavigationHelpers.generateTopNavNodes(pathData);
+      children = tnd.children;
+      selectedNode = tnd.selectedNode;
+      visibleNodeCount = tnd.visibleNodeCount;
+      totalBadgeNode = tnd.totalBadgeNode;
+      globalNavNodeCount = tnd.globalNavNodeCount;
+      window.TOPNAVDATA = tnd.children;
+      previousPathData = pathData;
+    }
+  };
+
+  const setLoggedInState = () => {
+    isLoggedIn = AuthHelpers.isLoggedIn();
+  };
+
+  onMount(() => {
+    StateHelpers.doOnStoreChange(
+      store,
+      () => {
+        authorizationEnabled = LuigiAuth.isAuthorizationEnabled();
+        profileItemsAvailable = LuigiConfig.getConfigValue('navigation.profile');
+        autologinEnabled = !Boolean(LuigiConfig.getConfigValue('auth.disableAutoLogin'));
+        isProductSwitcherAvailable = LuigiConfig.getConfigValue(
+          'navigation.productSwitcher'
+        );
+        hideNavComponent = LuigiConfig.getConfigBooleanValue('settings.hideNavigation');
+        responsiveNavSetting = LuigiConfig.getConfigValue(
+          'settings.responsiveNavigation'
+        );
+        profileTypeSettings = LuigiConfig.getConfigValue('settings.profileType');
+        productSwitcherConfig = NavigationHelpers.getProductSwitcherConfig();
+        globalSearchConfig = LuigiConfig.getConfigValue('globalSearch');
+        isGlobalSearchCentered =
+          globalSearchConfig &&
+          globalSearchConfig.searchFieldCentered &&
+          GenericHelpers.requestExperimentalFeature('globalSearchCentered', true);
+        showGlobalNav =
+          LuigiConfig.getConfigBooleanValue('settings.globalSideNavigation') &&
+          GenericHelpers.requestExperimentalFeature('globalNav', true);
+        addNavHrefForAnchor = LuigiConfig.getConfigBooleanValue('navigation.addNavHrefs');
+        contextSwitcherConfig = LuigiConfig.getConfigValue('navigation.contextSwitcher');
+      },
+      ['navigation']
+    );
+
+    EventListenerHelpers.addEventListener('message', e => {
+      if ('luigi.navigation.update-badge-counters' === e.data.msg) {
+        setTopNavData();
+      }
+    });
+  });
+
+  beforeUpdate(() => {
+    if (!previousPathData || previousPathData != pathData) {
+      setTopNavData();
+    }
+    setLoggedInState();
+  });
+
+  export let showTopNav;
+  $: showTopNav =
+    (authorizationEnabled && (!autologinEnabled || isLoggedIn)) || !authorizationEnabled;
+
+  function getSapIconStr(iconString) {
+    return NavigationHelpers.renderIconClassName(iconString);
+  }
+
+  function hasOpenUIicon(node) {
+    return NavigationHelpers.isOpenUIiconName(node.icon);
+  }
+
+  function getNodeLabel(node) {
+    return LuigiI18N.getTranslation(node.label);
+  }
+
+  function getTestId(node) {
+    return node.testId
+      ? node.testId
+      : NavigationHelpers.prepareForTests(node.pathSegment, node.label);
+  }
+
+  function getRouteLink(node) {
+    return RoutingHelpers.getNodeHref(node, pathParams);
+  }
+
+  function resolveTooltipText(node, translation) {
+    return NavigationHelpers.generateTooltipText(node, translation);
+  }
+
+  export function openMobileProductSwitcher() {
+    toggleDropdownState('productSwitcherPopover');
+  }
+
+  export function openMobileContextSwitcher() {
+    contextSwitcherToggle = !contextSwitcherToggle;
+    toggleDropdownState('contextSwitcherPopover');
+  }
+
+  export function openMobileTopNavDropDown(node) {
+    openMobileDropDown = true;
+    nodeForMobile = node;
+  }
+
+  export function closeMobileTopNavDropDown() {
+    openMobileDropDown = false;
+  }
+
+  export function handleClick(node) {
+    dispatch('handleClick', { node });
+  }
+
+  export function handleSearchNavigation(node) {
+    dispatch('handleSearchNavigation', { node });
+  }
+
+  export function handleClickExternal(event) {
+    handleClick(event.detail.node);
+  }
+
+  export function toggleDropdownState(name) {
+    const ddStates = dropDownStates || {};
+    const dropDownState = !ddStates[name];
+
+    closeAllDropdowns();
+    closeMobileTopNavDropDown();
+    ddStates[name] = dropDownState;
+
+    dropDownStates = ddStates;
+  }
+
+  export function toggleDropdownStateExternal(event) {
+    toggleDropdownState(event.detail.name);
+  }
+
+  function setFocusOnGlobalSearchFieldMobile() {
+    if (inputElem) {
+      inputElem.focus();
+    }
+  }
+
+  export function toggleSearch() {
+    if (!isSearchFieldVisible)
+      setTimeout(() => {
+        setFocusOnGlobalSearchFieldMobile();
+      });
+    dispatch('toggleSearch', {
+      isSearchFieldVisible,
+      inputElem,
+      luigiCustomSearchRenderer__slot
+    });
+  }
+
+  export function closeAllDropdowns() {
+    const ddStates = dropDownStates || {};
+    const keys = Object.keys(ddStates);
+    if (keys && keys.length > 0) {
+      keys.forEach(k => {
+        ddStates[k] = false;
+        dropDownStates = ddStates;
+      });
+    }
+  }
+
+  function burgerClickHandler() {
+    if (
+      responsiveNavSetting === 'simple' ||
+      responsiveNavSetting === 'simpleMobileOnly'
+    ) {
+      simpleNav();
+    } else {
+      semicollapsedNav();
+    }
+    setBurgerTooltip();
+  }
+
+  function setBurgerTooltip() {
+    if (!NavigationHelpers.getBurgerTooltipConfig()) {
+      return;
+    }
+    const [
+      collapseNavTooltip,
+      expandNavTooltip
+    ] = NavigationHelpers.getBurgerTooltipConfig();
+    if (collapseNavTooltip && expandNavTooltip) {
+      if (document.body.classList.contains('lui-simpleSlideInNav')) {
+        burgerTooltip = document.body.classList.contains('lui-leftNavToggle')
+          ? collapseNavTooltip
+          : expandNavTooltip;
+      }
+      if (document.body.classList.contains('lui-semiCollapsible')) {
+        burgerTooltip = document.body.classList.contains('semiCollapsed')
+          ? collapseNavTooltip
+          : expandNavTooltip;
+      }
+    }
+  }
+
+  export function simpleNav() {
+    document.body.classList.toggle('lui-leftNavToggle');
+    if (document.getElementsByClassName('fd-tabs').length > 0) {
+      dispatch('resizeTabNav', {});
+    }
+  }
+
+  export function semicollapsedNav() {
+    SemiCollapsibleNavigation.buttonClicked();
+    if (document.getElementsByClassName('fd-tabs').length > 0) {
+      dispatch('resizeTabNav', {});
+    }
+  }
+
+  export function userInfoUpdate(event) {
+    const uInfo = event.detail;
+    userInfo = uInfo ? uInfo : {};
+  }
+</script>
+
+<svelte:window on:click={closeAllDropdowns} on:blur={closeAllDropdowns} />
+{#if showTopNav}
+  <div
+    class="fd-shellbar {hideNavComponent ? 'hideNavComponent' : ''}"
+    tabindex="0"
+  >
+    <div class="fd-shellbar__group fd-shellbar__group--product">
+      {#if responsiveNavSetting === 'simple' || responsiveNavSetting === 'simpleMobileOnly' || responsiveNavSetting === 'Fiori3'}
+        <button
+          class="fd-shellbar__button fd-button lui-burger"
+          on:click={burgerClickHandler}
+          tabindex="0"
+          title={burgerTooltip}
+        >
+          <i class="sap-icon sap-icon--menu2" />
+        </button>
+      {/if}
+      <LogoTitle
+        {pathData}
+        {pathParams}
+        {addNavHrefForAnchor}
+        bind:dropDownStates
+        on:toggleDropdownState={toggleDropdownStateExternal}
+        on:handleClick={handleClickExternal}
+      />
+    </div>
+    {#if globalSearchConfig && isGlobalSearchCentered}
+      <div class="lui-global-search">
+        <GlobalSearchCentered
+          {globalSearchConfig}
+          bind:isSearchFieldVisible
+          on:toggleSearch
+          on:handleSearchNavigation
+          bind:searchResult
+          bind:displaySearchResult
+          bind:displayCustomSearchResult
+          bind:inputElem
+          bind:luigiCustomSearchRenderer__slot
+          on:closeSearchResult
+        />
+      </div>
+    {/if}
+    <div class="fd-shellbar__group fd-shellbar__group--actions">
+      {#if !authorizationEnabled || isLoggedIn}
+        {#if globalSearchConfig && !isGlobalSearchCentered}
+          <GlobalSearch
+            bind:isSearchFieldVisible
+            on:toggleSearch
+            on:handleSearchNavigation
+            bind:searchResult
+            bind:displaySearchResult
+            bind:displayCustomSearchResult
+            bind:inputElem
+            bind:luigiCustomSearchRenderer__slot
+            on:closeSearchResult
+            {globalSearchConfig}
+          />
+        {/if}
+        <ContextSwitcher
+          bind:dropDownStates
+          on:toggleDropdownState={() =>
+            toggleDropdownState('contextSwitcherPopover')}
+          isMobile={false}
+          {addNavHrefForAnchor}
+        />
+      {/if}
+      {#if globalSearchConfig || (children && pathData.length > 0)}
+        {#if children && pathData.length > 0}
+          {#each children as node, i}
+            {#if !(node.hideFromNav || (showGlobalNav && node.globalNav))}
+              {#if node.isCat}
+                <div
+                  class="fd-shellbar__action fd-shellbar__action--hide fd-shellbar__action--desktop"
+                >
+                  <div class="fd-popover fd-popover--right">
+                    <div
+                      class="fd-popover__control"
+                      on:click|stopPropagation={() => {}}
+                    >
+                      <button
+                        title={resolveTooltipText(node, getNodeLabel(node))}
+                        class="fd-shellbar__button fd-button {node ===
+                        selectedNode
+                          ? 'is-selected'
+                          : ''}"
+                        aria-controls="dropDownPopover-{i}"
+                        aria-expanded={dropDownStates[`dropDownPopover-${i}`] ||
+                          false}
+                        aria-haspopup="true"
+                        on:click={() =>
+                          toggleDropdownState(`dropDownPopover-${i}`)}
+                        data-testid={getTestId(node)}
+                      >
+                        <TopNavNode bind:node />
+                        <BadgeCounter {node} />
+                      </button>
+                    </div>
+                    <div
+                      class="fd-popover__body fd-popover__body--right"
+                      aria-hidden={!(
+                        dropDownStates[`dropDownPopover-${i}`] || false
+                      )}
+                      id="dropDownPopover-{i}"
+                    >
+                      <TopNavDropDown
+                        {node}
+                        isMobile={false}
+                        {pathParams}
+                        {addNavHrefForAnchor}
+                      />
+                    </div>
+                  </div>
+                </div>
+              {:else}
+                <div
+                  class="fd-shellbar__action fd-shellbar__action--hide fd-shellbar__action--desktop"
+                >
+                  {#if addNavHrefForAnchor}
+                    <a
+                      href={getRouteLink(node)}
+                      class="fd-shellbar__button fd-button {node ===
+                      selectedNode
+                        ? 'is-selected'
+                        : ''}"
+                      title={resolveTooltipText(node, getNodeLabel(node))}
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      on:click|preventDefault={() => handleClick(node)}
+                      data-testid={getTestId(node)}
+                    >
+                      <TopNavNode bind:node />
+                      <BadgeCounter {node} />
+                    </a>
+                  {:else}
+                    <button
+                      title={resolveTooltipText(node, getNodeLabel(node))}
+                      class="fd-shellbar__button fd-button {node ===
+                      selectedNode
+                        ? 'is-selected'
+                        : ''}"
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      on:click={() => handleClick(node)}
+                      data-testid={getTestId(node)}
+                    >
+                      <TopNavNode bind:node />
+                      <BadgeCounter {node} />
+                    </button>
+                  {/if}
+                </div>
+              {/if}
+            {/if}
+          {/each}
+        {/if}
+        <!-- Sample Markup for Notifications
+            <div class="fd-shellbar__action fd-shellbar__action--desktop">
+              <button class="fd-shellbar__button fd-button sap-icon--bell" aria-label="Notifications">
+                <span class="fd-counter fd-counter--notification fd-shellbar__counter--notification" aria-label="Unread count">25</span>
+              </button>
+            </div>
+    -->
+
+        <!-- dropdown for top nav nodes on smaller screens -->
+        {#if visibleNodeCount - globalNavNodeCount > 0 || isProductSwitcherAvailable || contextSwitcherConfig || globalSearchConfig}
+          <div class="fd-shellbar__action fd-shellbar__action--mobile">
+            <div class="fd-shellbar-collapse">
+              <div class="fd-popover fd-popover--right">
+                <div
+                  class="fd-popover__control"
+                  on:click|stopPropagation={() => {}}
+                >
+                  <div
+                    class="fd-shellbar-collapse--control"
+                    aria-expanded="false"
+                    aria-haspopup="true"
+                    role="button"
+                  >
+                    <button
+                      class="fd-shellbar__button fd-button"
+                      aria-controls="overflowPopover"
+                      aria-expanded={dropDownStates.overflowPopover || false}
+                      aria-haspopup="true"
+                      on:click={() => toggleDropdownState('overflowPopover')}
+                      data-testid="mobile-menu"
+                    >
+                      <i class="sap-icon sap-icon--overflow" />
+                      <BadgeCounter node={totalBadgeNode} special="true" />
+                    </button>
+                  </div>
+                </div>
+                <div
+                  class="fd-popover__body fd-popover__body--right"
+                  aria-hidden={!(dropDownStates.overflowPopover || false)}
+                  id="overflowPopover"
+                >
+                  <nav class="fd-menu">
+                    <ul class="fd-menu__list fd-menu__list--no-shadow">
+                      {#if globalSearchConfig && !isGlobalSearchCentered}
+                        <li class="fd-menu__item">
+                          <a
+                            class="fd-menu__link"
+                            on:click|stopPropagation={() => {
+                              toggleSearch(),
+                                toggleDropdownState('overflowPopover');
+                            }}
+                            data-testid="luigi-search-btn-mobile"
+                          >
+                            <i
+                              class="sap-icon sap-icon--search fd-top-nav__icon"
+                            />
+                            <span class="fd-menu__title">Search</span>
+                          </a>
+                        </li>
+                      {/if}
+                      {#if contextSwitcherConfig && (!authorizationEnabled || isLoggedIn)}
+                        <li class="fd-menu__item">
+                          <a
+                            class="fd-menu__link"
+                            on:click|stopPropagation={openMobileContextSwitcher}
+                          >
+                            <i
+                              class="sap-icon fd-top-nav__icon {contextSwitcherConfig.icon &&
+                              hasOpenUIicon(contextSwitcherConfig)
+                                ? getSapIconStr(contextSwitcherConfig.icon)
+                                : 'sap-icon--switch-views'}"
+                            />
+                            <span class="fd-menu__title"
+                              >{selectedLabel
+                                ? selectedLabel
+                                : defaultLabelContextSwitcher}</span
+                            >
+                          </a>
+                        </li>
+                      {/if}
+                      {#if children}
+                        {#each children as node, i}
+                          {#if !(node.hideFromNav || (showGlobalNav && node.globalNav))}
+                            {#if !node.isCat}
+                              <li class="fd-menu__item">
+                                <a
+                                  href={getRouteLink(node)}
+                                  class="fd-menu__link {node === selectedNode
+                                    ? 'is-selected'
+                                    : ''}"
+                                  on:click|preventDefault={() =>
+                                    handleClick(node)}
+                                  data-testid="{getTestId(node)}-mobile"
+                                >
+                                  <span
+                                    class="fd-top-nav__icon sap-icon {node.icon &&
+                                    hasOpenUIicon(node)
+                                      ? getSapIconStr(node.icon)
+                                      : ''}"
+                                  >
+                                    {#if !hasOpenUIicon(node)}
+                                      <img
+                                        src={node.icon}
+                                        alt={node.altText ? node.altText : ''}
+                                      />
+                                    {/if}
+                                    <BadgeCounter {node} />
+                                  </span>
+                                  <span class="fd-menu__title"
+                                    >{getNodeLabel(node)}</span
+                                  >
+                                </a>
+                              </li>
+                            {:else}
+                              <li class="fd-menu__item">
+                                <a
+                                  href={getRouteLink(node)}
+                                  title={resolveTooltipText(
+                                    node,
+                                    getNodeLabel(node)
+                                  )}
+                                  class="fd-menu__link"
+                                  on:click|preventDefault={() =>
+                                    openMobileTopNavDropDown(node)}
+                                  data-e2e="mobile-topnav-dropdown-category"
+                                >
+                                  <span class="fd-top-nav__icon">
+                                    {#if hasOpenUIicon(node)}
+                                      <i
+                                        class="sap-icon {node.icon &&
+                                        hasOpenUIicon(node)
+                                          ? getSapIconStr(node.icon)
+                                          : ''}"
+                                      />
+                                    {:else}
+                                      <img
+                                        src={node.icon}
+                                        alt={node.altText ? node.altText : ''}
+                                      />
+                                    {/if}
+                                    <BadgeCounter {node} />
+                                  </span>
+                                  <span class="fd-list__title"
+                                    >{getNodeLabel(node)}</span
+                                  >
+                                </a>
+                              </li>
+                              <!-- {:else}
+                <li class="fd-menu__item">
+                  <a
+                    href="{getRouteLink(node)}"
+                    title="{getNodeLabel(node)}"
+                    class="fd-menu__link"
+                    on:click|preventDefault="openMobileTopNavDropDown(node)"
+                    data-testid="mobile-topnav-dropdown-category"
+                  >
+                    {#if node.icon} {#if hasOpenUIicon(node)}
+                    <span
+                      class="fd-top-nav__icon sap-icon {getSapIconStr(node.icon)}"
+                    ></span>
+                    {:else}
+                    <img
+                      class="fd-top-nav__icon nav-icon"
+                      src="{node.icon}"
+                    >
+                    {/if} {/if}
+                    <span class="fd-list__title">{getNodeLabel(node)}</span>
+                  </a>
+                </li>-->
+                              <!-- {/if} -->
+                            {/if}
+                          {/if}
+                        {/each}
+                      {/if}
+                      {#if isProductSwitcherAvailable}
+                        <li class="fd-menu__item">
+                          <a
+                            class="fd-menu__link"
+                            on:click|stopPropagation={openMobileProductSwitcher}
+                            data-testid="mobile-product-switcher"
+                          >
+                            {#if hasOpenUIicon(productSwitcherConfig) || !productSwitcherConfig.icon}
+                              <i
+                                class="fd-top-nav__icon sap-icon {getSapIconStr(
+                                  productSwitcherConfig.icon || 'grid'
+                                )}"
+                              />
+                            {:else}
+                              <span class="fd-top-nav__icon sap-icon">
+                                <img
+                                  src={productSwitcherConfig.icon}
+                                  alt={productSwitcherConfig.altText
+                                    ? productSwitcherConfig.altText
+                                    : ''}
+                                />
+                              </span>
+                            {/if}
+                            <span class="fd-menu__title"
+                              >{productSwitcherConfig.label}</span
+                            >
+                          </a>
+                        </li>
+                      {/if}
+                    </ul>
+                  </nav>
+                </div>
+                {#if isProductSwitcherAvailable}
+                  <ProductSwitcher
+                    bind:dropDownStates
+                    on:toggleDropdownState={() =>
+                      toggleDropdownState('productSwitcherPopover')}
+                    isMobile={true}
+                  />
+                {/if}
+                {#if openMobileDropDown}
+                  <TopNavDropDown
+                    node={nodeForMobile}
+                    isMobile={true}
+                    on:close={closeMobileTopNavDropDown}
+                    {pathParams}
+                  />
+                {/if}
+                {#if !authorizationEnabled || isLoggedIn}
+                  <ContextSwitcher
+                    bind:dropDownStates
+                    on:toggleDropdownState={() =>
+                      toggleDropdownState('contextSwitcherPopover')}
+                    isMobile={true}
+                    {contextSwitcherToggle}
+                    bind:selectedLabel
+                    bind:defaultLabel={defaultLabelContextSwitcher}
+                  />
+                {/if}
+              </div>
+            </div>
+          </div>
+        {/if}
+      {/if}
+      <!-- closes {#if children && pathData.length > 0} -->
+      {#if authorizationEnabled || profileItemsAvailable}
+        <div
+          class="fd-shellbar__action fd-shellbar__action--show-always"
+          data-testid="luigi-topnav-profile"
+        >
+          {#if profileTypeSettings === 'Fiori3' && GenericHelpers.requestExperimentalFeature('profileMenuFiori3', true)}
+            <div class="fd-popover fd-popover--right fd-user-menu">
+              <div
+                class="fd-popover__control"
+                on:click|stopPropagation={() => {}}
+              >
+                {#if userInfo.picture}
+                  <button
+                    class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail"
+                    aria-controls="profilePopover"
+                    aria-expanded="true"
+                    aria-haspopup="true"
+                    title={userInfo.name ? userInfo.name : undefined}
+                    tabindex="0"
+                    style="background-image:url('{userInfo.picture}')"
+                    on:click={() => toggleDropdownState('profilePopover')}
+                    data-testid="luigi-topnav-profile-btn"
+                  />
+                {:else}
+                  <button
+                    class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail"
+                    aria-expanded="true"
+                    aria-haspopup="true"
+                    title={userInfo.name ? userInfo.name : undefined}
+                    tabindex="0"
+                    on:click={() => toggleDropdownState('profilePopover')}
+                    data-testid="luigi-topnav-profile-initials"
+                  >
+                    {userInfo.initials ? userInfo.initials : ''}
+                  </button>
+                {/if}
+              </div>
+              <div
+                class="fd-popover__body fd-popover__body--right"
+                aria-hidden={!(dropDownStates.profilePopover || false)}
+                id="profilePopover"
+              >
+                <Authorization
+                  on:toggleDropdownState={() =>
+                    toggleDropdownState('profilePopover')}
+                  on:userInfoUpdated={userInfoUpdate}
+                  {addNavHrefForAnchor}
+                />
+              </div>
+            </div>
+          {:else}
+            <div class="fd-user-menu">
+              <div class="fd-popover">
+                <div
+                  class="fd-popover__control"
+                  on:click|stopPropagation={() => {}}
+                >
+                  <div
+                    class={userInfo.picture
+                      ? 'fd-shellbar__button--user-menu'
+                      : ''}
+                  >
+                    <button
+                      class="fd-button fd-shellbar__button"
+                      aria-expanded={dropDownStates.profilePopover || false}
+                      aria-haspopup="true"
+                      aria-controls="profilePopover"
+                      on:click={() => toggleDropdownState('profilePopover')}
+                      title={userInfo.name ? userInfo.name : undefined}
+                      tabindex="0"
+                      data-testid="luigi-topnav-profile-btn"
+                    >
+                      {#if userInfo.picture}
+                        <span
+                          class="fd-avatar fd-avatar--xs fd-avatar--circle"
+                          style="background-image:url('{userInfo.picture}')"
+                        />
+                      {:else}
+                        <i
+                          class="sap-icon {!userInfo.picture
+                            ? 'sap-icon--customer'
+                            : 'fd-identifier fd-identifier--xs fd-identifier--circle'}"
+                        />
+                      {/if}
+                    </button>
+                  </div>
+                </div>
+                <div
+                  class="fd-popover__body fd-popover__body--right"
+                  aria-hidden={!(dropDownStates.profilePopover || false)}
+                  id="profilePopover"
+                >
+                  <AuthorizationSimpleProfileMenu
+                    on:toggleDropdownState={() =>
+                      toggleDropdownState('profilePopover')}
+                    on:userInfoUpdated={userInfoUpdate}
+                    {addNavHrefForAnchor}
+                  />
+                </div>
+              </div>
+            </div>
+          {/if}
+        </div>
+      {/if}
+      {#if isProductSwitcherAvailable}
+        <ProductSwitcher
+          bind:dropDownStates
+          on:toggleDropdownState={() =>
+            toggleDropdownState('productSwitcherPopover')}
+          isMobile={false}
+          {addNavHrefForAnchor}
+        />
+      {/if}
+    </div>
+  </div>
+{:else}
+  <AuthorizationSimpleProfileMenu
+    on:toggleDropdownState={() => toggleDropdownState('profilePopover')}
+    isHidden={true}
+    {addNavHrefForAnchor}
+  />
+{/if}
+
+<style type="text/scss">
+  @import 'styles/variables';
+  /*Remove Safari bug with blue outlines of dropdowns in the shellbar*/
+  .fd-shellbar:focus {
+    outline: none;
+  }
+
+  .fd-shellbar {
+    padding: 0 0.5rem;
+  }
+
+  .hideNavComponent {
+    display: none;
+  }
+
+  .nav-icon {
+    height: 100%;
+  }
+
+  .fd-top-nav__icon {
+    img {
+      max-height: 16px;
+      vertical-align: top;
+      max-width: 16px;
+    }
+  }
+
+  img {
+    &.fd-top-nav__icon {
+      height: 16px;
+      min-width: auto;
+    }
+  }
+
+  .fd-popover {
+    .nav-icon {
+      height: 2em;
+    }
+  }
+
+  .lui-burger {
+    cursor: pointer;
+    color: var(--sapShell_TextColor, #fff);
+  }
+
+  @media (min-width: $desktopMinWidth) {
+    :global(.lui-mobileOnly) .lui-burger {
+      display: none;
+    }
+  }
+
+  :global(.no-side-nav) {
+    .lui-burger {
+      display: none;
+    }
+  }
+
+  .fd-top-nav__icon {
+    display: inline-block;
+    vertical-align: middle;
+    min-width: 16px;
+  }
+
+  .fd-user-menu .fd-shellbar__button {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+
+  .fd-user-menu .fd-avatar {
+    cursor: pointer;
+  }
+</style>
diff --git a/core/src/navigation/TopNavNode.html b/core/src/navigation/TopNavNode.svelte
similarity index 60%
rename from core/src/navigation/TopNavNode.html
rename to core/src/navigation/TopNavNode.svelte
index 46a518c826..9ce007fbfc 100644
--- a/core/src/navigation/TopNavNode.html
+++ b/core/src/navigation/TopNavNode.svelte
@@ -1,19 +1,3 @@
-{#if node.icon} {#if hasOpenUIicon(node)}
-<span class="fd-top-nav__icon sap-icon {getSapIconStr(node.icon)}"></span>
-{:else}
-<img
-  class="fd-top-nav__icon sap-icon"
-  src="{node.icon}"
-  alt="{node.altText ? node.altText : ''}"
-/>
-{/if}
-<!-- end hasOpenUIicon-->
-{/if}
-<!-- end node.icon -->
-{#if !node.icon || node.showLabel}
-<span>{getNodeLabel(node)}</span>
-{/if}
-
 <script>
   import { NavigationHelpers } from '../utilities/helpers';
   import { LuigiI18N } from '../core-api';
@@ -32,3 +16,20 @@
     return LuigiI18N.getTranslation(node.label);
   }
 </script>
+
+{#if node.icon}
+  {#if hasOpenUIicon(node)}
+    <span class="fd-top-nav__icon sap-icon {getSapIconStr(node.icon)}" />
+  {:else}
+    <img
+      class="fd-top-nav__icon sap-icon"
+      src={node.icon}
+      alt={node.altText ? node.altText : ''}
+    />
+  {/if}
+  <!-- end hasOpenUIicon-->
+{/if}
+<!-- end node.icon -->
+{#if !node.icon || node.showLabel}
+  <span>{getNodeLabel(node)}</span>
+{/if}