From 66e430ab9a7a6f4df5197ad079daf0e9e39614c8 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 7 Jun 2025 16:25:20 +0200
Subject: [PATCH] Feature/add background gradient to sidebar navigation (#4850)

* Add background gradient to sidebar navigation

* Update changelog
---
 CHANGELOG.md                                         |  4 ++++
 .../src/app/components/header/header.component.scss  | 12 ++++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index be60a7bfe..00c480234 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added a background gradient to the sidebar navigation
+
 ### Changed
 
 - Improved the language localization for German (`de`)
diff --git a/apps/client/src/app/components/header/header.component.scss b/apps/client/src/app/components/header/header.component.scss
index d73bf1a8a..97f8cd354 100644
--- a/apps/client/src/app/components/header/header.component.scss
+++ b/apps/client/src/app/components/header/header.component.scss
@@ -7,7 +7,11 @@
 
     .logo-container {
       &.filled {
-        background-color: rgba(var(--palette-foreground-base), 0.02);
+        background: linear-gradient(
+          to bottom,
+          transparent,
+          rgba(var(--palette-foreground-base), 0.02)
+        );
       }
 
       @media (min-width: 576px) {
@@ -56,7 +60,11 @@
 
     .logo-container {
       &.filled {
-        background-color: rgba(var(--palette-foreground-base-dark), 0.02);
+        background: linear-gradient(
+          to bottom,
+          transparent,
+          rgba(var(--palette-foreground-base-dark), 0.02)
+        );
       }
     }
   }