Merge pull request #552 from CuBoulder/issue/267

Completes in-content menu blocks
CuBoulder · Nov 15, 2023 · 2047042 · 2047042
2 parents b2d433e + ca25960
commit 2047042
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 20 deletions.
diff --git a/boulder_base.libraries.yml b/boulder_base.libraries.yml
@@ -99,7 +99,7 @@ ucb-site-contact-info-footer:
   css:
     theme:
       css/ucb-site-contact-info-footer.css: {}
-      
+
 ucb-hero-unit:
   version: 1.x
   js:

diff --git a/css/ucb-menu.css b/css/ucb-menu.css
@@ -6,6 +6,10 @@
   display: none;
 }
 
+.ucb-menu .ucb-menu {
+  display: none;
+}
+
 @media only screen and (max-width: 600px) {
   .ucb-mobile-menu-button-div {
     line-height: 2em;
@@ -26,7 +30,7 @@
     line-height: 2rem;
     margin-left: 2px;
   }
-  .ucb-main-nav-continer.ucb-secondary-menu-position-above .ucb-secondary-menu-region ≈, .ucb-main-nav-continer.ucb-secondary-menu-position-above .ucb-secondary-menu-region .ucb-menu {
+  .ucb-main-nav-continer.ucb-secondary-menu-position-above .ucb-secondary-menu-region, .ucb-main-nav-continer.ucb-secondary-menu-position-above .ucb-secondary-menu-region .ucb-menu {
     gap: 0;
   }
   .ucb-main-nav-continer.ucb-secondary-menu-position-above .ucb-secondary-menu-region {
@@ -92,3 +96,90 @@
     line-height: 2rem;
   }
 }
+
+.ucb-page-content .ucb-menu {
+  flex-direction: column;
+  margin-bottom: 20px;
+  --ucb-menu-indent-start: 10px;
+  --ucb-menu-indent-inc: 5px;
+  --ucb-menu-indent-border-width: 2px;
+}
+
+.ucb-page-content .ucb-menu .ucb-menu {
+  margin: 0;
+}
+
+.ucb-page-content .ucb-menu .expanded>.ucb-menu {
+  display: block;
+}
+
+.ucb-page-content .ucb-menu .collapsed>.ucb-menu {
+  display: none;
+}
+
+.ucb-page-content .ucb-menu li.menu-item {
+  border-bottom: 1px solid rgba(0, 0, 0, .09);
+}
+
+.ucb-page-content .ucb-menu li.menu-item.active {
+  background-color: inherit;
+}
+
+.ucb-page-content .ucb-menu .ucb-menu li.menu-item {
+  border-bottom: none;
+}
+
+.ucb-page-content .ucb-menu li.menu-item:last-child {
+  border-bottom: none;
+}
+
+.ucb-page-content .ucb-menu li.menu-item a.nav-link {
+  color: inherit;
+  font-size: 1em;
+  line-height: 1.2em;
+  border-radius: 0;
+  margin: 0;
+  padding: 10px 10px 10px var(--ucb-menu-indent-start);
+}
+
+.ucb-page-content .ucb-menu li.menu-item a.nav-link:hover {
+  color: #000;
+  background-color: rgba(0, 0, 0, .09);
+}
+
+.ucb-page-content .ucb-menu li.menu-item a.nav-link.is-active {
+  color: #000;
+  background-color: var(--ucb-gold);
+}
+
+.ucb-page-content .ucb-menu .ucb-menu li.menu-item a.nav-link {
+  font-weight: 400;
+  font-size: .9em;
+  padding: 7px 10px 7px calc(var(--ucb-menu-indent-start) + var(--ucb-menu-indent-inc) - var(--ucb-menu-indent-border-width));
+}
+
+.ucb-page-content .ucb-menu .ucb-menu .ucb-menu li.menu-item a.nav-link {
+  padding-left: calc(var(--ucb-menu-indent-start) + var(--ucb-menu-indent-inc) * 2);
+}
+
+.ucb-page-content .ucb-menu .ucb-menu .ucb-menu .ucb-menu li.menu-item a.nav-link {
+  padding-left: calc(var(--ucb-menu-indent-start) + var(--ucb-menu-indent-inc) * 3);
+}
+
+.ucb-page-content .ucb-menu .ucb-menu .ucb-menu .ucb-menu .ucb-menu li.menu-item a.nav-link {
+  padding-left: calc(var(--ucb-menu-indent-start) + var(--ucb-menu-indent-inc) * 4);
+}
+
+.ucb-page-content .ucb-menu .expanded.active>a.nav-link,
+.ucb-page-content .ucb-menu .expanded.active>.ucb-menu {
+  border-left: var(--ucb-menu-indent-border-width) solid var(--ucb-gold);
+}
+
+.ucb-page-content .ucb-menu .ucb-menu .expanded.active>a.nav-link,
+.ucb-page-content .ucb-menu .ucb-menu .expanded.active>.ucb-menu {
+  border-left: none;
+}
+
+.ucb-page-content .ucb-menu .expanded.active>a.nav-link {
+  padding-left: calc(var(--ucb-menu-indent-start) - var(--ucb-menu-indent-border-width));
+}
diff --git a/templates/block/block--system-menu-block.html.twig b/templates/block/block--system-menu-block.html.twig
@@ -6,13 +6,12 @@
 #}
 
 {% set classes = [
-  'container',
-    'block',
-    'block-' ~ configuration.provider|clean_class,
-    'block-' ~ plugin_id|clean_class,
-    bundle ? 'block--type-' ~ bundle|clean_class,
-    view_mode ? 'block--view-mode-' ~ view_mode|clean_class,
-    'ucb-system-menu-block'
+  'block',
+  'block-' ~ configuration.provider|clean_class,
+  'block-' ~ plugin_id|clean_class,
+  bundle ? 'block--type-' ~ bundle|clean_class,
+  view_mode ? 'block--view-mode-' ~ view_mode|clean_class,
+  'ucb-system-menu-block'
 ] %}
 
 {% block content %}

diff --git a/templates/layout/page.html.twig b/templates/layout/page.html.twig
@@ -50,7 +50,7 @@
   {# HEADER CONTENT #}
   {% block page_header %}
     {{ attach_library('boulder_base/ucb-social-media') }}
-
+    {{ attach_library('boulder_base/ucb-menu') }}
     {% set menu_style = drupal_config('boulder_base.settings', 'ucb_menu_style') %}
     {% if menu_style == 'highlight'  %}
       {{ attach_library('boulder_base/ucb-menu-style-highlight') }}
@@ -191,7 +191,7 @@
             </div>
           </div>
         {% elseif page.left_sidebar|render %}
-          <div class="ucb-layout-container container  g-0">
+          <div class="ucb-layout-container container g-0">
             <div class="layout-row row">
               <div class="ucb-left-sidebar ucb-sidebar col-sm-12 col-md-4 col-lg-3">
                 {{ page.left_sidebar }}
@@ -202,7 +202,7 @@
             </div>
           </div>
         {% elseif page.right_sidebar|render %}
-          <div class="ucb-layout-container container  g-0">
+          <div class="ucb-layout-container container g-0">
             <div class="layout-row row">
               <div class="ucb-layout-main col-sm-12 col-md-8 col-lg-9 ucb-has-sidebar">
                 {{ page.content }}

diff --git a/templates/navigation/menu.html.twig b/templates/navigation/menu.html.twig
@@ -36,14 +36,13 @@
 {% macro menu_links(items, attributes, menu_level) %}
   {% import _self as menus %}
   {% if items %}
-    {{ attach_library('boulder_base/ucb-menu') }}
     <ul{{ attributes.addClass('ucb-menu nav') }}>
       {% for item in items %}
         {% set classes = [
           'menu-item',
-          item.is_expanded ? 'dropdown hovernav menu-dropdown',
-          item.is_collapsed ? 'dropdown hovernav menu-dropdown',
-          item.in_active_trail ? 'active',
+          item.is_expanded ? 'expanded',
+          item.is_collapsed ? 'collapsed',
+          item.in_active_trail ? 'active'
         ] %}
         <li{{ item.attributes.addClass(classes) }}>
           {% if item.title|upper == "HOME" %}
@@ -52,10 +51,8 @@
               <i class="fa-solid fa-home"></i>
             </a>
           {% elseif item.below %}
-            {{ link(item.title, item.url, { 'class':['nav-link', 'dropdown-toggle']}) }}
-            <ul class="dropdown-menu ucb-dropdown-menu">
-              {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
-            </ul>
+            {{ link(item.title, item.url, { 'class': ['nav-link']}) }}
+            {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
           {% else %}
             {{ link(item.title, item.url, { 'class': ['nav-link']}) }}
           {% endif %}
-Original file line number
+Diff line change
@@ Expand Up / @@ -99,7 +99,7 @@ ucb-site-contact-info-footer: @@
       css:
         theme:
           css/ucb-site-contact-info-footer.css: {}
     ucb-hero-unit:
       version: 1.x
       js:
@@ Expand Down @@