From e7806d00273fbfff1c5215cd0f459bcc508ae01e Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Thu, 1 Sep 2022 10:19:48 +0200
Subject: [PATCH 1/2] Add hover effect for left sidebar

---
 .../unreleased/enhancement-left-sidebar-hover    |  6 ++++++
 .../src/components/SidebarNav/SidebarNav.vue     | 16 ++++++++++++++++
 .../src/components/SidebarNav/SidebarNavItem.vue |  6 +++++-
 3 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 changelog/unreleased/enhancement-left-sidebar-hover

diff --git a/changelog/unreleased/enhancement-left-sidebar-hover b/changelog/unreleased/enhancement-left-sidebar-hover
new file mode 100644
index 00000000000..32d781ae303
--- /dev/null
+++ b/changelog/unreleased/enhancement-left-sidebar-hover
@@ -0,0 +1,6 @@
+Enhancement: Left sidebar hover effect
+
+We've added a hover effect to the left sidebar items.
+
+https://github.com/owncloud/web/issues/7540
+https://github.com/owncloud/web/pull/7567
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index 24af5f0e13a..ab04bdbff3e 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -141,6 +141,22 @@ export default {
   .toggle-sidebar-button-expanded {
     justify-content: flex-end !important;
   }
+
+  .oc-sidebar-nav li a {
+    &:hover,
+    &:focus {
+      text-decoration: none !important;
+      background-color: var(--oc-color-background-hover);
+      color: var(--oc-color-swatch-passive-default);
+    }
+  }
+
+  .oc-sidebar-nav li a.active {
+    &:focus,
+    &:hover {
+      color: var(--oc-color-swatch-inverse-default);
+    }
+  }
 }
 .oc-app-navigation-expanded {
   min-width: 230px !important;
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
index 6d0f9cca90b..4bcda5e9c72 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
@@ -9,7 +9,11 @@
       type="router-link"
       appearance="raw"
       :variation="active ? 'inverse' : 'passive'"
-      :class="['oc-sidebar-nav-item-link', { active: active }]"
+      :class="[
+        'oc-sidebar-nav-item-link',
+        { active: active },
+        { 'oc-background-primary-gradient': active }
+      ]"
       :to="target"
       :data-nav-id="index"
       :data-nav-name="navName"

From 8f1d848dcf797ee22b8fd15ecf134871224efaf4 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Thu, 1 Sep 2022 10:58:06 +0200
Subject: [PATCH 2/2] Remove transition delay on sidebar text

---
 .../web-runtime/src/components/SidebarNav/SidebarNavItem.vue     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
index 4bcda5e9c72..dc8b512057a 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
@@ -130,7 +130,6 @@ export default {
   .text {
     opacity: 1;
     transition: all 0s;
-    transition-delay: 0.1s;
   }
   .text-invisible {
     opacity: 0 !important;