Added new variables for the expandable navbar section

Author: alexandrevryghem

src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss

@@ -6,15 +6,20 @@
 }
 
 .dropdown-menu {
-    background-color: var(--ds-navbar-bg);
+    background-color: var(--ds-expandable-navbar-bg);
     overflow: hidden;
     min-width: 100%;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     ::ng-deep a.nav-link {
+        color: var(--ds-expandable-navbar-link-color) !important;
         padding-right: var(--bs-spacer);
         padding-left: var(--bs-spacer);
         white-space: nowrap;
+
+        &:hover, &:focus {
+          color: var(--ds-expandable-navbar-link-color-hover) !important;
+        }
     }
 }
 

src/styles/_custom_variables.scss

@@ -29,6 +29,9 @@
   --ds-header-navbar-border-bottom-color: #{$gray-400};
   --ds-navbar-link-color: #{$cyan};
   --ds-navbar-link-color-hover: #{darken($cyan, 15%)};
+  --ds-expandable-navbar-bg: var(--ds-navbar-bg);
+  --ds-expandable-navbar-link-color: var(--ds-navbar-link-color);
+  --ds-expandable-navbar-link-color-hover: var(--ds-navbar-link-color-hover);
 
   $admin-sidebar-bg: darken(#2B4E72, 17%);
   $admin-sidebar-active-bg: darken($admin-sidebar-bg, 3%);