From eeecea4e2e01b50e0b23359c4ffc50b162cbef12 Mon Sep 17 00:00:00 2001
From: Jacob Korf <korfj921921@gmail.com>
Date: Wed, 7 Aug 2024 14:59:20 -0600
Subject: [PATCH 01/23] mega menu initial changes

---
 boulder_base.libraries.yml                    |  6 ++
 css/block/ucb-mega-menu.css                   | 28 ++++++++
 templates/block/block--mega_menu.html.twig    |  6 ++
 .../field--field-display-mega-menu.html.twig  |  3 +
 ...ield--field-mega-menu-menu-links.html.twig |  3 +
 .../field--field-mega-menu-select.html.twig   |  3 +
 .../field--field_mega_menu_heading.html.twig  |  3 +
 .../field--field_mega_menu_links.html.twig    |  3 +
 ...ield--field_mega_menu_links_desc.html.twig |  3 +
 ...ield--field_mega_menu_links_link.html.twig |  3 +
 ...field_mega_menu_links_list_label.html.twig |  3 +
 ...field_mega_menu_links_list_links.html.twig |  3 +
 ...ield--field_mega_menu_text_above.html.twig |  5 ++
 ...ield--field_mega_menu_text_below.html.twig |  3 +
 templates/navigation/menu--extras.html.twig   | 64 +++++++++++++++++++
 .../paragraph--mega-menu-links-list.html.twig |  6 ++
 .../paragraph--mega-menu-links.html.twig      |  6 ++
 .../regions/region--primary-menu.html.twig    |  2 +-
 18 files changed, 152 insertions(+), 1 deletion(-)
 create mode 100644 css/block/ucb-mega-menu.css
 create mode 100644 templates/block/block--mega_menu.html.twig
 create mode 100644 templates/field/field--field-display-mega-menu.html.twig
 create mode 100644 templates/field/field--field-mega-menu-menu-links.html.twig
 create mode 100644 templates/field/field--field-mega-menu-select.html.twig
 create mode 100644 templates/field/field--field_mega_menu_heading.html.twig
 create mode 100644 templates/field/field--field_mega_menu_links.html.twig
 create mode 100644 templates/field/field--field_mega_menu_links_desc.html.twig
 create mode 100644 templates/field/field--field_mega_menu_links_link.html.twig
 create mode 100644 templates/field/field--field_mega_menu_links_list_label.html.twig
 create mode 100644 templates/field/field--field_mega_menu_links_list_links.html.twig
 create mode 100644 templates/field/field--field_mega_menu_text_above.html.twig
 create mode 100644 templates/field/field--field_mega_menu_text_below.html.twig
 create mode 100644 templates/navigation/menu--extras.html.twig
 create mode 100644 templates/paragraphs/paragraph--mega-menu-links-list.html.twig
 create mode 100644 templates/paragraphs/paragraph--mega-menu-links.html.twig

diff --git a/boulder_base.libraries.yml b/boulder_base.libraries.yml
index 57fd053f..76bfc56c 100644
--- a/boulder_base.libraries.yml
+++ b/boulder_base.libraries.yml
@@ -483,3 +483,9 @@ ucb-social-media-icons-block:
   css:
     theme:
       css/block/social-media-icons.css: {}
