diff --git a/changelog/unreleased/bugfix-repair-navigtion-highlighter b/changelog/unreleased/bugfix-repair-navigtion-highlighter
new file mode 100644
index 00000000000..0d330933627
--- /dev/null
+++ b/changelog/unreleased/bugfix-repair-navigtion-highlighter
@@ -0,0 +1,5 @@
+Bugfix: Repair navigation highlighter
+
+We've refactored the navigation highlighter to fix several small glitches.
+
+https://github.com/owncloud/web/pull/7210
\ No newline at end of file
diff --git a/changelog/unreleased/enhancement-show-search-item-in-left-sidebar b/changelog/unreleased/enhancement-show-search-item-in-left-sidebar
new file mode 100644
index 00000000000..731a5bc7d49
--- /dev/null
+++ b/changelog/unreleased/enhancement-show-search-item-in-left-sidebar
@@ -0,0 +1,7 @@
+Enhancement: Show nav item in left side sidebar while searching
+
+We've introduced a new nav item in the left sidebar which will fade in,
+while using the 'Search all files' search provider.
+
+https://github.com/owncloud/web/pull/7210
+https://github.com/owncloud/web/issues/7190
diff --git a/packages/web-app-files/src/index.js b/packages/web-app-files/src/index.js
index 416dadbcae4..779cdc2b88d 100644
--- a/packages/web-app-files/src/index.js
+++ b/packages/web-app-files/src/index.js
@@ -41,6 +41,16 @@ const appInfo = {
   fileSideBars
 }
 const navItems = [
+  {
+    name: $gettext('Search'),
+    icon: 'search',
+    route: {
+      path: `/${appInfo.id}/search/list`
+    },
+    enabled() {
+      return window.location.pathname === this.route.path
+    }
+  },
   {
     name(capabilities) {
       return capabilities.spaces?.enabled ? $gettext('Personal') : $gettext('All files')
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index f3bd37f2472..e1b3d068048 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -17,10 +17,11 @@
     </oc-button>
     <nav class="oc-sidebar-nav oc-my-m oc-px-xs" :aria-label="$gettext('Sidebar navigation menu')">
       <oc-list>
+        <div id="nav-highlighter" class="oc-ml-s oc-background-primary-gradient" />
         <sidebar-nav-item
-          v-for="(link, index) in navItems"
+          v-for="link in navItems"
           :key="link.route.path"
-          :index="index"
+          :index="getUuid()"
           :target="link.route.path"
           :active="link.active"
           :icon="link.icon"
@@ -39,6 +40,7 @@
 <script>
 import { mapState, mapActions } from 'vuex'
 import SidebarNavItem from './SidebarNavItem.vue'
+import * as uuid from 'uuid'
 
 export default {
   components: {
@@ -50,6 +52,26 @@ export default {
       required: true
     }
   },
+  mounted() {
+    const navItem = document.getElementsByClassName('oc-sidebar-nav-item-link')[0]
+    const highlighter = document.getElementById('nav-highlighter')
+
+    if (!highlighter || !navItem) {
+      return
+    }
+
+    const resizeObserver = new ResizeObserver((data) => {
+      const width = data[0].borderBoxSize[0].inlineSize
+      highlighter.style.setProperty('transition-duration', `0.05s`)
+      highlighter.style.setProperty('width', `${width}px`)
+    }).observe(navItem)
+    highlighter.style.setProperty('width', `${navItem.clientWidth}px`)
+    highlighter.style.setProperty('height', `${navItem.clientHeight}px`)
+
+    this.$on('beforeDestroy', () => {
+      resizeObserver.disconnect()
+    })
+  },
   computed: {
     ...mapState(['navigation']),
 
@@ -68,12 +90,21 @@ export default {
 
     toggleSidebarButtonClick() {
       return this.navigation.closed ? this.openNavigation() : this.closeNavigation()
+    },
+
+    getUuid() {
+      return uuid.v4().replaceAll('-', '')
     }
   }
 }
 </script>
 
 <style lang="scss">
+#nav-highlighter {
+  position: absolute;
+  border-radius: 5px;
+  transition: transform 0.2s cubic-bezier(0.51, 0.06, 0.56, 1.37);
+}
 #web-nav-sidebar {
   background-color: var(--oc-color-background-default);
   border-radius: 15px;
@@ -84,6 +115,10 @@ export default {
   transition: all 0.35s cubic-bezier(0.34, 0.11, 0, 1.12);
   z-index: 4;
 
+  .oc-list {
+    position: relative;
+  }
+
   .toggle-sidebar-button {
     min-height: 3rem;
     transition: all 0.2s ease-out;
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
index 425c5c38f95..094feed46c2 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
@@ -1,5 +1,9 @@
 <template>
-  <li class="oc-sidebar-nav-item oc-pb-xs oc-px-s" :aria-current="active ? 'page' : null">
+  <li
+    ref="item"
+    class="oc-sidebar-nav-item oc-pb-xs oc-px-s"
+    :aria-current="active ? 'page' : null"
+  >
     <oc-button
       v-oc-tooltip="toolTip"
       type="router-link"
@@ -15,25 +19,20 @@
         <span class="oc-ml-m text" :class="{ 'text-invisible': collapsed }" v-text="name" />
       </span>
       <oc-tag v-if="tag" class="oc-py-rm" size="small">{{ tag }}</oc-tag>
-      <sidebar-nav-item-highlight :index="index" :active="active" />
     </oc-button>
   </li>
 </template>
 <script>
-import SidebarNavItemHighlight from './SidebarNavItemHighlight.vue'
 import get from 'lodash-es/get'
 
 export default {
-  components: {
-    SidebarNavItemHighlight
-  },
   props: {
     name: {
       type: String,
       required: true
     },
     index: {
-      type: Number,
+      type: String,
       required: true
     },
     active: {
@@ -82,6 +81,29 @@ export default {
         arrow: false
       }
     }
+  },
+  watch: {
+    active(active) {
+      if (!active) return
+      this.animateHighlightPosition(this.index)
+    }
+  },
+  mounted() {
+    if (!this.active) return
+    this.animateHighlightPosition(this.index)
+  },
+  methods: {
+    animateHighlightPosition(target, durationSeconds = 0.2) {
+      const highlightedElement = document.getElementById('nav-highlighter')
+      if (!highlightedElement) {
+        return
+      }
+      const targetElement = this.$refs.item
+      const offset = targetElement.offsetTop
+      const style = highlightedElement.style
+      style.setProperty('transition-duration', `${durationSeconds}s`)
+      style.setProperty('transform', `translateY(${offset}px)`)
+    }
   }
 }
 </script>
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNavItemHighlight.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNavItemHighlight.vue
deleted file mode 100644
index c488d7d3c05..00000000000
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNavItemHighlight.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-  <span
-    v-if="initial"
-    id="highlighter"
-    class="oc-background-primary-gradient"
-    :data-initial-id="index"
-  />
-</template>
-<script>
-export default {
-  props: {
-    index: {
-      type: Number,
-      required: true
-    },
-    active: {
-      type: Boolean,
-      required: true
-    }
-  },
-  data() {
-    return {
-      initial: false
-    }
-  },
-  watch: {
-    active(active) {
-      if (!active) return
-      this.animateHighlightPosition(this.index)
-    }
-  },
-  created() {
-    if (!this.active) return
-    this.initial = true
-  },
-  methods: {
-    animateHighlightPosition(target, durationSeconds = 0.2) {
-      const highlightedElement = document.getElementById('highlighter')
-      if (!highlightedElement) {
-        return
-      }
-      const initialId = highlightedElement.getAttribute('data-initial-id')
-      const currentElement = this.getNavigationItem(initialId)
-      const targetElement = this.getNavigationItem(target)
-      const distanceAbs = this.getDistanceBetweenElements(currentElement, targetElement)
-      const distance = target < initialId ? -distanceAbs : distanceAbs
-      const style = highlightedElement.style
-      style.setProperty('transition-duration', `${durationSeconds}s`)
-      style.setProperty('transform', `translateY(${distance}px)`)
-    },
-    getNavigationItem(index) {
-      return document.querySelectorAll(`[data-nav-id="${index}"]`)[0]
-    },
-    getPositionAtCenter(element) {
-      const { top, left, width, height } = element.getBoundingClientRect()
-      return {
-        x: left + width / 2,
-        y: top + height / 2
-      }
-    },
-    getDistanceBetweenElements(a, b) {
-      const aPosition = this.getPositionAtCenter(a)
-      const bPosition = this.getPositionAtCenter(b)
-      return Math.hypot(aPosition.x - bPosition.x, aPosition.y - bPosition.y)
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-#highlighter {
-  border-radius: 5px;
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  transition: transform 0.2s cubic-bezier(0.51, 0.06, 0.56, 1.37);
-  z-index: -1;
-
-  &::before {
-    bottom: 0;
-    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.14);
-    content: '';
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 40px;
-  }
-}
-</style>
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js b/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js
index 9e6473c316a..1746df1df23 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/SidebarNav.spec.js
@@ -7,6 +7,12 @@ import SidebarNav from 'web-runtime/src/components/SidebarNav/SidebarNav.vue'
 import stubs from '../../../../../../tests/unit/stubs'
 import sidebarNavItemFixtures from '../../../../../../__fixtures__/sidebarNavItems'
 
+jest.mock('uuid', () => ({
+  v4: () => {
+    return '00000000-0000-0000-0000-000000000000'
+  }
+}))
+
 const localVue = createLocalVue()
 localVue.use(Vuex)
 localVue.use(DesignSystem)
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
index 1c7d2242891..724f1207912 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNav.spec.js.snap
@@ -6,9 +6,10 @@ exports[`OcSidebarNav renders navItems into a list 1`] = `
   </button>
   <nav aria-label="Sidebar navigation menu" class="oc-sidebar-nav oc-my-m oc-px-xs">
     <oc-list-stub>
-      <sidebar-nav-item-stub name="Personal" index="0" active="true" target="/files/list/all" icon="folder" filltype="fill"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shares" index="1" target="/files/list/shared-with-me" icon="share-forward" filltype="fill"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Deleted files" index="2" target="/files/list/trash-bin" icon="delete" filltype="fill"></sidebar-nav-item-stub>
+      <div id="nav-highlighter" class="oc-ml-s oc-background-primary-gradient"></div>
+      <sidebar-nav-item-stub name="Personal" index="00000000000000000000000000000000" active="true" target="/files/list/all" icon="folder" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shares" index="00000000000000000000000000000000" target="/files/list/shared-with-me" icon="share-forward" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Deleted files" index="00000000000000000000000000000000" target="/files/list/trash-bin" icon="delete" filltype="fill"></sidebar-nav-item-stub>
     </oc-list-stub>
   </nav> <span class="footer">Footer</span>
 </div>
@@ -20,9 +21,10 @@ exports[`OcSidebarNav toggles back into open state upon button click 1`] = `
   </button>
   <nav aria-label="Sidebar navigation menu" class="oc-sidebar-nav oc-my-m oc-px-xs">
     <oc-list-stub>
-      <sidebar-nav-item-stub name="Personal" index="0" active="true" target="/files/list/all" icon="folder" filltype="fill"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shares" index="1" target="/files/list/shared-with-me" icon="share-forward" filltype="fill"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Deleted files" index="2" target="/files/list/trash-bin" icon="delete" filltype="fill"></sidebar-nav-item-stub>
+      <div id="nav-highlighter" class="oc-ml-s oc-background-primary-gradient"></div>
+      <sidebar-nav-item-stub name="Personal" index="00000000000000000000000000000000" active="true" target="/files/list/all" icon="folder" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shares" index="00000000000000000000000000000000" target="/files/list/shared-with-me" icon="share-forward" filltype="fill"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Deleted files" index="00000000000000000000000000000000" target="/files/list/trash-bin" icon="delete" filltype="fill"></sidebar-nav-item-stub>
     </oc-list-stub>
   </nav> <span class="footer">Footer</span>
 </div>
@@ -34,9 +36,10 @@ exports[`OcSidebarNav toggles into closed state upon button click 1`] = `
   </button>
   <nav aria-label="Sidebar navigation menu" class="oc-sidebar-nav oc-my-m oc-px-xs">
     <oc-list-stub>
-      <sidebar-nav-item-stub name="Personal" index="0" active="true" target="/files/list/all" icon="folder" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Shares" index="1" target="/files/list/shared-with-me" icon="share-forward" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
-      <sidebar-nav-item-stub name="Deleted files" index="2" target="/files/list/trash-bin" icon="delete" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
+      <div id="nav-highlighter" class="oc-ml-s oc-background-primary-gradient"></div>
+      <sidebar-nav-item-stub name="Personal" index="00000000000000000000000000000000" active="true" target="/files/list/all" icon="folder" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Shares" index="00000000000000000000000000000000" target="/files/list/shared-with-me" icon="share-forward" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
+      <sidebar-nav-item-stub name="Deleted files" index="00000000000000000000000000000000" target="/files/list/trash-bin" icon="delete" filltype="fill" collapsed="true"></sidebar-nav-item-stub>
     </oc-list-stub>
   </nav> <span class="footer">Footer</span>
 </div>
diff --git a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap
index 3bd1ef056ae..7fc94c03b24 100644
--- a/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap
+++ b/packages/web-runtime/tests/unit/components/SidebarNav/__snapshots__/SidebarNavItem.spec.js.snap
@@ -4,7 +4,6 @@ exports[`OcSidebarNav renders navItem with toolTip if collapsed 1`] = `
 <li class="oc-sidebar-nav-item oc-pb-xs oc-px-s" id="123">
   <router-link-stub to="/files/list/all" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5"><span class="oc-flex"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span> <span class="oc-ml-m text text-invisible">Personal</span></span>
     <!---->
-    <!---->
   </router-link-stub>
 </li>
 `;
@@ -13,7 +12,6 @@ exports[`OcSidebarNav renders navItem without toolTip if expanded 1`] = `
 <li class="oc-sidebar-nav-item oc-pb-xs oc-px-s" id="123">
   <router-link-stub to="/files/list/all" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-sidebar-nav-item-link" data-nav-id="5"><span class="oc-flex"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span> <span class="oc-ml-m text">Personal</span></span>
     <!---->
-    <!---->
   </router-link-stub>
 </li>
 `;