Merge pull request #1544 from CuBoulder/issue/1513

Sidebar menu theme styles

CHANGELOG.md

@@ -9,6 +9,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- ### Sidebar menu theme styles
+  Styles applied when the light gray sidebar menu style option is picked in the theme configuration. Styles override basic options with new css file.
+
+  Sister PR: https://github.com/CuBoulder/ucb_site_configuration/pull/75
+
+  Resolves Issue #1513 
+---
+
 - ### Resolve URL Hash for mega menus
   Resolves #1536.
   Changes the functionality of the hash set function to only affect menus that are not mega menus.

boulder_base.libraries.yml

@@ -5,7 +5,8 @@ ucb-global:
       css/bootstrap/bootstrap.min.css: {}
       css/layout.css: {}
     theme:
-      https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&family=Roboto:wght@400;500;700&display=swap: { type: external }
+      https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&family=Roboto:wght@400;500;700&display=swap:
+        { type: external }
       css/style-responsive.css: {}
       css/styleguide/global.css: {}
       css/styleguide/branding.css: {}
@@ -527,3 +528,9 @@ ucb-newsletter-list-block:
   css:
     theme:
       css/block/ucb-newsletter-list-block.css: {}
+
+ucb-sidebar-menu-style-gray:
+  version: 1.x
+  css:
+    theme:
+      css/menu-styles/ucb-sidebar-gray-styles.css: {weight: 50}

css/menu-styles/ucb-sidebar-gray-styles.css

@@ -0,0 +1,17 @@
+.ucb-page-content .ucb-menu {
+  border-width: 1px 0px 1px 1px;
+  border-style: solid;
+  border-color: var(--ucb-light-gray);
+}
+
+.ucb-page-content .ucb-menu li.menu-item a.nav-link.is-active, .ucb-page-content .ucb-menu .menu-item.active:last-child > a {
+  background-color: var(--ucb-light-gray);
+}
+
+.ucb-page-content .ucb-menu .expanded.active > a.nav-link, .ucb-page-content .ucb-menu .expanded.active > .ucb-menu {
+  border: none;
+}
+
+.ucb-page-content .ucb-menu li.menu-item {
+  border: none;
+}

templates/layout/page.html.twig

@@ -80,6 +80,10 @@
     {% else %}
       {{ attach_library('boulder_base/ucb-menu-style-default') }}
     {% endif %}
+    {% set sidebar_menu_style = drupal_config('boulder_base.settings', 'ucb_sidebar_menu_style') %}
+    {% if sidebar_menu_style == 'light-gray'  %}
+      {{ attach_library('boulder_base/ucb-sidebar-menu-style-gray') }}
+    {% endif %}
     {% set header_color = 'black' %}
     {% set campus_header_color = 'black' %}
     {% set campus_header_text_color = 'white' %}