+
+ucb-mega-menu-block:
+  version: 1.x
+  css:
+    theme:
+      css/block/ucb-mega-menu.css: {}
diff --git a/css/block/ucb-mega-menu.css b/css/block/ucb-mega-menu.css
new file mode 100644
index 00000000..9c01e4f4
--- /dev/null
+++ b/css/block/ucb-mega-menu.css
@@ -0,0 +1,28 @@
+.ucb-mega-menu-column-wrapper {
+    display: flex;
+}
+.ucb-mega-menu-column-links-wrapper {
+    display: block;
+    padding: 0;
+    margin: 0;
+}
+
+.ucb-mega-menu-column-links-wrapper li {
+    display: block;
+    padding: 0;
+    margin: 0 0 10px 0;
+    list-style-type: none;
+}
+
+.ucb-mega-menu-text-above {
+    flex-grow: 1;
+}
+.ucb-mega-menu-column {
+    flex-grow: 1;
+}
+.ucb-mega-menu-column-links-wrapper a {
+    display: block;
+}
+.ucb-mega-menu-link-desc {
+    font-size: 75%;
+}
\ No newline at end of file
diff --git a/templates/block/block--mega_menu.html.twig b/templates/block/block--mega_menu.html.twig
new file mode 100644
index 00000000..d444cd56
--- /dev/null
+++ b/templates/block/block--mega_menu.html.twig
@@ -0,0 +1,6 @@
+{{ attach_library('boulder_base/ucb-mega-menu-block') }}
+    <div class="ucb-mega-menu-column-wrapper">
+        {{content.field_mega_menu_text_above|render}}
+        {{content.field_mega_menu_menu_links}}
+    </div>
+    {{content.field_mega_menu_text_below|render}}
diff --git a/templates/field/field--field-display-mega-menu.html.twig b/templates/field/field--field-display-mega-menu.html.twig
new file mode 100644
index 00000000..9ce23690
--- /dev/null
+++ b/templates/field/field--field-display-mega-menu.html.twig
@@ -0,0 +1,3 @@
+{% for item in items %}
+{{ item.content}}
+{% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field-mega-menu-menu-links.html.twig b/templates/field/field--field-mega-menu-menu-links.html.twig
new file mode 100644
index 00000000..9ce23690
--- /dev/null
+++ b/templates/field/field--field-mega-menu-menu-links.html.twig
@@ -0,0 +1,3 @@
+{% for item in items %}
+{{ item.content}}
+{% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field-mega-menu-select.html.twig b/templates/field/field--field-mega-menu-select.html.twig
new file mode 100644
index 00000000..0c6e67d6
--- /dev/null
+++ b/templates/field/field--field-mega-menu-select.html.twig
@@ -0,0 +1,3 @@
+{% for item in items %}
+{{ item}}
+ {% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_heading.html.twig b/templates/field/field--field_mega_menu_heading.html.twig
new file mode 100644
index 00000000..9ce23690
--- /dev/null
+++ b/templates/field/field--field_mega_menu_heading.html.twig
@@ -0,0 +1,3 @@
+{% for item in items %}
+{{ item.content}}
+{% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_links.html.twig b/templates/field/field--field_mega_menu_links.html.twig
new file mode 100644
index 00000000..9ce23690
--- /dev/null
+++ b/templates/field/field--field_mega_menu_links.html.twig
@@ -0,0 +1,3 @@
+{% for item in items %}
+{{ item.content}}
+{% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_links_desc.html.twig b/templates/field/field--field_mega_menu_links_desc.html.twig
new file mode 100644
index 00000000..9ce23690
--- /dev/null
+++ b/templates/field/field--field_mega_menu_links_desc.html.twig
@@ -0,0 +1,3 @@
+{% for item in items %}
+{{ item.content}}
+{% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_links_link.html.twig b/templates/field/field--field_mega_menu_links_link.html.twig
new file mode 100644
index 00000000..9ce23690
--- /dev/null
+++ b/templates/field/field--field_mega_menu_links_link.html.twig
@@ -0,0 +1,3 @@
+{% for item in items %}
+{{ item.content}}
+{% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_links_list_label.html.twig b/templates/field/field--field_mega_menu_links_list_label.html.twig
new file mode 100644
index 00000000..9ce23690
--- /dev/null
+++ b/templates/field/field--field_mega_menu_links_list_label.html.twig
@@ -0,0 +1,3 @@
+{% for item in items %}
+{{ item.content}}
+{% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_links_list_links.html.twig b/templates/field/field--field_mega_menu_links_list_links.html.twig
new file mode 100644
index 00000000..9ce23690
--- /dev/null
+++ b/templates/field/field--field_mega_menu_links_list_links.html.twig
@@ -0,0 +1,3 @@
+{% for item in items %}
+{{ item.content}}
+{% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_text_above.html.twig b/templates/field/field--field_mega_menu_text_above.html.twig
new file mode 100644
index 00000000..db73afc7
--- /dev/null
+++ b/templates/field/field--field_mega_menu_text_above.html.twig
@@ -0,0 +1,5 @@
+<div class = "ucb-mega-menu-text-above">
+{% for item in items %}
+{{ item.content}}
+{% endfor %}
+</div>
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_text_below.html.twig b/templates/field/field--field_mega_menu_text_below.html.twig
new file mode 100644
index 00000000..9ce23690
--- /dev/null
+++ b/templates/field/field--field_mega_menu_text_below.html.twig
@@ -0,0 +1,3 @@
+{% for item in items %}
+{{ item.content}}
+{% endfor %}
\ No newline at end of file
diff --git a/templates/navigation/menu--extras.html.twig b/templates/navigation/menu--extras.html.twig
new file mode 100644
index 00000000..9323c361
--- /dev/null
+++ b/templates/navigation/menu--extras.html.twig
@@ -0,0 +1,64 @@
+{#
+/**
+ * @file
+ * Contains the template to display a menu.
+ *
+ * Available variables:
+ * - menu_name: The machine name of the menu.
+ * - items: A nested list of menu items. Each menu item contains:
+ *   - attributes: HTML attributes for the menu item.
+ *   - below: The menu item child items.
+ *   - title: The menu link title.
+ *   - url: The menu link url, instance of \Drupal\Core\Url
+ *   - localized_options: Menu link localized options.
+ *   - is_expanded: TRUE if the link has visible children within the current
+ *   menu tree.
+ *   - is_collapsed: TRUE if the link has children within the current menu tree
+ *   that are not currently visible.
+ *   - in_active_trail: TRUE if the link is in the active trail.
+ *   - is_unpublished: TRUE if the link is to an unpublished node.
+ */
+#}
+{% import _self as menus %}
+
+{#
+  We call a macro which calls itself to render the full tree.
+  @see http://twig.sensiolabs.org/doc/tags/macro.html
+#}
+{{ menus.menu_links(items, attributes, 0) }}
+{% macro menu_links(items, attributes, menu_level) %}
+  {% if items %}
+    <ul{{ attributes.addClass('ucb-menu nav') }}>
+      {% for item in items %}
+        {% set classes = [
+          'menu-item',
+          item.is_expanded ? 'expanded',
+          item.is_collapsed ? 'collapsed',
+          item.in_active_trail ? 'active',
+          item.is_unpublished ? 'unpublished'
+        ] %}
+
+        <li{{ item.attributes.addClass(classes) }}>
+<div class="ucb-mega-menu-wrapper">
+    <h2 class= "ucb-mega-menu-header">{{item.content.field_mega_menu_select.0.content.field_mega_menu_heading|render}}</h2>
+    </div>
+        {{item.content.field_mega_menu_select}}
+          {% if item.title|upper == 'HOME' %}
+            <a{{ create_attribute({ href: item.url|render, class: 'ucb-home-button nav-link', title: item.title }) }}>
+              <i class="fa-solid fa-home"></i>
+              <span class="visually-hidden">{{ item.title }}</span>
+            </a>
+          {% else %}
+            {% set title = item.is_unpublished ? {
+                '#markup': '<i class="fa-solid fa-eye-slash"></i> ' ~ item.title|e ~ ' <span class="visually-hidden">(Unpublished)</span>'
+              } : item.title %}
+            {{ link(title, item.url, create_attribute({ class: 'nav-link' })) }}
+            {% if item.below %}
+              {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
+            {% endif %}
+          {% endif %}
+        </li>
+      {% endfor %}
+    </ul>
+  {% endif %}
+{% endmacro %}
diff --git a/templates/paragraphs/paragraph--mega-menu-links-list.html.twig b/templates/paragraphs/paragraph--mega-menu-links-list.html.twig
new file mode 100644
index 00000000..2ae375d5
--- /dev/null
+++ b/templates/paragraphs/paragraph--mega-menu-links-list.html.twig
@@ -0,0 +1,6 @@
+<div class = "ucb-mega-menu-column">
+<strong class = "ucb-mega-menu-column-label">{{ content.field_mega_menu_links_list_label|render}}</strong>
+<ul class = "ucb-mega-menu-column-links-wrapper">
+{{ content.field_mega_menu_links_list_links|render }}
+</ul>
+</div>
\ No newline at end of file
diff --git a/templates/paragraphs/paragraph--mega-menu-links.html.twig b/templates/paragraphs/paragraph--mega-menu-links.html.twig
new file mode 100644
index 00000000..347f846f
--- /dev/null
+++ b/templates/paragraphs/paragraph--mega-menu-links.html.twig
@@ -0,0 +1,6 @@
+<li>
+{{ content.field_mega_menu_links_link|render }}
+<div class = "ucb-mega-menu-link-desc">
+{{ content.field_mega_menu_links_desc|render }}
+</div>
+</li>
\ No newline at end of file
diff --git a/templates/regions/region--primary-menu.html.twig b/templates/regions/region--primary-menu.html.twig
index 39d5195e..c5804102 100644
--- a/templates/regions/region--primary-menu.html.twig
+++ b/templates/regions/region--primary-menu.html.twig
@@ -15,7 +15,7 @@
 <div class="ucb-primary-menu-region-container{{ ucb_secondary_menu_position == 'above' ? ' container' : '' }}">
   <nav class="ucb-main-menu">
     <div class="ucb-primary-menu-region">
-      {{ content }}
+      {{content}}
     </div>
   </nav>
 </div>

From 1643ed3b5e7f805a431fdc3f8b0814f01f9834d6 Mon Sep 17 00:00:00 2001
From: Jacob Korf <korfj921921@gmail.com>
Date: Wed, 7 Aug 2024 15:06:45 -0600
Subject: [PATCH 02/23] changes to structure

---
 templates/navigation/menu--extras.html.twig | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/navigation/menu--extras.html.twig b/templates/navigation/menu--extras.html.twig
index 9323c361..31779ebf 100644
--- a/templates/navigation/menu--extras.html.twig
+++ b/templates/navigation/menu--extras.html.twig
@@ -40,9 +40,9 @@
 
         <li{{ item.attributes.addClass(classes) }}>
 <div class="ucb-mega-menu-wrapper">
-    <h2 class= "ucb-mega-menu-header">{{item.content.field_mega_menu_select.0.content.field_mega_menu_heading|render}}</h2>
-    </div>
+    <h2 class= "ucb-mega-menu-header">{{dump(item.content.field_mega_menu_select.0.content.field_mega_menu_heading)}}</h2>
         {{item.content.field_mega_menu_select}}
+    </div>
           {% if item.title|upper == 'HOME' %}
             <a{{ create_attribute({ href: item.url|render, class: 'ucb-home-button nav-link', title: item.title }) }}>
               <i class="fa-solid fa-home"></i>

From 01e9ff0a870e0dd7f551a207f6cefe76c9afe7d8 Mon Sep 17 00:00:00 2001
From: Jacob Korf <korfj921921@gmail.com>
Date: Fri, 9 Aug 2024 09:36:00 -0600
Subject: [PATCH 03/23] almost functional mega menu

---
 boulder_base.libraries.yml                    |  2 +
 css/block/ucb-mega-menu.css                   |  9 +++
 js/ucb-mega-menu.js                           | 16 +++++
 templates/block/block--mega_menu.html.twig    |  5 +-
 .../field--field_mega_menu_select.html.twig   |  3 +
 templates/navigation/menu--extras.html.twig   | 70 ++++++++++++-------
 6 files changed, 79 insertions(+), 26 deletions(-)
 create mode 100644 js/ucb-mega-menu.js
 create mode 100644 templates/field/field--field_mega_menu_select.html.twig

diff --git a/boulder_base.libraries.yml b/boulder_base.libraries.yml
index 76bfc56c..b376abbd 100644
--- a/boulder_base.libraries.yml
+++ b/boulder_base.libraries.yml
@@ -486,6 +486,8 @@ ucb-social-media-icons-block:
 
 ucb-mega-menu-block:
   version: 1.x
+  js:
+    js/ucb-mega-menu.js: {}
   css:
     theme:
       css/block/ucb-mega-menu.css: {}
diff --git a/css/block/ucb-mega-menu.css b/css/block/ucb-mega-menu.css
index 9c01e4f4..33384d14 100644
--- a/css/block/ucb-mega-menu.css
+++ b/css/block/ucb-mega-menu.css
@@ -25,4 +25,13 @@
 }
 .ucb-mega-menu-link-desc {
     font-size: 75%;
+}
+.ucb-mega-menu-icon {
+    padding-left: 2px;
+}
+.ucb-mega-menu {
+    position: absolute;
+    border: black solid 1px;
+    z-index: 9;
+    background: #fff;
 }
\ No newline at end of file
diff --git a/js/ucb-mega-menu.js b/js/ucb-mega-menu.js
new file mode 100644
index 00000000..7b7bea5b
--- /dev/null
+++ b/js/ucb-mega-menu.js
@@ -0,0 +1,16 @@
+function megaMenuClicked(blockName) {
+    alert(blockName)
+    const blockID =  document.getElementsByClassName("block-" + blockName);
+    console.log(blockID);
+    for (let i = 0; i < blockID.length; i++) {
+        if(blockID[i].classList.contains("collapse"))
+        {
+            blockID[i].classList.add("show")
+            blockID[i].classList.remove("collapse")
+        }
+        else {
+        blockID[i].classList.add("collapse")
+        blockID[i].classList.remove("show")
+        }
+    }
+};
\ No newline at end of file
diff --git a/templates/block/block--mega_menu.html.twig b/templates/block/block--mega_menu.html.twig
index d444cd56..c95809bc 100644
--- a/templates/block/block--mega_menu.html.twig
+++ b/templates/block/block--mega_menu.html.twig
@@ -1,6 +1,9 @@
-{{ attach_library('boulder_base/ucb-mega-menu-block') }}
+
+{% block content %}
     <div class="ucb-mega-menu-column-wrapper">
         {{content.field_mega_menu_text_above|render}}
         {{content.field_mega_menu_menu_links}}
     </div>
     {{content.field_mega_menu_text_below|render}}
+
+{% endblock %}
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_select.html.twig b/templates/field/field--field_mega_menu_select.html.twig
new file mode 100644
index 00000000..9ce23690
--- /dev/null
+++ b/templates/field/field--field_mega_menu_select.html.twig
@@ -0,0 +1,3 @@
+{% for item in items %}
+{{ item.content}}
+{% endfor %}
\ No newline at end of file
diff --git a/templates/navigation/menu--extras.html.twig b/templates/navigation/menu--extras.html.twig
index 31779ebf..ead0e61e 100644
--- a/templates/navigation/menu--extras.html.twig
+++ b/templates/navigation/menu--extras.html.twig
@@ -25,12 +25,13 @@
   We call a macro which calls itself to render the full tree.
   @see http://twig.sensiolabs.org/doc/tags/macro.html
 #}
+{{ attach_library('boulder_base/ucb-mega-menu-block') }}
 {{ menus.menu_links(items, attributes, 0) }}
 {% macro menu_links(items, attributes, menu_level) %}
-  {% if items %}
-    <ul{{ attributes.addClass('ucb-menu nav') }}>
-      {% for item in items %}
-        {% set classes = [
+    {% if items %}
+        <ul{{attributes.addClass('ucb-menu nav')}}>
+            {% for item in items %}
+                {% set classes = [
           'menu-item',
           item.is_expanded ? 'expanded',
           item.is_collapsed ? 'collapsed',
@@ -38,27 +39,46 @@
           item.is_unpublished ? 'unpublished'
         ] %}
 
-        <li{{ item.attributes.addClass(classes) }}>
-<div class="ucb-mega-menu-wrapper">
-    <h2 class= "ucb-mega-menu-header">{{dump(item.content.field_mega_menu_select.0.content.field_mega_menu_heading)}}</h2>
-        {{item.content.field_mega_menu_select}}
-    </div>
-          {% if item.title|upper == 'HOME' %}
-            <a{{ create_attribute({ href: item.url|render, class: 'ucb-home-button nav-link', title: item.title }) }}>
-              <i class="fa-solid fa-home"></i>
-              <span class="visually-hidden">{{ item.title }}</span>
-            </a>
-          {% else %}
-            {% set title = item.is_unpublished ? {
+                <li{{item.attributes.addClass(classes)}}>
+                    {% if item.title|upper == 'HOME' %}
+                        <a{{create_attribute({href:item.url|render,class:'ucb-home-button nav-link',title:item.title})}}>
+                            <i class="fa-solid fa-home"></i>
+                            <span class="visually-hidden">{{ item.title }}</span>
+                        </a>
+                    {% else %}
+
+                        {% set title = item.is_unpublished ? {
                 '#markup': '<i class="fa-solid fa-eye-slash"></i> ' ~ item.title|e ~ ' <span class="visually-hidden">(Unpublished)</span>'
               } : item.title %}
-            {{ link(title, item.url, create_attribute({ class: 'nav-link' })) }}
-            {% if item.below %}
-              {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
-            {% endif %}
-          {% endif %}
-        </li>
-      {% endfor %}
-    </ul>
-  {% endif %}
+                        {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
+                          <li class="menu-item">
+                            <a href="#" title='{{title}}' class="nav-link ucb-mega-menu-outer-link" onclick = "megaMenuClicked('{{title|lower|trim|replace({' ': ''})}}')">{{title}} <i class="fa fa-angle-down ucb-mega-menu-icon" aria-hidden="true"></i></a>
+                          </li>
+                        {% else %}
+                          {{ link(title, item.url, create_attribute({ class: 'nav-link' })) }}
+                          {% if item.below %}
+                              {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
+                          {% endif %}
+                        {% endif %}
+                    {% endif %}
+                </li>
+            {% endfor %}
+        </ul>
+            <div class = "ucb-mega-menu container">
+            {% for item in items %}
+                        {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
+                            <div class="ucb-mega-menu-wrapper block-{{item.title|lower|trim|replace({' ': ''})}} collapse">
+                                <h2 class="ucb-mega-menu-header"><a href = "{{item.url}}" class = "ucb-mega-menu-heading-link">{{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_heading.value }}</a></h2>
+                                <div class="ucb-mega-menu-column-wrapper">
+                                    {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_above.value|render}}
+                                    {#{{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_above|render}}
+                                    {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_menu_links}}#}
+                                </div>
+                                {#{{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_below}}
+                                #}
+                            </div>
+                        {% endif %}
+            {% endfor %}
+            </div>
+    {% endif %}
 {% endmacro %}

From 2f1f5fd4981ee770d70b05610f2d3ee9e996b2d6 Mon Sep 17 00:00:00 2001
From: Jacob Korf <korfj921921@gmail.com>
Date: Fri, 9 Aug 2024 12:47:26 -0600
Subject: [PATCH 04/23] mega menu integration update

---
 css/block/ucb-mega-menu.css                 |  2 +-
 js/ucb-mega-menu.js                         | 22 ++++++++++++++++-----
 templates/navigation/menu--extras.html.twig | 15 +++++++-------
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/css/block/ucb-mega-menu.css b/css/block/ucb-mega-menu.css
index 33384d14..f65558cf 100644
--- a/css/block/ucb-mega-menu.css
+++ b/css/block/ucb-mega-menu.css
@@ -31,7 +31,7 @@
 }
 .ucb-mega-menu {
     position: absolute;
-    border: black solid 1px;
+    box-shadow: 0 2px 5px rgba(0 0 0 /10%);
     z-index: 9;
     background: #fff;
 }
\ No newline at end of file
diff --git a/js/ucb-mega-menu.js b/js/ucb-mega-menu.js
index 7b7bea5b..13b6822d 100644
--- a/js/ucb-mega-menu.js
+++ b/js/ucb-mega-menu.js
@@ -1,16 +1,28 @@
 function megaMenuClicked(blockName) {
-    alert(blockName)
+    const allMegaMenus =  document.getElementsByClassName("ucb-mega-menu-wrapper");
     const blockID =  document.getElementsByClassName("block-" + blockName);
-    console.log(blockID);
+    let blockState = 0;
     for (let i = 0; i < blockID.length; i++) {
-        if(blockID[i].classList.contains("collapse"))
+        if(blockID[i].classList.contains("show")) {
+            blockState = 1;
+        }
+    }
+    for (let i = 0; i < allMegaMenus.length; i++) {
+        if(allMegaMenus[i].classList.contains("show"))
+        {
+            allMegaMenus[i].classList.remove("show")
+            allMegaMenus[i].classList.add("collapse")
+        }
+    }
+    for (let i = 0; i < blockID.length; i++) {
+        if(blockState == 0)
         {
             blockID[i].classList.add("show")
             blockID[i].classList.remove("collapse")
         }
         else {
-        blockID[i].classList.add("collapse")
-        blockID[i].classList.remove("show")
+            blockID[i].classList.add("collapse")
+            blockID[i].classList.remove("show")
         }
     }
 };
\ No newline at end of file
diff --git a/templates/navigation/menu--extras.html.twig b/templates/navigation/menu--extras.html.twig
index ead0e61e..39ce5c41 100644
--- a/templates/navigation/menu--extras.html.twig
+++ b/templates/navigation/menu--extras.html.twig
@@ -40,6 +40,7 @@
         ] %}
 
                 <li{{item.attributes.addClass(classes)}}>
+
                     {% if item.title|upper == 'HOME' %}
                         <a{{create_attribute({href:item.url|render,class:'ucb-home-button nav-link',title:item.title})}}>
                             <i class="fa-solid fa-home"></i>
@@ -52,7 +53,7 @@
               } : item.title %}
                         {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
                           <li class="menu-item">
-                            <a href="#" title='{{title}}' class="nav-link ucb-mega-menu-outer-link" onclick = "megaMenuClicked('{{title|lower|trim|replace({' ': ''})}}')">{{title}} <i class="fa fa-angle-down ucb-mega-menu-icon" aria-hidden="true"></i></a>
+                            <a href="#" title='{{title}}' class="nav-link ucb-mega-menu-outer-link" onclick = "megaMenuClicked('{{title|lower|trim|replace({' ': ''})}}{{item.content.field_mega_menu_select.0['#block_content'].id.value}}')">{{title}} <i class="fa fa-angle-down ucb-mega-menu-icon" aria-hidden="true"></i></a>
                           </li>
                         {% else %}
                           {{ link(title, item.url, create_attribute({ class: 'nav-link' })) }}
@@ -67,15 +68,15 @@
             <div class = "ucb-mega-menu container">
             {% for item in items %}
                         {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
-                            <div class="ucb-mega-menu-wrapper block-{{item.title|lower|trim|replace({' ': ''})}} collapse">
+
+                            <div class="ucb-mega-menu-wrapper block-{{item.title|lower|trim|replace({' ': ''}) ~ item.content.field_mega_menu_select.0['#block_content'].id.value}} collapse">
                                 <h2 class="ucb-mega-menu-header"><a href = "{{item.url}}" class = "ucb-mega-menu-heading-link">{{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_heading.value }}</a></h2>
                                 <div class="ucb-mega-menu-column-wrapper">
-                                    {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_above.value|render}}
-                                    {#{{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_above|render}}
-                                    {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_menu_links}}#}
+                                    {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_above|view}}
+                                    {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_menu_links|view}}
                                 </div>
-                                {#{{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_below}}
-                                #}
+                                {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_below|view}}
+
                             </div>
                         {% endif %}
             {% endfor %}

From 60420ca9973025ebe9fa33633d1bb05f55ae868d Mon Sep 17 00:00:00 2001
From: Jacob Korf <korfj921921@gmail.com>
Date: Mon, 12 Aug 2024 13:24:46 -0600
Subject: [PATCH 05/23] fix mobile menu issue

---
 templates/navigation/menu--extras.html.twig   | 39 ++++++++-----------
 .../regions/region--primary-menu.html.twig    |  2 +-
 2 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/templates/navigation/menu--extras.html.twig b/templates/navigation/menu--extras.html.twig
index 39ce5c41..42d1c70d 100644
--- a/templates/navigation/menu--extras.html.twig
+++ b/templates/navigation/menu--extras.html.twig
@@ -38,37 +38,32 @@
           item.in_active_trail ? 'active',
           item.is_unpublished ? 'unpublished'
         ] %}
-
-                <li{{item.attributes.addClass(classes)}}>
-
-                    {% if item.title|upper == 'HOME' %}
-                        <a{{create_attribute({href:item.url|render,class:'ucb-home-button nav-link',title:item.title})}}>
-                            <i class="fa-solid fa-home"></i>
-                            <span class="visually-hidden">{{ item.title }}</span>
-                        </a>
+            <li{{item.attributes.addClass(classes)}}>
+                {% if item.title|upper == 'HOME' %}
+                    <a{{create_attribute({href:item.url|render,class:'ucb-home-button nav-link',title:item.title})}}>
+                        <i class="fa-solid fa-home"></i>
+                        <span class="visually-hidden">{{ item.title }}</span>
+                    </a>
+                {% else %}
+                    {% set title = item.is_unpublished ? {
+                     '#markup': '<i class="fa-solid fa-eye-slash"></i> ' ~ item.title|e ~ ' <span class="visually-hidden">(Unpublished)</span>'
+                    } : item.title %}
+                    {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
+                        {% set linkURL =  "megaMenuClicked('" ~ title|lower|trim|replace({' ': ''}) ~ item.content.field_mega_menu_select.0['#block_content'].id.value ~ "')" %}
+                        <a href="#" title='{{title}}' class="nav-link ucb-mega-menu-outer-link" onclick = "megaMenuClicked('{{title|lower|trim|replace({' ': ''})}}{{item.content.field_mega_menu_select.0['#block_content'].id.value}}')">{{title}} <i class="fa fa-angle-down ucb-mega-menu-icon" aria-hidden="true"></i></a>
                     {% else %}
-
-                        {% set title = item.is_unpublished ? {
-                '#markup': '<i class="fa-solid fa-eye-slash"></i> ' ~ item.title|e ~ ' <span class="visually-hidden">(Unpublished)</span>'
-              } : item.title %}
-                        {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
-                          <li class="menu-item">
-                            <a href="#" title='{{title}}' class="nav-link ucb-mega-menu-outer-link" onclick = "megaMenuClicked('{{title|lower|trim|replace({' ': ''})}}{{item.content.field_mega_menu_select.0['#block_content'].id.value}}')">{{title}} <i class="fa fa-angle-down ucb-mega-menu-icon" aria-hidden="true"></i></a>
-                          </li>
-                        {% else %}
-                          {{ link(title, item.url, create_attribute({ class: 'nav-link' })) }}
-                          {% if item.below %}
-                              {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
-                          {% endif %}
+                        {{ link(title, item.url, create_attribute({ class: 'nav-link' })) }}
+                        {% if item.below %}
+                            {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
                         {% endif %}
                     {% endif %}
+                {% endif %}
                 </li>
             {% endfor %}
         </ul>
             <div class = "ucb-mega-menu container">
             {% for item in items %}
                         {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
-
                             <div class="ucb-mega-menu-wrapper block-{{item.title|lower|trim|replace({' ': ''}) ~ item.content.field_mega_menu_select.0['#block_content'].id.value}} collapse">
                                 <h2 class="ucb-mega-menu-header"><a href = "{{item.url}}" class = "ucb-mega-menu-heading-link">{{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_heading.value }}</a></h2>
                                 <div class="ucb-mega-menu-column-wrapper">
diff --git a/templates/regions/region--primary-menu.html.twig b/templates/regions/region--primary-menu.html.twig
index c5804102..39d5195e 100644
--- a/templates/regions/region--primary-menu.html.twig
+++ b/templates/regions/region--primary-menu.html.twig
@@ -15,7 +15,7 @@
 <div class="ucb-primary-menu-region-container{{ ucb_secondary_menu_position == 'above' ? ' container' : '' }}">
   <nav class="ucb-main-menu">
     <div class="ucb-primary-menu-region">
-      {{content}}
+      {{ content }}
     </div>
   </nav>
 </div>

From de69a39c9ef24cbc61e2ce41936376ea4873a8bc Mon Sep 17 00:00:00 2001
From: Jacob Korf <korfj921921@gmail.com>
Date: Mon, 12 Aug 2024 13:40:17 -0600
Subject: [PATCH 06/23] fix cursor pointer issue

---
 css/ucb-menu.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/css/ucb-menu.css b/css/ucb-menu.css
index 6633623d..76c86ac7 100644
--- a/css/ucb-menu.css
+++ b/css/ucb-menu.css
@@ -385,4 +385,8 @@ width: fit-content;
 .ucb-button-blue .icon-bg .svg-inline--fa,
 .ucb-button-gray .icon-bg .svg-inline--fa {
   vertical-align: middle;
+}
+
+.ucb-mega-menu-outer-link {
+  cursor: pointer;
 }
\ No newline at end of file

From c98cfe7747f1401a0e702e38fe7c2be97490b219 Mon Sep 17 00:00:00 2001
From: Jacob Korf <korfj921921@gmail.com>
Date: Mon, 12 Aug 2024 13:40:36 -0600
Subject: [PATCH 07/23] remove # from href

---
 templates/navigation/menu--extras.html.twig | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/navigation/menu--extras.html.twig b/templates/navigation/menu--extras.html.twig
index 42d1c70d..e218b87a 100644
--- a/templates/navigation/menu--extras.html.twig
+++ b/templates/navigation/menu--extras.html.twig
@@ -50,7 +50,7 @@
                     } : item.title %}
                     {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
                         {% set linkURL =  "megaMenuClicked('" ~ title|lower|trim|replace({' ': ''}) ~ item.content.field_mega_menu_select.0['#block_content'].id.value ~ "')" %}
-                        <a href="#" title='{{title}}' class="nav-link ucb-mega-menu-outer-link" onclick = "megaMenuClicked('{{title|lower|trim|replace({' ': ''})}}{{item.content.field_mega_menu_select.0['#block_content'].id.value}}')">{{title}} <i class="fa fa-angle-down ucb-mega-menu-icon" aria-hidden="true"></i></a>
+                        <a  title='{{title}}' class="nav-link ucb-mega-menu-outer-link" onclick = "megaMenuClicked('{{title|lower|trim|replace({' ': ''})}}{{item.content.field_mega_menu_select.0['#block_content'].id.value}}')">{{title}} <i class="fa fa-angle-down ucb-mega-menu-icon" aria-hidden="true"></i></a>
                     {% else %}
                         {{ link(title, item.url, create_attribute({ class: 'nav-link' })) }}
                         {% if item.below %}

From e4eec0c6dd093b5dd41fad01141a7c12da5f71d5 Mon Sep 17 00:00:00 2001
From: Jacob Korf <korfj921921@gmail.com>
Date: Mon, 12 Aug 2024 13:40:51 -0600
Subject: [PATCH 08/23] code for preventDefault

---
 js/ucb-mega-menu.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/js/ucb-mega-menu.js b/js/ucb-mega-menu.js
index 13b6822d..3b2d7416 100644
--- a/js/ucb-mega-menu.js
+++ b/js/ucb-mega-menu.js
@@ -25,4 +25,11 @@ function megaMenuClicked(blockName) {
             blockID[i].classList.remove("show")
         }
     }
-};
\ No newline at end of file
+};
+
+const megaMenuLinks = document.getElementsByClassName(".ucb-mega-menu-outer-link");
+for (let i = 0; i < megaMenuLinks.length; i++) {
+    megaMenuLinks[i].addEventListener("click", function(event){
+        event.preventDefault()
+    });
+}
\ No newline at end of file

From ec20d20cede91c9911ec5b81679767aa6b1adec2 Mon Sep 17 00:00:00 2001
From: Jacob Korf <korfj921921@gmail.com>
Date: Tue, 13 Aug 2024 08:37:47 -0600
Subject: [PATCH 09/23] updates to mega

---
 css/block/ucb-mega-menu.css                 | 65 +++++++++++++++---
 css/ucb-menu.css                            |  4 --
 js/ucb-mega-menu.js                         | 73 +++++++++++++--------
 templates/navigation/menu--extras.html.twig |  2 +-
 4 files changed, 104 insertions(+), 40 deletions(-)

diff --git a/css/block/ucb-mega-menu.css b/css/block/ucb-mega-menu.css
index f65558cf..ca610217 100644
--- a/css/block/ucb-mega-menu.css
+++ b/css/block/ucb-mega-menu.css
@@ -1,6 +1,3 @@
-.ucb-mega-menu-column-wrapper {
-    display: flex;
-}
 .ucb-mega-menu-column-links-wrapper {
     display: block;
     padding: 0;
@@ -14,12 +11,6 @@
     list-style-type: none;
 }
 
-.ucb-mega-menu-text-above {
-    flex-grow: 1;
-}
-.ucb-mega-menu-column {
-    flex-grow: 1;
-}
 .ucb-mega-menu-column-links-wrapper a {
     display: block;
 }
@@ -34,4 +25,60 @@
     box-shadow: 0 2px 5px rgba(0 0 0 /10%);
     z-index: 9;
     background: #fff;
+}
+
+.ucb-mega-menu-outer-link {
+    cursor: pointer;
+}
+
+.ucb-mega-menu-column-3 div {
+    min-width: 33%;
+    width: 33%;
+    max-width: 33%;
+}
+
+.ucb-mega-menu-column-4 div {
+    min-width: 25%;
+    width: 25%;
+    max-width: 25%;
+}
+
+.ucb-mega-menu-column-5 div {
+    min-width: 20%;
+    width: 20%;
+    max-width: 20%;
+}
+
+.ucb-mega-menu-column-6 div {
+    min-width: 16%;
+    width: 16%;
+    max-width: 16%;
+}
+
+.ucb-mega-menu-wrapper {
+    padding: 20px;
+}
+.ucb-mega-menu-column-wrapper {
+    display: flex;
+    flex-direction: row;
+}
+
+@media only screen and (max-width:576px) {
+    .ucb-mega-menu-column-wrapper {
+        display: flex;
+        flex-direction: column;
+    }
+    .ucb-mega-menu-column-wrapper {
+        display: flex;
+        flex-direction: column;
+    }
+    .ucb-mega-menu-column-3 div,
+    .ucb-mega-menu-column-4 div,
+    .ucb-mega-menu-column-5 div,
+    .ucb-mega-menu-column-6 div {
+        min-width: 100%;
+        width: 100%;
+        max-width: 100%;
+    }
+
 }
\ No newline at end of file
diff --git a/css/ucb-menu.css b/css/ucb-menu.css
index 76c86ac7..6633623d 100644
--- a/css/ucb-menu.css
+++ b/css/ucb-menu.css
@@ -385,8 +385,4 @@ width: fit-content;
 .ucb-button-blue .icon-bg .svg-inline--fa,
 .ucb-button-gray .icon-bg .svg-inline--fa {
   vertical-align: middle;
-}
-
-.ucb-mega-menu-outer-link {
-  cursor: pointer;
 }
\ No newline at end of file
diff --git a/js/ucb-mega-menu.js b/js/ucb-mega-menu.js
index 3b2d7416..5d12091b 100644
--- a/js/ucb-mega-menu.js
+++ b/js/ucb-mega-menu.js
@@ -1,35 +1,56 @@
 function megaMenuClicked(blockName) {
-    const allMegaMenus =  document.getElementsByClassName("ucb-mega-menu-wrapper");
-    const blockID =  document.getElementsByClassName("block-" + blockName);
-    let blockState = 0;
-    for (let i = 0; i < blockID.length; i++) {
-        if(blockID[i].classList.contains("show")) {
-            blockState = 1;
+        const blockID =  document.getElementsByClassName("block-" + blockName);
+        const allMegaMenus =  document.getElementsByClassName("ucb-mega-menu-wrapper");
+        let blockState = 0;
+        for (let i = 0; i < blockID.length; i++) {
+            if(blockID[i].classList.contains("show")) {
+                blockState = 1;
+            }
         }
-    }
-    for (let i = 0; i < allMegaMenus.length; i++) {
-        if(allMegaMenus[i].classList.contains("show"))
-        {
-            allMegaMenus[i].classList.remove("show")
-            allMegaMenus[i].classList.add("collapse")
-        }
-    }
-    for (let i = 0; i < blockID.length; i++) {
-        if(blockState == 0)
-        {
-            blockID[i].classList.add("show")
-            blockID[i].classList.remove("collapse")
+        for (let i = 0; i < allMegaMenus.length; i++) {
+            if(allMegaMenus[i].classList.contains("show"))
+            {
+                allMegaMenus[i].classList.remove("show")
+                allMegaMenus[i].classList.add("collapse")
+            }
         }
-        else {
-            blockID[i].classList.add("collapse")
-            blockID[i].classList.remove("show")
+        for (let i = 0; i < blockID.length; i++) {
+            if(blockState == 0)
+            {
+                blockID[i].classList.add("show")
+                blockID[i].classList.remove("collapse")
+            }
+            else {
+                blockID[i].classList.add("collapse")
+                blockID[i].classList.remove("show")
+            }
         }
-    }
 };
 
-const megaMenuLinks = document.getElementsByClassName(".ucb-mega-menu-outer-link");
+const megaMenuLinks = document.getElementsByClassName("ucb-mega-menu-outer-link");
 for (let i = 0; i < megaMenuLinks.length; i++) {
+    console.log(megaMenuLinks[i].dataset.checktt)
+    if(megaMenuLinks[i].dataset.click.length > 0)
     megaMenuLinks[i].addEventListener("click", function(event){
-        event.preventDefault()
+        megaMenuClicked(megaMenuLinks[i].dataset.click);
     });
-}
\ No newline at end of file
+}
+
+const megaMenuColumns = document.getElementsByClassName("ucb-mega-menu-column-wrapper");
+
+for (let i = 0; i < megaMenuLinks.length; i++) {
+    let megaMenuColumnCount = megaMenuColumns[i].children.length;
+    if(megaMenuColumnCount < 6) {
+        megaMenuColumnCount = 3;
+    }
+    if(megaMenuColumnCount > 6) {
+        megaMenuColumnCount = 6;
+    }
+    megaMenuColumns[i].classList.add("ucb-mega-menu-column-" + megaMenuColumnCount);
+}
+
+
+function resizeFn() {
+    console.log(window.innerWidth)
+    }
+    window.onresize = resizeFn;
\ No newline at end of file
diff --git a/templates/navigation/menu--extras.html.twig b/templates/navigation/menu--extras.html.twig
index e218b87a..e033fdc9 100644
--- a/templates/navigation/menu--extras.html.twig
+++ b/templates/navigation/menu--extras.html.twig
@@ -50,7 +50,7 @@
                     } : item.title %}
                     {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
                         {% set linkURL =  "megaMenuClicked('" ~ title|lower|trim|replace({' ': ''}) ~ item.content.field_mega_menu_select.0['#block_content'].id.value ~ "')" %}
-                        <a  title='{{title}}' class="nav-link ucb-mega-menu-outer-link" onclick = "megaMenuClicked('{{title|lower|trim|replace({' ': ''})}}{{item.content.field_mega_menu_select.0['#block_content'].id.value}}')">{{title}} <i class="fa fa-angle-down ucb-mega-menu-icon" aria-hidden="true"></i></a>
+                        <a  title='{{title}}' class="nav-link ucb-mega-menu-outer-link" data-checktt = "asfjlsdjg" data-click = "{{title|lower|trim|replace({' ': ''})}}{{item.content.field_mega_menu_select.0['#block_content'].id.value}}">{{title}} <i class="fa fa-angle-down ucb-mega-menu-icon" aria-hidden="true"></i></a>
                     {% else %}
                         {{ link(title, item.url, create_attribute({ class: 'nav-link' })) }}
                         {% if item.below %}

From 689a7d6f09343ec826cd623e7242d937e3a711d0 Mon Sep 17 00:00:00 2001
From: Jacob Korf <korfj921921@gmail.com>
Date: Tue, 13 Aug 2024 09:32:34 -0600
Subject: [PATCH 10/23] mobile menu updates

---
 js/ucb-mega-menu.js | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/js/ucb-mega-menu.js b/js/ucb-mega-menu.js
index 5d12091b..dc93a5bf 100644
--- a/js/ucb-mega-menu.js
+++ b/js/ucb-mega-menu.js
@@ -48,9 +48,22 @@ for (let i = 0; i < megaMenuLinks.length; i++) {
     }
     megaMenuColumns[i].classList.add("ucb-mega-menu-column-" + megaMenuColumnCount);
 }
-
+document.getElementById("ucb-mobile-menu-toggle").addEventListener("click", function(event){
+    resizeFn();
+});
 
 function resizeFn() {
-    console.log(window.innerWidth)
+    if(window.innerWidth < 577) {
+        if(document.getElementById("ucb-mobile-menu-toggle").ariaExpanded.toString().localeCompare("false")==0) {
+            const allMegaMenus =  document.getElementsByClassName("ucb-mega-menu-wrapper");
+            for (let i = 0; i < allMegaMenus.length; i++) {
+                if(allMegaMenus[i].classList.contains("show"))
+                {
+                    allMegaMenus[i].classList.remove("show")
+                    allMegaMenus[i].classList.add("collapse")
+                }
+            }
+        }
     }
-    window.onresize = resizeFn;
\ No newline at end of file
+}
+ window.onresize = resizeFn;
\ No newline at end of file

From 6ae0a9a0ce6b4c28a8fafd32121a7b03d4a398a8 Mon Sep 17 00:00:00 2001
From: Jacob Korf <korfj921921@gmail.com>
Date: Tue, 13 Aug 2024 09:39:18 -0600
Subject: [PATCH 11/23] remove console logs

---
 js/ucb-mega-menu.js                         | 1 -
 templates/navigation/menu--extras.html.twig | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/js/ucb-mega-menu.js b/js/ucb-mega-menu.js
index dc93a5bf..9ba6f53b 100644
--- a/js/ucb-mega-menu.js
+++ b/js/ucb-mega-menu.js
@@ -29,7 +29,6 @@ function megaMenuClicked(blockName) {
 
 const megaMenuLinks = document.getElementsByClassName("ucb-mega-menu-outer-link");
 for (let i = 0; i < megaMenuLinks.length; i++) {
-    console.log(megaMenuLinks[i].dataset.checktt)
     if(megaMenuLinks[i].dataset.click.length > 0)
     megaMenuLinks[i].addEventListener("click", function(event){
         megaMenuClicked(megaMenuLinks[i].dataset.click);
diff --git a/templates/navigation/menu--extras.html.twig b/templates/navigation/menu--extras.html.twig
index e033fdc9..5c4bb633 100644
--- a/templates/navigation/menu--extras.html.twig
+++ b/templates/navigation/menu--extras.html.twig
@@ -50,7 +50,7 @@
                     } : item.title %}
                     {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
                         {% set linkURL =  "megaMenuClicked('" ~ title|lower|trim|replace({' ': ''}) ~ item.content.field_mega_menu_select.0['#block_content'].id.value ~ "')" %}
-                        <a  title='{{title}}' class="nav-link ucb-mega-menu-outer-link" data-checktt = "asfjlsdjg" data-click = "{{title|lower|trim|replace({' ': ''})}}{{item.content.field_mega_menu_select.0['#block_content'].id.value}}">{{title}} <i class="fa fa-angle-down ucb-mega-menu-icon" aria-hidden="true"></i></a>
+                        <a  title='{{title}}' class="nav-link ucb-mega-menu-outer-link" data-click = "{{title|lower|trim|replace({' ': ''})}}{{item.content.field_mega_menu_select.0['#block_content'].id.value}}">{{title}} <i class="fa fa-angle-down ucb-mega-menu-icon" aria-hidden="true"></i></a>
                     {% else %}
                         {{ link(title, item.url, create_attribute({ class: 'nav-link' })) }}
                         {% if item.below %}

From 6128e69605202dc72b1f39c8b0083c0c10dc0c06 Mon Sep 17 00:00:00 2001
From: Jacob Korf <korfj921921@gmail.com>
Date: Wed, 14 Aug 2024 08:55:15 -0600
Subject: [PATCH 12/23] fix click outside, title, href

---
 js/ucb-mega-menu.js                         | 23 +++++++++++++++++++--
 templates/navigation/menu--extras.html.twig |  2 +-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/js/ucb-mega-menu.js b/js/ucb-mega-menu.js
index 9ba6f53b..23e20599 100644
--- a/js/ucb-mega-menu.js
+++ b/js/ucb-mega-menu.js
@@ -1,3 +1,4 @@
+//Triggers when the mega menu link is clicked to show or hide the mega menu
 function megaMenuClicked(blockName) {
         const blockID =  document.getElementsByClassName("block-" + blockName);
         const allMegaMenus =  document.getElementsByClassName("ucb-mega-menu-wrapper");
@@ -27,16 +28,18 @@ function megaMenuClicked(blockName) {
         }
 };
 
+//Adds the click event listener to all mega menu outer links
 const megaMenuLinks = document.getElementsByClassName("ucb-mega-menu-outer-link");
 for (let i = 0; i < megaMenuLinks.length; i++) {
     if(megaMenuLinks[i].dataset.click.length > 0)
     megaMenuLinks[i].addEventListener("click", function(event){
+        event.preventDefault();
         megaMenuClicked(megaMenuLinks[i].dataset.click);
     });
 }
 
+//Adds the column value to the column wrapper
 const megaMenuColumns = document.getElementsByClassName("ucb-mega-menu-column-wrapper");
-
 for (let i = 0; i < megaMenuLinks.length; i++) {
     let megaMenuColumnCount = megaMenuColumns[i].children.length;
     if(megaMenuColumnCount < 6) {
@@ -47,6 +50,8 @@ for (let i = 0; i < megaMenuLinks.length; i++) {
     }
     megaMenuColumns[i].classList.add("ucb-mega-menu-column-" + megaMenuColumnCount);
 }
+
+//Adds a method for hiding the mega menu in mobile views when the mobile menu isn't open
 document.getElementById("ucb-mobile-menu-toggle").addEventListener("click", function(event){
     resizeFn();
 });
@@ -65,4 +70,18 @@ function resizeFn() {
         }
     }
 }
- window.onresize = resizeFn;
\ No newline at end of file
+ window.onresize = resizeFn;
+
+ //Add an even listener to check if the user clicked outside the mega menu, then close the mega menu
+ window.addEventListener('click', function(e){
+    const allMegaMenus =  document.getElementsByClassName("ucb-mega-menu-wrapper");
+    const allMainMenus =  document.getElementsByClassName("block-system-menu-blockmain");
+    for (let i = 0; i < allMegaMenus.length; i++) {
+        for (let j = 0; i < allMainMenus.length; i++) {
+            if (!allMegaMenus[i].contains(e.target) && !allMainMenus[j].contains(e.target) && allMegaMenus[i].classList.contains("show")){
+                allMegaMenus[i].classList.remove("show")
+                allMegaMenus[i].classList.add("collapse")
+            }
+        }
+    }
+})
\ No newline at end of file
diff --git a/templates/navigation/menu--extras.html.twig b/templates/navigation/menu--extras.html.twig
index 5c4bb633..86538173 100644
--- a/templates/navigation/menu--extras.html.twig
+++ b/templates/navigation/menu--extras.html.twig
@@ -50,7 +50,7 @@
                     } : item.title %}
                     {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
                         {% set linkURL =  "megaMenuClicked('" ~ title|lower|trim|replace({' ': ''}) ~ item.content.field_mega_menu_select.0['#block_content'].id.value ~ "')" %}
-                        <a  title='{{title}}' class="nav-link ucb-mega-menu-outer-link" data-click = "{{title|lower|trim|replace({' ': ''})}}{{item.content.field_mega_menu_select.0['#block_content'].id.value}}">{{title}} <i class="fa fa-angle-down ucb-mega-menu-icon" aria-hidden="true"></i></a>
+                        <a href = "#" class="nav-link ucb-mega-menu-outer-link" data-click = "{{title|lower|trim|replace({' ': ''})}}{{item.content.field_mega_menu_select.0['#block_content'].id.value}}">{{title}} <i class="fa fa-angle-down ucb-mega-menu-icon" aria-hidden="true"></i></a>
                     {% else %}
                         {{ link(title, item.url, create_attribute({ class: 'nav-link' })) }}
                         {% if item.below %}

From a2d905ec879028bd90d45cd41d03ca4e839b2e84 Mon Sep 17 00:00:00 2001
From: Jacob Korf <korfj921921@gmail.com>
Date: Wed, 14 Aug 2024 09:29:31 -0600
Subject: [PATCH 13/23] basic dark mode structure

---
 css/block/ucb-mega-menu.css | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/css/block/ucb-mega-menu.css b/css/block/ucb-mega-menu.css
index ca610217..1cc3e286 100644
--- a/css/block/ucb-mega-menu.css
+++ b/css/block/ucb-mega-menu.css
@@ -81,4 +81,23 @@
         max-width: 100%;
     }
 
+}
+
+.ucb-header-black .ucb-mega-menu {
+    background-color: #000;
+    color: #fff;
+}
+.ucb-header-dark .ucb-mega-menu {
+    background-color: #424242;
+    color: #fff;
+}
+
+.ucb-header-black .ucb-mega-menu a,
+.ucb-header-dark .ucb-mega-menu a {
+    color: #cfb87b;
+}
+
+.ucb-header-black .ucb-mega-menu a:hover,
+.ucb-header-dark .ucb-mega-menu a:hover {
+    color: #fff;
 }
\ No newline at end of file

From ad254c35a636512ee7b3c5e91d86eb69d72b2c28 Mon Sep 17 00:00:00 2001
From: Jacob Korf <korfj921921@gmail.com>
Date: Wed, 14 Aug 2024 11:32:48 -0600
Subject: [PATCH 14/23] menu style and stylistic fixes

---
 css/block/ucb-mega-menu.css                   | 23 ++-----
 css/menu-styles/default-menu-styles.css       |  5 ++
 css/menu-styles/highlight-styles.css          |  5 ++
 css/menu-styles/ivory-styles.css              |  5 ++
 css/menu-styles/minimal-styles.css            |  5 ++
 css/menu-styles/rise-styles.css               | 23 +++++++
 js/ucb-mega-menu.js                           | 59 ++++++++--------
 templates/block/block--mega_menu.html.twig    |  1 -
 .../field--field-display-mega-menu.html.twig  |  2 +-
 .../field--field_mega_menu_heading.html.twig  |  2 +-
 .../field--field_mega_menu_links.html.twig    |  2 +-
 ...ield--field_mega_menu_links_desc.html.twig |  2 +-
 ...ield--field_mega_menu_links_link.html.twig |  2 +-
 ...field_mega_menu_links_list_label.html.twig |  2 +-
 ...field_mega_menu_links_list_links.html.twig |  2 +-
 .../field--field_mega_menu_select.html.twig   |  2 +-
 ...ield--field_mega_menu_text_above.html.twig |  2 +-
 ...ield--field_mega_menu_text_below.html.twig |  2 +-
 templates/navigation/menu--extras.html.twig   | 67 +++++++++----------
 .../paragraph--mega-menu-links-list.html.twig |  8 +--
 .../paragraph--mega-menu-links.html.twig      |  8 +--
 21 files changed, 128 insertions(+), 101 deletions(-)

diff --git a/css/block/ucb-mega-menu.css b/css/block/ucb-mega-menu.css
index 1cc3e286..f7b8092b 100644
--- a/css/block/ucb-mega-menu.css
+++ b/css/block/ucb-mega-menu.css
@@ -14,12 +14,15 @@
 .ucb-mega-menu-column-links-wrapper a {
     display: block;
 }
+
 .ucb-mega-menu-link-desc {
     font-size: 75%;
 }
+
 .ucb-mega-menu-icon {
     padding-left: 2px;
 }
+
 .ucb-mega-menu {
     position: absolute;
     box-shadow: 0 2px 5px rgba(0 0 0 /10%);
@@ -58,6 +61,7 @@
 .ucb-mega-menu-wrapper {
     padding: 20px;
 }
+
 .ucb-mega-menu-column-wrapper {
     display: flex;
     flex-direction: row;
@@ -82,22 +86,3 @@
     }
 
 }
-
-.ucb-header-black .ucb-mega-menu {
-    background-color: #000;
-    color: #fff;
-}
-.ucb-header-dark .ucb-mega-menu {
-    background-color: #424242;
-    color: #fff;
-}
-
-.ucb-header-black .ucb-mega-menu a,
-.ucb-header-dark .ucb-mega-menu a {
-    color: #cfb87b;
-}
-
-.ucb-header-black .ucb-mega-menu a:hover,
-.ucb-header-dark .ucb-mega-menu a:hover {
-    color: #fff;
-}
\ No newline at end of file
diff --git a/css/menu-styles/default-menu-styles.css b/css/menu-styles/default-menu-styles.css
index 5f218eee..5e44d9bc 100644
--- a/css/menu-styles/default-menu-styles.css
+++ b/css/menu-styles/default-menu-styles.css
@@ -1,4 +1,9 @@
 
 .ucb-main-nav-container.ucb-secondary-menu-position-above .ucb-secondary-menu-region .menu.social-media .icon-bg {
     padding: 0 5px;
+}
+
+/* Mega Menu Styles */
+.ucb-mega-menu {
+    background-color: #fff;
 }
\ No newline at end of file
diff --git a/css/menu-styles/highlight-styles.css b/css/menu-styles/highlight-styles.css
index 80721fe0..fb4256ea 100644
--- a/css/menu-styles/highlight-styles.css
+++ b/css/menu-styles/highlight-styles.css
@@ -123,3 +123,8 @@
     height: 100%;
   }
 }
+
+/* Mega Menu Styles */
+.ucb-mega-menu {
+  background-color: #EEEEEE;
+}
diff --git a/css/menu-styles/ivory-styles.css b/css/menu-styles/ivory-styles.css
index dbff1411..0506a329 100644
--- a/css/menu-styles/ivory-styles.css
+++ b/css/menu-styles/ivory-styles.css
@@ -245,3 +245,8 @@
     height: 100%;
   }
 }
+
+/* Mega Menu Styles */
+.ucb-mega-menu {
+  background-color: #fff;
+}
\ No newline at end of file
diff --git a/css/menu-styles/minimal-styles.css b/css/menu-styles/minimal-styles.css
index cc02a103..fb78b7b5 100644
--- a/css/menu-styles/minimal-styles.css
+++ b/css/menu-styles/minimal-styles.css
@@ -86,3 +86,8 @@
     height: 100%;
   }
 }
+
+/* Mega Menu Styles */
+.ucb-mega-menu {
+  background-color: #fff;
+}
\ No newline at end of file
diff --git a/css/menu-styles/rise-styles.css b/css/menu-styles/rise-styles.css
index 2a70f6c8..08db3795 100644
--- a/css/menu-styles/rise-styles.css
+++ b/css/menu-styles/rise-styles.css
@@ -373,4 +373,27 @@
   .ucb-main-nav-container.ucb-secondary-menu-position-inline .ucb-secondary-menu-region .menu.social-media {
     height: 100%;
   }
+}
+
+/* Mega Menu Styles */
+.ucb-header-white .ucb-mega-menu,
+.ucb-header-light .ucb-mega-menu{
+  background-color: #333;
+  color: #fff;
+}
+
+.ucb-header-black .ucb-mega-menu,
+.ucb-header-dark .ucb-mega-menu{
+  background-color: #eee;
+  color: #000;
+}
+
+.ucb-header-white .ucb-mega-menu a,
+.ucb-header-light .ucb-mega-menu a {
+  color: #cfb87b;
+}
+
+.ucb-header-white .ucb-mega-menu a:hover,
+.ucb-header-light .ucb-mega-menu a:hover {
+  color: #fff;
 }
\ No newline at end of file
diff --git a/js/ucb-mega-menu.js b/js/ucb-mega-menu.js
index 23e20599..cf705a9b 100644
--- a/js/ucb-mega-menu.js
+++ b/js/ucb-mega-menu.js
@@ -1,41 +1,42 @@
 //Triggers when the mega menu link is clicked to show or hide the mega menu
 function megaMenuClicked(blockName) {
-        const blockID =  document.getElementsByClassName("block-" + blockName);
-        const allMegaMenus =  document.getElementsByClassName("ucb-mega-menu-wrapper");
-        let blockState = 0;
-        for (let i = 0; i < blockID.length; i++) {
-            if(blockID[i].classList.contains("show")) {
-                blockState = 1;
-            }
+    const blockID =  document.getElementsByClassName("block-" + blockName);
+    const allMegaMenus =  document.getElementsByClassName("ucb-mega-menu-wrapper");
+    let blockState = 0;
+    for (let i = 0; i < blockID.length; i++) {
+        if(blockID[i].classList.contains("show")) {
+            blockState = 1;
         }
-        for (let i = 0; i < allMegaMenus.length; i++) {
-            if(allMegaMenus[i].classList.contains("show"))
-            {
-                allMegaMenus[i].classList.remove("show")
-                allMegaMenus[i].classList.add("collapse")
-            }
+    }
+    for (let i = 0; i < allMegaMenus.length; i++) {
+        if(allMegaMenus[i].classList.contains("show"))
+        {
+            allMegaMenus[i].classList.remove("show")
+            allMegaMenus[i].classList.add("collapse")
         }
-        for (let i = 0; i < blockID.length; i++) {
-            if(blockState == 0)
-            {
-                blockID[i].classList.add("show")
-                blockID[i].classList.remove("collapse")
-            }
-            else {
-                blockID[i].classList.add("collapse")
-                blockID[i].classList.remove("show")
-            }
+    }
+    for (let i = 0; i < blockID.length; i++) {
+        if(blockState == 0)
+        {
+            blockID[i].classList.add("show")
+            blockID[i].classList.remove("collapse")
         }
+        else {
+            blockID[i].classList.add("collapse")
+            blockID[i].classList.remove("show")
+        }
+    }
 };
 
 //Adds the click event listener to all mega menu outer links
 const megaMenuLinks = document.getElementsByClassName("ucb-mega-menu-outer-link");
 for (let i = 0; i < megaMenuLinks.length; i++) {
-    if(megaMenuLinks[i].dataset.click.length > 0)
-    megaMenuLinks[i].addEventListener("click", function(event){
-        event.preventDefault();
-        megaMenuClicked(megaMenuLinks[i].dataset.click);
-    });
+    if(megaMenuLinks[i].dataset.click.length > 0) {
+        megaMenuLinks[i].addEventListener("click", function(event){
+            event.preventDefault();
+            megaMenuClicked(megaMenuLinks[i].dataset.click);
+        });
+    }
 }
 
 //Adds the column value to the column wrapper
@@ -70,7 +71,7 @@ function resizeFn() {
         }
     }
 }
- window.onresize = resizeFn;
+window.onresize = resizeFn;
 
  //Add an even listener to check if the user clicked outside the mega menu, then close the mega menu
  window.addEventListener('click', function(e){
diff --git a/templates/block/block--mega_menu.html.twig b/templates/block/block--mega_menu.html.twig
index c95809bc..ef3902a1 100644
--- a/templates/block/block--mega_menu.html.twig
+++ b/templates/block/block--mega_menu.html.twig
@@ -5,5 +5,4 @@
         {{content.field_mega_menu_menu_links}}
     </div>
     {{content.field_mega_menu_text_below|render}}
-
 {% endblock %}
\ No newline at end of file
diff --git a/templates/field/field--field-display-mega-menu.html.twig b/templates/field/field--field-display-mega-menu.html.twig
index 9ce23690..b06246d1 100644
--- a/templates/field/field--field-display-mega-menu.html.twig
+++ b/templates/field/field--field-display-mega-menu.html.twig
@@ -1,3 +1,3 @@
 {% for item in items %}
-{{ item.content}}
+    {{ item.content}}
 {% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_heading.html.twig b/templates/field/field--field_mega_menu_heading.html.twig
index 9ce23690..b06246d1 100644
--- a/templates/field/field--field_mega_menu_heading.html.twig
+++ b/templates/field/field--field_mega_menu_heading.html.twig
@@ -1,3 +1,3 @@
 {% for item in items %}
-{{ item.content}}
+    {{ item.content}}
 {% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_links.html.twig b/templates/field/field--field_mega_menu_links.html.twig
index 9ce23690..b06246d1 100644
--- a/templates/field/field--field_mega_menu_links.html.twig
+++ b/templates/field/field--field_mega_menu_links.html.twig
@@ -1,3 +1,3 @@
 {% for item in items %}
-{{ item.content}}
+    {{ item.content}}
 {% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_links_desc.html.twig b/templates/field/field--field_mega_menu_links_desc.html.twig
index 9ce23690..b06246d1 100644
--- a/templates/field/field--field_mega_menu_links_desc.html.twig
+++ b/templates/field/field--field_mega_menu_links_desc.html.twig
@@ -1,3 +1,3 @@
 {% for item in items %}
-{{ item.content}}
+    {{ item.content}}
 {% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_links_link.html.twig b/templates/field/field--field_mega_menu_links_link.html.twig
index 9ce23690..b06246d1 100644
--- a/templates/field/field--field_mega_menu_links_link.html.twig
+++ b/templates/field/field--field_mega_menu_links_link.html.twig
@@ -1,3 +1,3 @@
 {% for item in items %}
-{{ item.content}}
+    {{ item.content}}
 {% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_links_list_label.html.twig b/templates/field/field--field_mega_menu_links_list_label.html.twig
index 9ce23690..b06246d1 100644
--- a/templates/field/field--field_mega_menu_links_list_label.html.twig
+++ b/templates/field/field--field_mega_menu_links_list_label.html.twig
@@ -1,3 +1,3 @@
 {% for item in items %}
-{{ item.content}}
+    {{ item.content}}
 {% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_links_list_links.html.twig b/templates/field/field--field_mega_menu_links_list_links.html.twig
index 9ce23690..b06246d1 100644
--- a/templates/field/field--field_mega_menu_links_list_links.html.twig
+++ b/templates/field/field--field_mega_menu_links_list_links.html.twig
@@ -1,3 +1,3 @@
 {% for item in items %}
-{{ item.content}}
+    {{ item.content}}
 {% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_select.html.twig b/templates/field/field--field_mega_menu_select.html.twig
index 9ce23690..b06246d1 100644
--- a/templates/field/field--field_mega_menu_select.html.twig
+++ b/templates/field/field--field_mega_menu_select.html.twig
@@ -1,3 +1,3 @@
 {% for item in items %}
-{{ item.content}}
+    {{ item.content}}
 {% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_text_above.html.twig b/templates/field/field--field_mega_menu_text_above.html.twig
index db73afc7..bbb63e0e 100644
--- a/templates/field/field--field_mega_menu_text_above.html.twig
+++ b/templates/field/field--field_mega_menu_text_above.html.twig
@@ -1,5 +1,5 @@
 <div class = "ucb-mega-menu-text-above">
 {% for item in items %}
-{{ item.content}}
+    {{ item.content}}
 {% endfor %}
 </div>
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_text_below.html.twig b/templates/field/field--field_mega_menu_text_below.html.twig
index 9ce23690..b06246d1 100644
--- a/templates/field/field--field_mega_menu_text_below.html.twig
+++ b/templates/field/field--field_mega_menu_text_below.html.twig
@@ -1,3 +1,3 @@
 {% for item in items %}
-{{ item.content}}
+    {{ item.content}}
 {% endfor %}
\ No newline at end of file
diff --git a/templates/navigation/menu--extras.html.twig b/templates/navigation/menu--extras.html.twig
index 86538173..c6e81eee 100644
--- a/templates/navigation/menu--extras.html.twig
+++ b/templates/navigation/menu--extras.html.twig
@@ -32,48 +32,47 @@
         <ul{{attributes.addClass('ucb-menu nav')}}>
             {% for item in items %}
                 {% set classes = [
-          'menu-item',
-          item.is_expanded ? 'expanded',
-          item.is_collapsed ? 'collapsed',
-          item.in_active_trail ? 'active',
-          item.is_unpublished ? 'unpublished'
-        ] %}
-            <li{{item.attributes.addClass(classes)}}>
-                {% if item.title|upper == 'HOME' %}
-                    <a{{create_attribute({href:item.url|render,class:'ucb-home-button nav-link',title:item.title})}}>
-                        <i class="fa-solid fa-home"></i>
-                        <span class="visually-hidden">{{ item.title }}</span>
-                    </a>
-                {% else %}
-                    {% set title = item.is_unpublished ? {
-                     '#markup': '<i class="fa-solid fa-eye-slash"></i> ' ~ item.title|e ~ ' <span class="visually-hidden">(Unpublished)</span>'
-                    } : item.title %}
-                    {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
-                        {% set linkURL =  "megaMenuClicked('" ~ title|lower|trim|replace({' ': ''}) ~ item.content.field_mega_menu_select.0['#block_content'].id.value ~ "')" %}
-                        <a href = "#" class="nav-link ucb-mega-menu-outer-link" data-click = "{{title|lower|trim|replace({' ': ''})}}{{item.content.field_mega_menu_select.0['#block_content'].id.value}}">{{title}} <i class="fa fa-angle-down ucb-mega-menu-icon" aria-hidden="true"></i></a>
+                'menu-item',
+                item.is_expanded ? 'expanded',
+                item.is_collapsed ? 'collapsed',
+                item.in_active_trail ? 'active',
+                item.is_unpublished ? 'unpublished'
+                ] %}
+                <li{{item.attributes.addClass(classes)}}>
+                    {% if item.title|upper == 'HOME' %}
+                        <a{{create_attribute({href:item.url|render,class:'ucb-home-button nav-link',title:item.title})}}>
+                            <i class="fa-solid fa-home"></i>
+                            <span class="visually-hidden">{{ item.title }}</span>
+                        </a>
                     {% else %}
-                        {{ link(title, item.url, create_attribute({ class: 'nav-link' })) }}
-                        {% if item.below %}
-                            {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
+                        {% set title = item.is_unpublished ? {
+                        '#markup': '<i class="fa-solid fa-eye-slash"></i> ' ~ item.title|e ~ ' <span class="visually-hidden">(Unpublished)</span>'
+                        } : item.title %}
+                        {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
+                            {% set linkURL =  "megaMenuClicked('" ~ title|lower|trim|replace({' ': ''}) ~ item.content.field_mega_menu_select.0['#block_content'].id.value ~ "')" %}
+                            <a href = "{{item.url}}" class="nav-link ucb-mega-menu-outer-link" data-click = "{{title|lower|trim|replace({' ': ''})}}{{item.content.field_mega_menu_select.0['#block_content'].id.value}}">{{title}} <i class="fa fa-angle-down ucb-mega-menu-icon" aria-hidden="true"></i></a>
+                        {% else %}
+                            {{ link(title, item.url, create_attribute({ class: 'nav-link' })) }}
+                            {% if item.below %}
+                                {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
+                            {% endif %}
                         {% endif %}
                     {% endif %}
-                {% endif %}
                 </li>
             {% endfor %}
         </ul>
             <div class = "ucb-mega-menu container">
             {% for item in items %}
-                        {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
-                            <div class="ucb-mega-menu-wrapper block-{{item.title|lower|trim|replace({' ': ''}) ~ item.content.field_mega_menu_select.0['#block_content'].id.value}} collapse">
-                                <h2 class="ucb-mega-menu-header"><a href = "{{item.url}}" class = "ucb-mega-menu-heading-link">{{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_heading.value }}</a></h2>
-                                <div class="ucb-mega-menu-column-wrapper">
-                                    {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_above|view}}
-                                    {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_menu_links|view}}
-                                </div>
-                                {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_below|view}}
-
-                            </div>
-                        {% endif %}
+                {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
+                    <div class="ucb-mega-menu-wrapper block-{{item.title|lower|trim|replace({' ': ''}) ~ item.content.field_mega_menu_select.0['#block_content'].id.value}} collapse">
+                        <h2 class="ucb-mega-menu-header"><a href = "{{item.url}}" class = "ucb-mega-menu-heading-link">{{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_heading.value }}</a></h2>
+                        <div class="ucb-mega-menu-column-wrapper">
+                            {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_above|view}}
+                            {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_menu_links|view}}
+                        </div>
+                        {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_below|view}}
+                    </div>
+                {% endif %}
             {% endfor %}
             </div>
     {% endif %}
diff --git a/templates/paragraphs/paragraph--mega-menu-links-list.html.twig b/templates/paragraphs/paragraph--mega-menu-links-list.html.twig
index 2ae375d5..ac4fd7a6 100644
--- a/templates/paragraphs/paragraph--mega-menu-links-list.html.twig
+++ b/templates/paragraphs/paragraph--mega-menu-links-list.html.twig
@@ -1,6 +1,6 @@
 <div class = "ucb-mega-menu-column">
-<strong class = "ucb-mega-menu-column-label">{{ content.field_mega_menu_links_list_label|render}}</strong>
-<ul class = "ucb-mega-menu-column-links-wrapper">
-{{ content.field_mega_menu_links_list_links|render }}
-</ul>
+    <strong class = "ucb-mega-menu-column-label">{{ content.field_mega_menu_links_list_label|render}}</strong>
+    <ul class = "ucb-mega-menu-column-links-wrapper">
+        {{ content.field_mega_menu_links_list_links|render }}
+    </ul>
 </div>
\ No newline at end of file
diff --git a/templates/paragraphs/paragraph--mega-menu-links.html.twig b/templates/paragraphs/paragraph--mega-menu-links.html.twig
index 347f846f..f94437f2 100644
--- a/templates/paragraphs/paragraph--mega-menu-links.html.twig
+++ b/templates/paragraphs/paragraph--mega-menu-links.html.twig
@@ -1,6 +1,6 @@
 <li>
-{{ content.field_mega_menu_links_link|render }}
-<div class = "ucb-mega-menu-link-desc">
-{{ content.field_mega_menu_links_desc|render }}
-</div>
+    {{ content.field_mega_menu_links_link|render }}
+    <div class = "ucb-mega-menu-link-desc">
+        {{ content.field_mega_menu_links_desc|render }}
+    </div>
 </li>
\ No newline at end of file

From a1d4283e819a9dc9f6c0be413d4cee5a1f61fff9 Mon Sep 17 00:00:00 2001
From: Jacob Korf <korfj921921@gmail.com>
Date: Wed, 14 Aug 2024 11:59:45 -0600
Subject: [PATCH 15/23] style fix

---
 js/ucb-mega-menu.js                           | 114 +++++++++---------
 templates/block/block--mega_menu.html.twig    |  10 +-
 .../field--field-display-mega-menu.html.twig  |   2 +-
 ...ield--field-mega-menu-menu-links.html.twig |   2 +-
 .../field--field-mega-menu-select.html.twig   |   4 +-
 ...d--field_collections_multiselect.html.twig |   2 +-
 .../field--field_mega_menu_heading.html.twig  |   2 +-
 .../field--field_mega_menu_links.html.twig    |   2 +-
 ...ield--field_mega_menu_links_desc.html.twig |   2 +-
 ...ield--field_mega_menu_links_link.html.twig |   2 +-
 ...field_mega_menu_links_list_label.html.twig |   2 +-
 ...field_mega_menu_links_list_links.html.twig |   2 +-
 .../field--field_mega_menu_select.html.twig   |   2 +-
 ...ield--field_mega_menu_text_above.html.twig |   2 +-
 ...ield--field_mega_menu_text_below.html.twig |   2 +-
 15 files changed, 76 insertions(+), 76 deletions(-)

diff --git a/js/ucb-mega-menu.js b/js/ucb-mega-menu.js
index cf705a9b..beafa7c5 100644
--- a/js/ucb-mega-menu.js
+++ b/js/ucb-mega-menu.js
@@ -1,88 +1,88 @@
 //Triggers when the mega menu link is clicked to show or hide the mega menu
 function megaMenuClicked(blockName) {
-    const blockID =  document.getElementsByClassName("block-" + blockName);
-    const allMegaMenus =  document.getElementsByClassName("ucb-mega-menu-wrapper");
-    let blockState = 0;
-    for (let i = 0; i < blockID.length; i++) {
-        if(blockID[i].classList.contains("show")) {
-            blockState = 1;
-        }
+  const blockID =  document.getElementsByClassName("block-" + blockName);
+  const allMegaMenus =  document.getElementsByClassName("ucb-mega-menu-wrapper");
+  let blockState = 0;
+  for (let i = 0; i < blockID.length; i++) {
+    if(blockID[i].classList.contains("show")) {
+      blockState = 1;
     }
-    for (let i = 0; i < allMegaMenus.length; i++) {
-        if(allMegaMenus[i].classList.contains("show"))
-        {
-            allMegaMenus[i].classList.remove("show")
-            allMegaMenus[i].classList.add("collapse")
-        }
+  }
+  for (let i = 0; i < allMegaMenus.length; i++) {
+    if(allMegaMenus[i].classList.contains("show"))
+    {
+      allMegaMenus[i].classList.remove("show")
+      allMegaMenus[i].classList.add("collapse")
     }
-    for (let i = 0; i < blockID.length; i++) {
-        if(blockState == 0)
-        {
-            blockID[i].classList.add("show")
-            blockID[i].classList.remove("collapse")
-        }
-        else {
-            blockID[i].classList.add("collapse")
-            blockID[i].classList.remove("show")
-        }
+  }
+  for (let i = 0; i < blockID.length; i++) {
+    if(blockState == 0)
+    {
+      blockID[i].classList.add("show")
+      blockID[i].classList.remove("collapse")
     }
+    else {
+      blockID[i].classList.add("collapse")
+      blockID[i].classList.remove("show")
+    }
+  }
 };
 
 //Adds the click event listener to all mega menu outer links
 const megaMenuLinks = document.getElementsByClassName("ucb-mega-menu-outer-link");
 for (let i = 0; i < megaMenuLinks.length; i++) {
-    if(megaMenuLinks[i].dataset.click.length > 0) {
-        megaMenuLinks[i].addEventListener("click", function(event){
-            event.preventDefault();
-            megaMenuClicked(megaMenuLinks[i].dataset.click);
-        });
-    }
+  if(megaMenuLinks[i].dataset.click.length > 0) {
+    megaMenuLinks[i].addEventListener("click", function(event){
+      event.preventDefault();
+      megaMenuClicked(megaMenuLinks[i].dataset.click);
+    });
+  }
 }
 
 //Adds the column value to the column wrapper
 const megaMenuColumns = document.getElementsByClassName("ucb-mega-menu-column-wrapper");
 for (let i = 0; i < megaMenuLinks.length; i++) {
-    let megaMenuColumnCount = megaMenuColumns[i].children.length;
-    if(megaMenuColumnCount < 6) {
-        megaMenuColumnCount = 3;
-    }
-    if(megaMenuColumnCount > 6) {
-        megaMenuColumnCount = 6;
-    }
-    megaMenuColumns[i].classList.add("ucb-mega-menu-column-" + megaMenuColumnCount);
+  let megaMenuColumnCount = megaMenuColumns[i].children.length;
+  if(megaMenuColumnCount < 6) {
+    megaMenuColumnCount = 3;
+  }
+  if(megaMenuColumnCount > 6) {
+    megaMenuColumnCount = 6;
+  }
+  megaMenuColumns[i].classList.add("ucb-mega-menu-column-" + megaMenuColumnCount);
 }
 
 //Adds a method for hiding the mega menu in mobile views when the mobile menu isn't open
 document.getElementById("ucb-mobile-menu-toggle").addEventListener("click", function(event){
-    resizeFn();
+  resizeFn();
 });
 
 function resizeFn() {
-    if(window.innerWidth < 577) {
-        if(document.getElementById("ucb-mobile-menu-toggle").ariaExpanded.toString().localeCompare("false")==0) {
-            const allMegaMenus =  document.getElementsByClassName("ucb-mega-menu-wrapper");
-            for (let i = 0; i < allMegaMenus.length; i++) {
-                if(allMegaMenus[i].classList.contains("show"))
-                {
-                    allMegaMenus[i].classList.remove("show")
-                    allMegaMenus[i].classList.add("collapse")
-                }
-            }
+  if(window.innerWidth < 577) {
+    if(document.getElementById("ucb-mobile-menu-toggle").ariaExpanded.toString().localeCompare("false")==0) {
+      const allMegaMenus =  document.getElementsByClassName("ucb-mega-menu-wrapper");
+      for (let i = 0; i < allMegaMenus.length; i++) {
+        if(allMegaMenus[i].classList.contains("show"))
+        {
+          allMegaMenus[i].classList.remove("show")
+          allMegaMenus[i].classList.add("collapse")
         }
+      }
     }
+  }
 }
 window.onresize = resizeFn;
 
  //Add an even listener to check if the user clicked outside the mega menu, then close the mega menu
  window.addEventListener('click', function(e){
-    const allMegaMenus =  document.getElementsByClassName("ucb-mega-menu-wrapper");
-    const allMainMenus =  document.getElementsByClassName("block-system-menu-blockmain");
-    for (let i = 0; i < allMegaMenus.length; i++) {
-        for (let j = 0; i < allMainMenus.length; i++) {
-            if (!allMegaMenus[i].contains(e.target) && !allMainMenus[j].contains(e.target) && allMegaMenus[i].classList.contains("show")){
-                allMegaMenus[i].classList.remove("show")
-                allMegaMenus[i].classList.add("collapse")
-            }
-        }
+  const allMegaMenus =  document.getElementsByClassName("ucb-mega-menu-wrapper");
+  const allMainMenus =  document.getElementsByClassName("block-system-menu-blockmain");
+  for (let i = 0; i < allMegaMenus.length; i++) {
+    for (let j = 0; i < allMainMenus.length; i++) {
+      if (!allMegaMenus[i].contains(e.target) && !allMainMenus[j].contains(e.target) && allMegaMenus[i].classList.contains("show")){
+        allMegaMenus[i].classList.remove("show")
+        allMegaMenus[i].classList.add("collapse")
+      }
     }
+  }
 })
\ No newline at end of file
diff --git a/templates/block/block--mega_menu.html.twig b/templates/block/block--mega_menu.html.twig
index ef3902a1..85d21601 100644
--- a/templates/block/block--mega_menu.html.twig
+++ b/templates/block/block--mega_menu.html.twig
@@ -1,8 +1,8 @@
 
 {% block content %}
-    <div class="ucb-mega-menu-column-wrapper">
-        {{content.field_mega_menu_text_above|render}}
-        {{content.field_mega_menu_menu_links}}
-    </div>
-    {{content.field_mega_menu_text_below|render}}
+  <div class="ucb-mega-menu-column-wrapper">
+    {{content.field_mega_menu_text_above|render}}
+    {{content.field_mega_menu_menu_links}}
+  </div>
+  {{content.field_mega_menu_text_below|render}}
 {% endblock %}
\ No newline at end of file
diff --git a/templates/field/field--field-display-mega-menu.html.twig b/templates/field/field--field-display-mega-menu.html.twig
index b06246d1..40f526e1 100644
--- a/templates/field/field--field-display-mega-menu.html.twig
+++ b/templates/field/field--field-display-mega-menu.html.twig
@@ -1,3 +1,3 @@
 {% for item in items %}
-    {{ item.content}}
+  {{ item.content}}
 {% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field-mega-menu-menu-links.html.twig b/templates/field/field--field-mega-menu-menu-links.html.twig
index 9ce23690..40f526e1 100644
--- a/templates/field/field--field-mega-menu-menu-links.html.twig
+++ b/templates/field/field--field-mega-menu-menu-links.html.twig
@@ -1,3 +1,3 @@
 {% for item in items %}
-{{ item.content}}
+  {{ item.content}}
 {% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field-mega-menu-select.html.twig b/templates/field/field--field-mega-menu-select.html.twig
index 0c6e67d6..e9e3522f 100644
--- a/templates/field/field--field-mega-menu-select.html.twig
+++ b/templates/field/field--field-mega-menu-select.html.twig
@@ -1,3 +1,3 @@
 {% for item in items %}
-{{ item}}
- {% endfor %}
\ No newline at end of file
+  {{ item}}
+{% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field_collections_multiselect.html.twig b/templates/field/field--field_collections_multiselect.html.twig
index e2672352..78785778 100644
--- a/templates/field/field--field_collections_multiselect.html.twig
+++ b/templates/field/field--field_collections_multiselect.html.twig
@@ -1,3 +1,3 @@
 {% for item in items %}
-	{{ item.content }}
+  {{ item.content }}
 {% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_heading.html.twig b/templates/field/field--field_mega_menu_heading.html.twig
index b06246d1..40f526e1 100644
--- a/templates/field/field--field_mega_menu_heading.html.twig
+++ b/templates/field/field--field_mega_menu_heading.html.twig
@@ -1,3 +1,3 @@
 {% for item in items %}
-    {{ item.content}}
+  {{ item.content}}
 {% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_links.html.twig b/templates/field/field--field_mega_menu_links.html.twig
index b06246d1..40f526e1 100644
--- a/templates/field/field--field_mega_menu_links.html.twig
+++ b/templates/field/field--field_mega_menu_links.html.twig
@@ -1,3 +1,3 @@
 {% for item in items %}
-    {{ item.content}}
+  {{ item.content}}
 {% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_links_desc.html.twig b/templates/field/field--field_mega_menu_links_desc.html.twig
index b06246d1..40f526e1 100644
--- a/templates/field/field--field_mega_menu_links_desc.html.twig
+++ b/templates/field/field--field_mega_menu_links_desc.html.twig
@@ -1,3 +1,3 @@
 {% for item in items %}
-    {{ item.content}}
+  {{ item.content}}
 {% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_links_link.html.twig b/templates/field/field--field_mega_menu_links_link.html.twig
index b06246d1..5a437c5f 100644
--- a/templates/field/field--field_mega_menu_links_link.html.twig
+++ b/templates/field/field--field_mega_menu_links_link.html.twig
@@ -1,3 +1,3 @@
 {% for item in items %}
-    {{ item.content}}
+ {{ item.content}}
 {% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_links_list_label.html.twig b/templates/field/field--field_mega_menu_links_list_label.html.twig
index b06246d1..40f526e1 100644
--- a/templates/field/field--field_mega_menu_links_list_label.html.twig
+++ b/templates/field/field--field_mega_menu_links_list_label.html.twig
@@ -1,3 +1,3 @@
 {% for item in items %}
-    {{ item.content}}
+  {{ item.content}}
 {% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_links_list_links.html.twig b/templates/field/field--field_mega_menu_links_list_links.html.twig
index b06246d1..40f526e1 100644
--- a/templates/field/field--field_mega_menu_links_list_links.html.twig
+++ b/templates/field/field--field_mega_menu_links_list_links.html.twig
@@ -1,3 +1,3 @@
 {% for item in items %}
-    {{ item.content}}
+  {{ item.content}}
 {% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_select.html.twig b/templates/field/field--field_mega_menu_select.html.twig
index b06246d1..40f526e1 100644
--- a/templates/field/field--field_mega_menu_select.html.twig
+++ b/templates/field/field--field_mega_menu_select.html.twig
@@ -1,3 +1,3 @@
 {% for item in items %}
-    {{ item.content}}
+  {{ item.content}}
 {% endfor %}
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_text_above.html.twig b/templates/field/field--field_mega_menu_text_above.html.twig
index bbb63e0e..94db3df7 100644
--- a/templates/field/field--field_mega_menu_text_above.html.twig
+++ b/templates/field/field--field_mega_menu_text_above.html.twig
@@ -1,5 +1,5 @@
 <div class = "ucb-mega-menu-text-above">
 {% for item in items %}
-    {{ item.content}}
+  {{ item.content}}
 {% endfor %}
 </div>
\ No newline at end of file
diff --git a/templates/field/field--field_mega_menu_text_below.html.twig b/templates/field/field--field_mega_menu_text_below.html.twig
index b06246d1..40f526e1 100644
--- a/templates/field/field--field_mega_menu_text_below.html.twig
+++ b/templates/field/field--field_mega_menu_text_below.html.twig
@@ -1,3 +1,3 @@
 {% for item in items %}
-    {{ item.content}}
+  {{ item.content}}
 {% endfor %}
\ No newline at end of file

From f822deac14771a367de89b58e3ccf6062eef4ac6 Mon Sep 17 00:00:00 2001
From: Jacob Korf <korfj921921@gmail.com>
Date: Wed, 14 Aug 2024 12:06:49 -0600
Subject: [PATCH 16/23] reduce spaces

---
 templates/navigation/menu--extras.html.twig   | 94 +++++++++----------
 .../paragraph--mega-menu-links-list.html.twig |  8 +-
 .../paragraph--mega-menu-links.html.twig      |  8 +-
 3 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/templates/navigation/menu--extras.html.twig b/templates/navigation/menu--extras.html.twig
index c6e81eee..6b7871a4 100644
--- a/templates/navigation/menu--extras.html.twig
+++ b/templates/navigation/menu--extras.html.twig
@@ -28,52 +28,52 @@
 {{ attach_library('boulder_base/ucb-mega-menu-block') }}
 {{ menus.menu_links(items, attributes, 0) }}
 {% macro menu_links(items, attributes, menu_level) %}
-    {% if items %}
-        <ul{{attributes.addClass('ucb-menu nav')}}>
-            {% for item in items %}
-                {% set classes = [
-                'menu-item',
-                item.is_expanded ? 'expanded',
-                item.is_collapsed ? 'collapsed',
-                item.in_active_trail ? 'active',
-                item.is_unpublished ? 'unpublished'
-                ] %}
-                <li{{item.attributes.addClass(classes)}}>
-                    {% if item.title|upper == 'HOME' %}
-                        <a{{create_attribute({href:item.url|render,class:'ucb-home-button nav-link',title:item.title})}}>
-                            <i class="fa-solid fa-home"></i>
-                            <span class="visually-hidden">{{ item.title }}</span>
-                        </a>
-                    {% else %}
-                        {% set title = item.is_unpublished ? {
-                        '#markup': '<i class="fa-solid fa-eye-slash"></i> ' ~ item.title|e ~ ' <span class="visually-hidden">(Unpublished)</span>'
-                        } : item.title %}
-                        {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
-                            {% set linkURL =  "megaMenuClicked('" ~ title|lower|trim|replace({' ': ''}) ~ item.content.field_mega_menu_select.0['#block_content'].id.value ~ "')" %}
-                            <a href = "{{item.url}}" class="nav-link ucb-mega-menu-outer-link" data-click = "{{title|lower|trim|replace({' ': ''})}}{{item.content.field_mega_menu_select.0['#block_content'].id.value}}">{{title}} <i class="fa fa-angle-down ucb-mega-menu-icon" aria-hidden="true"></i></a>
-                        {% else %}
-                            {{ link(title, item.url, create_attribute({ class: 'nav-link' })) }}
-                            {% if item.below %}
-                                {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
-                            {% endif %}
-                        {% endif %}
-                    {% endif %}
-                </li>
-            {% endfor %}
-        </ul>
-            <div class = "ucb-mega-menu container">
-            {% for item in items %}
-                {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
-                    <div class="ucb-mega-menu-wrapper block-{{item.title|lower|trim|replace({' ': ''}) ~ item.content.field_mega_menu_select.0['#block_content'].id.value}} collapse">
-                        <h2 class="ucb-mega-menu-header"><a href = "{{item.url}}" class = "ucb-mega-menu-heading-link">{{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_heading.value }}</a></h2>
-                        <div class="ucb-mega-menu-column-wrapper">
-                            {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_above|view}}
-                            {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_menu_links|view}}
-                        </div>
-                        {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_below|view}}
-                    </div>
-                {% endif %}
-            {% endfor %}
+  {% if items %}
+    <ul{{attributes.addClass('ucb-menu nav')}}>
+      {% for item in items %}
+        {% set classes = [
+        'menu-item',
+        item.is_expanded ? 'expanded',
+        item.is_collapsed ? 'collapsed',
+        item.in_active_trail ? 'active',
+        item.is_unpublished ? 'unpublished'
+        ] %}
+        <li{{item.attributes.addClass(classes)}}>
+          {% if item.title|upper == 'HOME' %}
+            <a{{create_attribute({href:item.url|render,class:'ucb-home-button nav-link',title:item.title})}}>
+              <i class="fa-solid fa-home"></i>
+              <span class="visually-hidden">{{ item.title }}</span>
+            </a>
+          {% else %}
+            {% set title = item.is_unpublished ? {
+            '#markup': '<i class="fa-solid fa-eye-slash"></i> ' ~ item.title|e ~ ' <span class="visually-hidden">(Unpublished)</span>'
+            } : item.title %}
+            {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
+              {% set linkURL =  "megaMenuClicked('" ~ title|lower|trim|replace({' ': ''}) ~ item.content.field_mega_menu_select.0['#block_content'].id.value ~ "')" %}
+              <a href = "{{item.url}}" class="nav-link ucb-mega-menu-outer-link" data-click = "{{title|lower|trim|replace({' ': ''})}}{{item.content.field_mega_menu_select.0['#block_content'].id.value}}">{{title}} <i class="fa fa-angle-down ucb-mega-menu-icon" aria-hidden="true"></i></a>
+            {% else %}
+              {{ link(title, item.url, create_attribute({ class: 'nav-link' })) }}
+              {% if item.below %}
+                {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
+              {% endif %}
+            {% endif %}
+          {% endif %}
+        </li>
+      {% endfor %}
+    </ul>
+      <div class = "ucb-mega-menu container">
+      {% for item in items %}
+        {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
+          <div class="ucb-mega-menu-wrapper block-{{item.title|lower|trim|replace({' ': ''}) ~ item.content.field_mega_menu_select.0['#block_content'].id.value}} collapse">
+            <h2 class="ucb-mega-menu-header"><a href = "{{item.url}}" class = "ucb-mega-menu-heading-link">{{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_heading.value }}</a></h2>
+            <div class="ucb-mega-menu-column-wrapper">
+              {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_above|view}}
+              {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_menu_links|view}}
             </div>
-    {% endif %}
+            {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_below|view}}
+          </div>
+        {% endif %}
+      {% endfor %}
+      </div>
+  {% endif %}
 {% endmacro %}
diff --git a/templates/paragraphs/paragraph--mega-menu-links-list.html.twig b/templates/paragraphs/paragraph--mega-menu-links-list.html.twig
index ac4fd7a6..30fcee3c 100644
--- a/templates/paragraphs/paragraph--mega-menu-links-list.html.twig
+++ b/templates/paragraphs/paragraph--mega-menu-links-list.html.twig
@@ -1,6 +1,6 @@
 <div class = "ucb-mega-menu-column">
-    <strong class = "ucb-mega-menu-column-label">{{ content.field_mega_menu_links_list_label|render}}</strong>
-    <ul class = "ucb-mega-menu-column-links-wrapper">
-        {{ content.field_mega_menu_links_list_links|render }}
-    </ul>
+  <strong class = "ucb-mega-menu-column-label">{{ content.field_mega_menu_links_list_label|render}}</strong>
+  <ul class = "ucb-mega-menu-column-links-wrapper">
+    {{ content.field_mega_menu_links_list_links|render }}
+  </ul>
 </div>
\ No newline at end of file
diff --git a/templates/paragraphs/paragraph--mega-menu-links.html.twig b/templates/paragraphs/paragraph--mega-menu-links.html.twig
index f94437f2..63fdeac1 100644
--- a/templates/paragraphs/paragraph--mega-menu-links.html.twig
+++ b/templates/paragraphs/paragraph--mega-menu-links.html.twig
@@ -1,6 +1,6 @@
 <li>
-    {{ content.field_mega_menu_links_link|render }}
-    <div class = "ucb-mega-menu-link-desc">
-        {{ content.field_mega_menu_links_desc|render }}
-    </div>
+  {{ content.field_mega_menu_links_link|render }}
+  <div class = "ucb-mega-menu-link-desc">
+    {{ content.field_mega_menu_links_desc|render }}
+  </div>
 </li>
\ No newline at end of file

From dd630d2cc60c7d1603508f3319851aca4546cb7d Mon Sep 17 00:00:00 2001
From: Jacob Korf <korfj921921@gmail.com>
Date: Fri, 16 Aug 2024 13:22:00 -0600
Subject: [PATCH 17/23] update to mega menu structure

---
 css/block/ucb-mega-menu.css                 |  7 +++
 js/ucb-mega-menu.js                         | 48 +++++++--------------
 js/ucb-menu.js                              |  4 +-
 templates/navigation/menu--extras.html.twig | 33 +++++++-------
 4 files changed, 40 insertions(+), 52 deletions(-)

diff --git a/css/block/ucb-mega-menu.css b/css/block/ucb-mega-menu.css
index f7b8092b..4c3b9519 100644
--- a/css/block/ucb-mega-menu.css
+++ b/css/block/ucb-mega-menu.css
@@ -28,6 +28,10 @@
     box-shadow: 0 2px 5px rgba(0 0 0 /10%);
     z-index: 9;
     background: #fff;
+    left: 0;
+    right: 0;
+    margin-right: auto;
+    margin-left: auto;
 }
 
 .ucb-mega-menu-outer-link {
@@ -72,6 +76,9 @@
         display: flex;
         flex-direction: column;
     }
+    .ucb-mega-menu {
+        position: relative;
+    }
     .ucb-mega-menu-column-wrapper {
         display: flex;
         flex-direction: column;
diff --git a/js/ucb-mega-menu.js b/js/ucb-mega-menu.js
index beafa7c5..198a7a41 100644
--- a/js/ucb-mega-menu.js
+++ b/js/ucb-mega-menu.js
@@ -1,35 +1,37 @@
 //Triggers when the mega menu link is clicked to show or hide the mega menu
 function megaMenuClicked(blockName) {
   const blockID =  document.getElementsByClassName("block-" + blockName);
-  const allMegaMenus =  document.getElementsByClassName("ucb-mega-menu-wrapper");
+  let allMegaMenus =  document.getElementsByClassName("ucb-mega-menu-wrapper");
   let blockState = 0;
   for (let i = 0; i < blockID.length; i++) {
     if(blockID[i].classList.contains("show")) {
       blockState = 1;
     }
   }
+
   for (let i = 0; i < allMegaMenus.length; i++) {
     if(allMegaMenus[i].classList.contains("show"))
     {
-      allMegaMenus[i].classList.remove("show")
-      allMegaMenus[i].classList.add("collapse")
+      allMegaMenus[i].classList.remove("show");
+      allMegaMenus[i].classList.add("collapse");
     }
   }
+
   for (let i = 0; i < blockID.length; i++) {
     if(blockState == 0)
     {
-      blockID[i].classList.add("show")
-      blockID[i].classList.remove("collapse")
+      blockID[i].classList.add("show");
+      blockID[i].classList.remove("collapse");
     }
     else {
-      blockID[i].classList.add("collapse")
-      blockID[i].classList.remove("show")
+      blockID[i].classList.add("collapse");
+      blockID[i].classList.remove("show");
     }
   }
 };
 
 //Adds the click event listener to all mega menu outer links
-const megaMenuLinks = document.getElementsByClassName("ucb-mega-menu-outer-link");
+let megaMenuLinks = document.getElementsByClassName("ucb-mega-menu-outer-link");
 for (let i = 0; i < megaMenuLinks.length; i++) {
   if(megaMenuLinks[i].dataset.click.length > 0) {
     megaMenuLinks[i].addEventListener("click", function(event){
@@ -40,7 +42,7 @@ for (let i = 0; i < megaMenuLinks.length; i++) {
 }
 
 //Adds the column value to the column wrapper
-const megaMenuColumns = document.getElementsByClassName("ucb-mega-menu-column-wrapper");
+let megaMenuColumns = document.getElementsByClassName("ucb-mega-menu-column-wrapper");
 for (let i = 0; i < megaMenuLinks.length; i++) {
   let megaMenuColumnCount = megaMenuColumns[i].children.length;
   if(megaMenuColumnCount < 6) {
@@ -52,36 +54,16 @@ for (let i = 0; i < megaMenuLinks.length; i++) {
   megaMenuColumns[i].classList.add("ucb-mega-menu-column-" + megaMenuColumnCount);
 }
 
-//Adds a method for hiding the mega menu in mobile views when the mobile menu isn't open
-document.getElementById("ucb-mobile-menu-toggle").addEventListener("click", function(event){
-  resizeFn();
-});
-
-function resizeFn() {
-  if(window.innerWidth < 577) {
-    if(document.getElementById("ucb-mobile-menu-toggle").ariaExpanded.toString().localeCompare("false")==0) {
-      const allMegaMenus =  document.getElementsByClassName("ucb-mega-menu-wrapper");
-      for (let i = 0; i < allMegaMenus.length; i++) {
-        if(allMegaMenus[i].classList.contains("show"))
-        {
-          allMegaMenus[i].classList.remove("show")
-          allMegaMenus[i].classList.add("collapse")
-        }
-      }
-    }
-  }
-}
-window.onresize = resizeFn;
-
  //Add an even listener to check if the user clicked outside the mega menu, then close the mega menu
  window.addEventListener('click', function(e){
   const allMegaMenus =  document.getElementsByClassName("ucb-mega-menu-wrapper");
   const allMainMenus =  document.getElementsByClassName("block-system-menu-blockmain");
   for (let i = 0; i < allMegaMenus.length; i++) {
-    for (let j = 0; i < allMainMenus.length; i++) {
+    for (let j = 0; j < allMainMenus.length; j++) {
       if (!allMegaMenus[i].contains(e.target) && !allMainMenus[j].contains(e.target) && allMegaMenus[i].classList.contains("show")){
-        allMegaMenus[i].classList.remove("show")
-        allMegaMenus[i].classList.add("collapse")
+        console.log(allMegaMenus[i].classList);
+        allMegaMenus[i].classList.remove("show");
+        allMegaMenus[i].classList.add("collapse");
       }
     }
   }
diff --git a/js/ucb-menu.js b/js/ucb-menu.js
index e6456b53..69f36c8a 100644
--- a/js/ucb-menu.js
+++ b/js/ucb-menu.js
@@ -1,13 +1,13 @@
 document.addEventListener("DOMContentLoaded", () => {
   
-  const mainCheck = document.getElementsByClassName("ucb-primary-menu-region-container")[0];
+  const mainCheck = document.getElementsByClassName("ucb-primary-menu-region")[0];
   if (mainCheck != null) {
   const mainMenuCheck = mainCheck.getElementsByClassName("ucb-menu")[0];
   if (mainMenuCheck != null) {
     const mainMenu = new AccessibleMenu.DisclosureMenu({
     menuElement: mainMenuCheck,
     controllerElement: document.querySelector("#ucb-mobile-menu-toggle"),
-    containerElement: document.getElementsByClassName("ucb-primary-menu-region-container")[0],
+    containerElement: document.getElementsByClassName("ucb-primary-menu-region")[0],
     openClass: "open",
   });
 }
diff --git a/templates/navigation/menu--extras.html.twig b/templates/navigation/menu--extras.html.twig
index 6b7871a4..32132121 100644
--- a/templates/navigation/menu--extras.html.twig
+++ b/templates/navigation/menu--extras.html.twig
@@ -46,11 +46,24 @@
             </a>
           {% else %}
             {% set title = item.is_unpublished ? {
-            '#markup': '<i class="fa-solid fa-eye-slash"></i> ' ~ item.title|e ~ ' <span class="visually-hidden">(Unpublished)</span>'
+            '#markup': '<i class="fa-solid fa-eye-slash"></i> ' ~ item.title|e ~ '<span class="visually-hidden">(Unpublished)</span>'
             } : item.title %}
             {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
-              {% set linkURL =  "megaMenuClicked('" ~ title|lower|trim|replace({' ': ''}) ~ item.content.field_mega_menu_select.0['#block_content'].id.value ~ "')" %}
-              <a href = "{{item.url}}" class="nav-link ucb-mega-menu-outer-link" data-click = "{{title|lower|trim|replace({' ': ''})}}{{item.content.field_mega_menu_select.0['#block_content'].id.value}}">{{title}} <i class="fa fa-angle-down ucb-mega-menu-icon" aria-hidden="true"></i></a>
+              {% set linkAttr = create_attribute({ 'data-click': title|lower|trim|replace({' ': ''}) ~ item.content.field_mega_menu_select.0['#block_content'].id.value}) %}
+              {% set linkTitle = { '#markup': title ~ '<i class="fa fa-angle-down ucb-mega-menu-icon" aria-hidden="true"></i>'} %}
+              {{ link(linkTitle, item.url, linkAttr.addClass(['ucb-mega-menu-outer-link', "nav-link"]))  }}
+              <div class = "ucb-mega-menu container">
+                  {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
+                    <div class="ucb-mega-menu-wrapper block-{{item.title|lower|trim|replace({' ': ''}) ~ item.content.field_mega_menu_select.0['#block_content'].id.value}} collapse">
+                      <h2 class="ucb-mega-menu-header"><a href = "{{item.url}}" class = "ucb-mega-menu-heading-link">{{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_heading.value }}</a></h2>
+                      <div class="ucb-mega-menu-column-wrapper">
+                        {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_above|view}}
+                        {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_menu_links|view}}
+                      </div>
+                      {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_below|view}}
+                    </div>
+                  {% endif %}
+              </div>
             {% else %}
               {{ link(title, item.url, create_attribute({ class: 'nav-link' })) }}
               {% if item.below %}
@@ -61,19 +74,5 @@
         </li>
       {% endfor %}
     </ul>
-      <div class = "ucb-mega-menu container">
-      {% for item in items %}
-        {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
-          <div class="ucb-mega-menu-wrapper block-{{item.title|lower|trim|replace({' ': ''}) ~ item.content.field_mega_menu_select.0['#block_content'].id.value}} collapse">
-            <h2 class="ucb-mega-menu-header"><a href = "{{item.url}}" class = "ucb-mega-menu-heading-link">{{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_heading.value }}</a></h2>
-            <div class="ucb-mega-menu-column-wrapper">
-              {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_above|view}}
-              {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_menu_links|view}}
-            </div>
-            {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_below|view}}
-          </div>
-        {% endif %}
-      {% endfor %}
-      </div>
   {% endif %}
 {% endmacro %}

From 301c660da0ef1afd903d7584a511e952d2cad7e6 Mon Sep 17 00:00:00 2001
From: Jacob Korf <korfj921921@gmail.com>
Date: Fri, 16 Aug 2024 14:46:18 -0600
Subject: [PATCH 18/23] fix menu styles, collapse

---
 css/block/ucb-mega-menu.css                 | 124 +++++++++++---------
 css/menu-styles/default-menu-styles.css     |   5 -
 css/menu-styles/highlight-styles.css        |   5 -
 css/menu-styles/ivory-styles.css            |   5 -
 css/menu-styles/minimal-styles.css          |   5 -
 css/menu-styles/rise-styles.css             |  25 +---
 js/ucb-mega-menu.js                         |  51 +-------
 templates/navigation/menu--extras.html.twig |   8 +-
 8 files changed, 80 insertions(+), 148 deletions(-)

diff --git a/css/block/ucb-mega-menu.css b/css/block/ucb-mega-menu.css
index 4c3b9519..72781bd8 100644
--- a/css/block/ucb-mega-menu.css
+++ b/css/block/ucb-mega-menu.css
@@ -1,95 +1,111 @@
 .ucb-mega-menu-column-links-wrapper {
-    display: block;
-    padding: 0;
-    margin: 0;
+  display: block;
+  padding: 0;
+  margin: 0;
 }
 
 .ucb-mega-menu-column-links-wrapper li {
-    display: block;
-    padding: 0;
-    margin: 0 0 10px 0;
-    list-style-type: none;
+  display: block;
+  padding: 0;
+  margin: 0 0 10px 0;
+  list-style-type: none;
 }
 
 .ucb-mega-menu-column-links-wrapper a {
-    display: block;
+  display: block;
 }
 
 .ucb-mega-menu-link-desc {
-    font-size: 75%;
+  font-size: 75%;
 }
 
 .ucb-mega-menu-icon {
-    padding-left: 2px;
+  padding-left: 2px;
 }
 
 .ucb-mega-menu {
-    position: absolute;
-    box-shadow: 0 2px 5px rgba(0 0 0 /10%);
-    z-index: 9;
-    background: #fff;
-    left: 0;
-    right: 0;
-    margin-right: auto;
-    margin-left: auto;
+  position: absolute;
+  box-shadow: 0 2px 5px rgba(0 0 0 /10%);
+  z-index: 9;
+  background: #fff;
+  color: #000;
+  left: 0;
+  right: 0;
+  margin-right: auto;
+  margin-left: auto;
 }
 
 .ucb-mega-menu-outer-link {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .ucb-mega-menu-column-3 div {
-    min-width: 33%;
-    width: 33%;
-    max-width: 33%;
+  min-width: 33%;
+  width: 33%;
+  max-width: 33%;
 }
 
 .ucb-mega-menu-column-4 div {
-    min-width: 25%;
-    width: 25%;
-    max-width: 25%;
+  min-width: 25%;
+  width: 25%;
+  max-width: 25%;
 }
 
 .ucb-mega-menu-column-5 div {
-    min-width: 20%;
-    width: 20%;
-    max-width: 20%;
+  min-width: 20%;
+  width: 20%;
+  max-width: 20%;
 }
 
 .ucb-mega-menu-column-6 div {
-    min-width: 16%;
-    width: 16%;
-    max-width: 16%;
+  min-width: 16%;
+  width: 16%;
+  max-width: 16%;
 }
 
 .ucb-mega-menu-wrapper {
-    padding: 20px;
+  padding: 20px;
 }
 
 .ucb-mega-menu-column-wrapper {
-    display: flex;
-    flex-direction: row;
+  display: flex;
+  flex-direction: row;
 }
 
-@media only screen and (max-width:576px) {
-    .ucb-mega-menu-column-wrapper {
-        display: flex;
-        flex-direction: column;
-    }
-    .ucb-mega-menu {
-        position: relative;
-    }
-    .ucb-mega-menu-column-wrapper {
-        display: flex;
-        flex-direction: column;
-    }
-    .ucb-mega-menu-column-3 div,
-    .ucb-mega-menu-column-4 div,
-    .ucb-mega-menu-column-5 div,
-    .ucb-mega-menu-column-6 div {
-        min-width: 100%;
-        width: 100%;
-        max-width: 100%;
-    }
+@media only screen and (max-width: 576px) {
+  .ucb-mega-menu-column-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+  .ucb-mega-menu {
+    position: relative;
+  }
+  .ucb-mega-menu-column-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+  .ucb-mega-menu-column-3 div,
+  .ucb-mega-menu-column-4 div,
+  .ucb-mega-menu-column-5 div,
+  .ucb-mega-menu-column-6 div {
+    min-width: 100%;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .ucb-header-dark .ucb-mega-menu,
+  .ucb-header-black .ucb-mega-menu {
+    background-color: #000;
+    color: #fff;
+  }
+
+  .ucb-header-dark .ucb-mega-menu a,
+  .ucb-header-black .ucb-mega-menu a {
+    color: #cfb87b;
+  }
 
+  .ucb-header-dark .ucb-mega-menu a:hover,
+  .ucb-header-black .ucb-mega-menu a:hover {
+    color: #fff;
+  }
 }
diff --git a/css/menu-styles/default-menu-styles.css b/css/menu-styles/default-menu-styles.css
index 5e44d9bc..db8b77f9 100644
--- a/css/menu-styles/default-menu-styles.css
+++ b/css/menu-styles/default-menu-styles.css
@@ -2,8 +2,3 @@
 .ucb-main-nav-container.ucb-secondary-menu-position-above .ucb-secondary-menu-region .menu.social-media .icon-bg {
     padding: 0 5px;
 }
-
-/* Mega Menu Styles */
-.ucb-mega-menu {
-    background-color: #fff;
-}
\ No newline at end of file
diff --git a/css/menu-styles/highlight-styles.css b/css/menu-styles/highlight-styles.css
index fb4256ea..80721fe0 100644
--- a/css/menu-styles/highlight-styles.css
+++ b/css/menu-styles/highlight-styles.css
@@ -123,8 +123,3 @@
     height: 100%;
   }
 }
-
-/* Mega Menu Styles */
-.ucb-mega-menu {
-  background-color: #EEEEEE;
-}
diff --git a/css/menu-styles/ivory-styles.css b/css/menu-styles/ivory-styles.css
index 0506a329..dbff1411 100644
--- a/css/menu-styles/ivory-styles.css
+++ b/css/menu-styles/ivory-styles.css
@@ -245,8 +245,3 @@
     height: 100%;
   }
 }
-
-/* Mega Menu Styles */
-.ucb-mega-menu {
-  background-color: #fff;
-}
\ No newline at end of file
diff --git a/css/menu-styles/minimal-styles.css b/css/menu-styles/minimal-styles.css
index fb78b7b5..cc02a103 100644
--- a/css/menu-styles/minimal-styles.css
+++ b/css/menu-styles/minimal-styles.css
@@ -86,8 +86,3 @@
     height: 100%;
   }
 }
-
-/* Mega Menu Styles */
-.ucb-mega-menu {
-  background-color: #fff;
-}
\ No newline at end of file
diff --git a/css/menu-styles/rise-styles.css b/css/menu-styles/rise-styles.css
index 08db3795..c1ae13aa 100644
--- a/css/menu-styles/rise-styles.css
+++ b/css/menu-styles/rise-styles.css
@@ -1,4 +1,4 @@
-@media only screen and (min-width: 576px) {
+@media only screen and (min-width: 577px) {
   .express-messages .express-message:first-of-type {
     margin-top: 40px;
   }
@@ -373,27 +373,4 @@
   .ucb-main-nav-container.ucb-secondary-menu-position-inline .ucb-secondary-menu-region .menu.social-media {
     height: 100%;
   }
-}
-
-/* Mega Menu Styles */
-.ucb-header-white .ucb-mega-menu,
-.ucb-header-light .ucb-mega-menu{
-  background-color: #333;
-  color: #fff;
-}
-
-.ucb-header-black .ucb-mega-menu,
-.ucb-header-dark .ucb-mega-menu{
-  background-color: #eee;
-  color: #000;
-}
-
-.ucb-header-white .ucb-mega-menu a,
-.ucb-header-light .ucb-mega-menu a {
-  color: #cfb87b;
-}
-
-.ucb-header-white .ucb-mega-menu a:hover,
-.ucb-header-light .ucb-mega-menu a:hover {
-  color: #fff;
 }
\ No newline at end of file
diff --git a/js/ucb-mega-menu.js b/js/ucb-mega-menu.js
index 198a7a41..1f93a870 100644
--- a/js/ucb-mega-menu.js
+++ b/js/ucb-mega-menu.js
@@ -1,51 +1,9 @@
-//Triggers when the mega menu link is clicked to show or hide the mega menu
-function megaMenuClicked(blockName) {
-  const blockID =  document.getElementsByClassName("block-" + blockName);
-  let allMegaMenus =  document.getElementsByClassName("ucb-mega-menu-wrapper");
-  let blockState = 0;
-  for (let i = 0; i < blockID.length; i++) {
-    if(blockID[i].classList.contains("show")) {
-      blockState = 1;
-    }
-  }
-
-  for (let i = 0; i < allMegaMenus.length; i++) {
-    if(allMegaMenus[i].classList.contains("show"))
-    {
-      allMegaMenus[i].classList.remove("show");
-      allMegaMenus[i].classList.add("collapse");
-    }
-  }
-
-  for (let i = 0; i < blockID.length; i++) {
-    if(blockState == 0)
-    {
-      blockID[i].classList.add("show");
-      blockID[i].classList.remove("collapse");
-    }
-    else {
-      blockID[i].classList.add("collapse");
-      blockID[i].classList.remove("show");
-    }
-  }
-};
-
-//Adds the click event listener to all mega menu outer links
-let megaMenuLinks = document.getElementsByClassName("ucb-mega-menu-outer-link");
-for (let i = 0; i < megaMenuLinks.length; i++) {
-  if(megaMenuLinks[i].dataset.click.length > 0) {
-    megaMenuLinks[i].addEventListener("click", function(event){
-      event.preventDefault();
-      megaMenuClicked(megaMenuLinks[i].dataset.click);
-    });
-  }
-}
-
 //Adds the column value to the column wrapper
+let megaMenuLinks = document.getElementsByClassName("ucb-mega-menu-outer-link");
 let megaMenuColumns = document.getElementsByClassName("ucb-mega-menu-column-wrapper");
 for (let i = 0; i < megaMenuLinks.length; i++) {
   let megaMenuColumnCount = megaMenuColumns[i].children.length;
-  if(megaMenuColumnCount < 6) {
+  if(megaMenuColumnCount < 3) {
     megaMenuColumnCount = 3;
   }
   if(megaMenuColumnCount > 6) {
@@ -54,16 +12,15 @@ for (let i = 0; i < megaMenuLinks.length; i++) {
   megaMenuColumns[i].classList.add("ucb-mega-menu-column-" + megaMenuColumnCount);
 }
 
- //Add an even listener to check if the user clicked outside the mega menu, then close the mega menu
+ //Add an event listener to check if the user clicked outside the mega menu, then close the mega menu
  window.addEventListener('click', function(e){
   const allMegaMenus =  document.getElementsByClassName("ucb-mega-menu-wrapper");
   const allMainMenus =  document.getElementsByClassName("block-system-menu-blockmain");
   for (let i = 0; i < allMegaMenus.length; i++) {
     for (let j = 0; j < allMainMenus.length; j++) {
       if (!allMegaMenus[i].contains(e.target) && !allMainMenus[j].contains(e.target) && allMegaMenus[i].classList.contains("show")){
-        console.log(allMegaMenus[i].classList);
         allMegaMenus[i].classList.remove("show");
-        allMegaMenus[i].classList.add("collapse");
+        allMegaMenus[i].ariaExpanded = "false";
       }
     }
   }
diff --git a/templates/navigation/menu--extras.html.twig b/templates/navigation/menu--extras.html.twig
index 32132121..d46411de 100644
--- a/templates/navigation/menu--extras.html.twig
+++ b/templates/navigation/menu--extras.html.twig
@@ -29,7 +29,7 @@
 {{ menus.menu_links(items, attributes, 0) }}
 {% macro menu_links(items, attributes, menu_level) %}
   {% if items %}
-    <ul{{attributes.addClass('ucb-menu nav')}}>
+    <ul id = "ucb-main-menu-mega-menu" {{attributes.addClass('ucb-menu nav ucb-main-menu-mega-menu')}}>
       {% for item in items %}
         {% set classes = [
         'menu-item',
@@ -49,12 +49,14 @@
             '#markup': '<i class="fa-solid fa-eye-slash"></i> ' ~ item.title|e ~ '<span class="visually-hidden">(Unpublished)</span>'
             } : item.title %}
             {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
-              {% set linkAttr = create_attribute({ 'data-click': title|lower|trim|replace({' ': ''}) ~ item.content.field_mega_menu_select.0['#block_content'].id.value}) %}
+              {%  set linkID = title|lower|trim|replace({' ': ''}) ~ item.content.field_mega_menu_select.0['#block_content'].id.value %}
+              {% set linkTargetID = "#" ~ linkID %}
+              {% set linkAttr = create_attribute({  "data-bs-toggle" : "collapse", "data-bs-target": linkTargetID, "aria-expanded": "false", "aria-controls" : linkID }) %}
               {% set linkTitle = { '#markup': title ~ '<i class="fa fa-angle-down ucb-mega-menu-icon" aria-hidden="true"></i>'} %}
               {{ link(linkTitle, item.url, linkAttr.addClass(['ucb-mega-menu-outer-link', "nav-link"]))  }}
               <div class = "ucb-mega-menu container">
                   {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
-                    <div class="ucb-mega-menu-wrapper block-{{item.title|lower|trim|replace({' ': ''}) ~ item.content.field_mega_menu_select.0['#block_content'].id.value}} collapse">
+                    <div id = "{{linkID}}" class="ucb-mega-menu-wrapper collapse" data-bs-parent = "#ucb-main-menu-mega-menu">
                       <h2 class="ucb-mega-menu-header"><a href = "{{item.url}}" class = "ucb-mega-menu-heading-link">{{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_heading.value }}</a></h2>
                       <div class="ucb-mega-menu-column-wrapper">
                         {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_above|view}}

From 6e3c1ad410cb5eb630890e527bab6160144d937e Mon Sep 17 00:00:00 2001
From: Jacob Korf <korfj921921@gmail.com>
Date: Fri, 16 Aug 2024 14:48:31 -0600
Subject: [PATCH 19/23] remove id call

---
 templates/navigation/menu--extras.html.twig | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/navigation/menu--extras.html.twig b/templates/navigation/menu--extras.html.twig
index d46411de..5699ff13 100644
--- a/templates/navigation/menu--extras.html.twig
+++ b/templates/navigation/menu--extras.html.twig
@@ -29,7 +29,7 @@
 {{ menus.menu_links(items, attributes, 0) }}
 {% macro menu_links(items, attributes, menu_level) %}
   {% if items %}
-    <ul id = "ucb-main-menu-mega-menu" {{attributes.addClass('ucb-menu nav ucb-main-menu-mega-menu')}}>
+    <ul {{attributes.addClass('ucb-menu nav ucb-main-menu-mega-menu')}}>
       {% for item in items %}
         {% set classes = [
         'menu-item',
@@ -56,7 +56,7 @@
               {{ link(linkTitle, item.url, linkAttr.addClass(['ucb-mega-menu-outer-link', "nav-link"]))  }}
               <div class = "ucb-mega-menu container">
                   {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
-                    <div id = "{{linkID}}" class="ucb-mega-menu-wrapper collapse" data-bs-parent = "#ucb-main-menu-mega-menu">
+                    <div id = "{{linkID}}" class="ucb-mega-menu-wrapper collapse" data-bs-parent = ".ucb-main-menu-mega-menu">
                       <h2 class="ucb-mega-menu-header"><a href = "{{item.url}}" class = "ucb-mega-menu-heading-link">{{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_heading.value }}</a></h2>
                       <div class="ucb-mega-menu-column-wrapper">
                         {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_above|view}}

From 419f351a3aa1b4b033452c8fccaaa20bf7384fb0 Mon Sep 17 00:00:00 2001
From: Jacob Korf <korfj921921@gmail.com>
Date: Fri, 16 Aug 2024 14:54:04 -0600
Subject: [PATCH 20/23] formatting

---
 templates/navigation/menu--extras.html.twig | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/templates/navigation/menu--extras.html.twig b/templates/navigation/menu--extras.html.twig
index 5699ff13..71fdb8c6 100644
--- a/templates/navigation/menu--extras.html.twig
+++ b/templates/navigation/menu--extras.html.twig
@@ -55,16 +55,16 @@
               {% set linkTitle = { '#markup': title ~ '<i class="fa fa-angle-down ucb-mega-menu-icon" aria-hidden="true"></i>'} %}
               {{ link(linkTitle, item.url, linkAttr.addClass(['ucb-mega-menu-outer-link', "nav-link"]))  }}
               <div class = "ucb-mega-menu container">
-                  {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
-                    <div id = "{{linkID}}" class="ucb-mega-menu-wrapper collapse" data-bs-parent = ".ucb-main-menu-mega-menu">
-                      <h2 class="ucb-mega-menu-header"><a href = "{{item.url}}" class = "ucb-mega-menu-heading-link">{{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_heading.value }}</a></h2>
-                      <div class="ucb-mega-menu-column-wrapper">
-                        {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_above|view}}
-                        {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_menu_links|view}}
-                      </div>
-                      {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_below|view}}
+                {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
+                  <div id = "{{linkID}}" class="ucb-mega-menu-wrapper collapse" data-bs-parent = ".ucb-main-menu-mega-menu">
+                    <h2 class="ucb-mega-menu-header"><a href = "{{item.url}}" class = "ucb-mega-menu-heading-link">{{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_heading.value }}</a></h2>
+                    <div class="ucb-mega-menu-column-wrapper">
+                      {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_above|view}}
+                      {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_menu_links|view}}
                     </div>
-                  {% endif %}
+                    {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_below|view}}
+                  </div>
+                {% endif %}
               </div>
             {% else %}
               {{ link(title, item.url, create_attribute({ class: 'nav-link' })) }}

From 2584f17eef25b72514e29fce3d879eacc35f503a Mon Sep 17 00:00:00 2001
From: Jacob Korf <korfj921921@gmail.com>
Date: Fri, 16 Aug 2024 15:04:32 -0600
Subject: [PATCH 21/23] fixes for lag

---
 css/menu-styles/rise-styles.css             |  4 ++++
 js/ucb-mega-menu.js                         |  2 +-
 templates/navigation/menu--extras.html.twig | 10 +++++-----
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/css/menu-styles/rise-styles.css b/css/menu-styles/rise-styles.css
index c1ae13aa..fe78da13 100644
--- a/css/menu-styles/rise-styles.css
+++ b/css/menu-styles/rise-styles.css
@@ -1,4 +1,8 @@
 @media only screen and (min-width: 577px) {
+  .ucb-primary-menu-region-container {
+    padding-left: 0;
+    padding-right: 0;
+  }
   .express-messages .express-message:first-of-type {
     margin-top: 40px;
   }
diff --git a/js/ucb-mega-menu.js b/js/ucb-mega-menu.js
index 1f93a870..8f4b15ea 100644
--- a/js/ucb-mega-menu.js
+++ b/js/ucb-mega-menu.js
@@ -14,7 +14,7 @@ for (let i = 0; i < megaMenuLinks.length; i++) {
 
  //Add an event listener to check if the user clicked outside the mega menu, then close the mega menu
  window.addEventListener('click', function(e){
-  const allMegaMenus =  document.getElementsByClassName("ucb-mega-menu-wrapper");
+  const allMegaMenus =  document.getElementsByClassName("ucb-mega-menu");
   const allMainMenus =  document.getElementsByClassName("block-system-menu-blockmain");
   for (let i = 0; i < allMegaMenus.length; i++) {
     for (let j = 0; j < allMainMenus.length; j++) {
diff --git a/templates/navigation/menu--extras.html.twig b/templates/navigation/menu--extras.html.twig
index 71fdb8c6..01d8e4a2 100644
--- a/templates/navigation/menu--extras.html.twig
+++ b/templates/navigation/menu--extras.html.twig
@@ -54,9 +54,9 @@
               {% set linkAttr = create_attribute({  "data-bs-toggle" : "collapse", "data-bs-target": linkTargetID, "aria-expanded": "false", "aria-controls" : linkID }) %}
               {% set linkTitle = { '#markup': title ~ '<i class="fa fa-angle-down ucb-mega-menu-icon" aria-hidden="true"></i>'} %}
               {{ link(linkTitle, item.url, linkAttr.addClass(['ucb-mega-menu-outer-link', "nav-link"]))  }}
-              <div class = "ucb-mega-menu container">
-                {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
-                  <div id = "{{linkID}}" class="ucb-mega-menu-wrapper collapse" data-bs-parent = ".ucb-main-menu-mega-menu">
+              {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
+                <div id = "{{linkID}}" class = "ucb-mega-menu container collapse" data-bs-parent = ".ucb-main-menu-mega-menu">
+                  <div class="ucb-mega-menu-wrapper">
                     <h2 class="ucb-mega-menu-header"><a href = "{{item.url}}" class = "ucb-mega-menu-heading-link">{{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_heading.value }}</a></h2>
                     <div class="ucb-mega-menu-column-wrapper">
                       {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_above|view}}
@@ -64,8 +64,8 @@
                     </div>
                     {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_below|view}}
                   </div>
-                {% endif %}
-              </div>
+                </div>
+              {% endif %}
             {% else %}
               {{ link(title, item.url, create_attribute({ class: 'nav-link' })) }}
               {% if item.below %}

From 8e960bf07c132e4c6d15934bf888d37ac40222f7 Mon Sep 17 00:00:00 2001
From: Jacob Korf <korfj921921@gmail.com>
Date: Fri, 16 Aug 2024 15:24:57 -0600
Subject: [PATCH 22/23] fix title issue

---
 templates/navigation/menu--extras.html.twig | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/navigation/menu--extras.html.twig b/templates/navigation/menu--extras.html.twig
index 01d8e4a2..d4b995e7 100644
--- a/templates/navigation/menu--extras.html.twig
+++ b/templates/navigation/menu--extras.html.twig
@@ -52,7 +52,7 @@
               {%  set linkID = title|lower|trim|replace({' ': ''}) ~ item.content.field_mega_menu_select.0['#block_content'].id.value %}
               {% set linkTargetID = "#" ~ linkID %}
               {% set linkAttr = create_attribute({  "data-bs-toggle" : "collapse", "data-bs-target": linkTargetID, "aria-expanded": "false", "aria-controls" : linkID }) %}
-              {% set linkTitle = { '#markup': title ~ '<i class="fa fa-angle-down ucb-mega-menu-icon" aria-hidden="true"></i>'} %}
+              {% set linkTitle = { '#markup': title|e ~ '<i class="fa fa-angle-down ucb-mega-menu-icon" aria-hidden="true"></i>'} %}
               {{ link(linkTitle, item.url, linkAttr.addClass(['ucb-mega-menu-outer-link', "nav-link"]))  }}
               {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
                 <div id = "{{linkID}}" class = "ucb-mega-menu container collapse" data-bs-parent = ".ucb-main-menu-mega-menu">

From 7ff0b11a1b1d7dbf65703a7f860668fa5171fc0d Mon Sep 17 00:00:00 2001
From: Jacob Korf <korfj921921@gmail.com>
Date: Fri, 16 Aug 2024 16:31:43 -0600
Subject: [PATCH 23/23] Better bootstrap implementation

---
 js/ucb-mega-menu.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/js/ucb-mega-menu.js b/js/ucb-mega-menu.js
index 8f4b15ea..d2c2c4e7 100644
--- a/js/ucb-mega-menu.js
+++ b/js/ucb-mega-menu.js
@@ -12,6 +12,9 @@ for (let i = 0; i < megaMenuLinks.length; i++) {
   megaMenuColumns[i].classList.add("ucb-mega-menu-column-" + megaMenuColumnCount);
 }
 
+const megaMenuElementList = document.querySelectorAll('.ucb-mega-menu');
+const megaMenuList = [...megaMenuElementList].map(collapseEl => new bootstrap.Collapse(collapseEl,{ toggle: false}));
+
  //Add an event listener to check if the user clicked outside the mega menu, then close the mega menu
  window.addEventListener('click', function(e){
   const allMegaMenus =  document.getElementsByClassName("ucb-mega-menu");
@@ -19,8 +22,7 @@ for (let i = 0; i < megaMenuLinks.length; i++) {
   for (let i = 0; i < allMegaMenus.length; i++) {
     for (let j = 0; j < allMainMenus.length; j++) {
       if (!allMegaMenus[i].contains(e.target) && !allMainMenus[j].contains(e.target) && allMegaMenus[i].classList.contains("show")){
-        allMegaMenus[i].classList.remove("show");
-        allMegaMenus[i].ariaExpanded = "false";
+        megaMenuList[i].hide();
       }
     }
   }