various styling fixes - mostly for desktop nav

network-api/networkapi/templates/fragments/blocks/nav/button.html

@@ -5,7 +5,7 @@
 {% elif style == "primary-full-width" %}
     {% fragment as nav_button_style %}tw-btn-primary tw-min-w-full tw-py-4 tw-px-8{% endfragment %}
 {% elif style == "cta" %}
-    {% fragment as nav_button_style %}tw-leading-[130%] tw-text-blue-80 tw-p-2 hover:tw-underline{% endfragment %}
+    {% fragment as nav_button_style %}tw-leading-[130%] tw-text-blue-80 tw-p-4 hover:tw-underline{% endfragment %}
 {% endif %}
 
 {% fragment as base_styles %}link-button tw-font-bold tw-text-lg{% endfragment %}

network-api/networkapi/templates/fragments/blocks/nav/column.html

@@ -1,9 +1,9 @@
 {% load wagtailcore_tags wagtailadmin_tags %}
 
-{% fragment as base_styles %}tw-flex tw-flex-col tw-items-start tw-gap-8 tw-py-8{% endfragment %}
-{% fragment as desktop_layout %}large:tw-py-22 large:tw-px-12{% endfragment %}
+{% fragment as base_styles %}tw-gap-y-8{% endfragment %}
+{% fragment as desktop_layout %}{% endfragment %}
 
-<div class="{{ base_styles }} {{ desktop_layout }} {% block column_size %}large:tw-col-span-1{% endblock column_size %}">
+<div class="tw-nav-dropdown-column {{ base_styles }} {{ desktop_layout }} {% block column_size %}xlarge:tw-col-span-1{% endblock column_size %}">
     <h6 class="tw-self-stretch tw-px-4">{% block title %}{{ value.title }}{% endblock title %}</h6>
     <div class="tw-flex tw-flex-col tw-items-start tw-gap-8 tw-self-stretch">
         {% block content %}

network-api/networkapi/templates/fragments/blocks/nav/dropdown.html

@@ -1,9 +1,9 @@
 {% load static wagtailcore_tags wagtailadmin_tags nav_tags %}
 
-{% fragment as content_base_styles %}tw-py-0 tw-px-0 tw-gap-8 tw-overflow-y-auto tw-transition-all tw-duration-500{% endfragment %}
-{% fragment as dropdown_selector_base %}tw-flex tw-flex-row tw-items-center tw-justify-between tw-w-full tw-py-12 tw-px-8 tw-gap-4{% endfragment %}
+{% fragment as content_base_styles %}tw-container tw-overflow-y-auto tw-transition-all tw-duration-500 xlarge:tw-max-w-[1200px]{% endfragment %}
+{% fragment as dropdown_selector_base %}tw-container tw-flex tw-flex-row tw-items-center tw-justify-between tw-w-full tw-py-12 tw-px-8 tw-gap-4{% endfragment %}
 
-{% fragment as content_desktop %}xlarge:tw-max-w-[1350px] 2xl:tw-max-w-[1600px] xlarge:tw-w-full xlarge:tw-px-24 xlarge:tw-hidden{% endfragment %}
+{% fragment as content_desktop %}xlarge:tw-px-0 xlarge:tw-hidden{% endfragment %}
 {% fragment as content_desktop_border %}xlarge:tw-border xlarge:tw-border-gray-20{% endfragment %}
 {% comment %} 40 (5rem) is the height of the navbar {% endcomment %}
 {% fragment as content_desktop_positioning %}xlarge:tw-fixed xlarge:tw-top-40 xlarge:tw-left-0 xlarge:tw-right-0 xlarge:tw-mx-auto{% endfragment %}
@@ -27,28 +27,32 @@ <h5 class="tw-m-0 {{ title_base_typography }} {{ title_desktop_typography }} {{
         <img src="{% static "_images/chevron.svg" %}" height="18" width="18" alt="" class="tw-w-8 tw-h-auto tw-rotate-180 tw-transition-transform xlarge:tw-hidden">
     </div>
 
-    <div class="{{ content_base_styles }} {{ content_desktop_positioning }} {{ content_desktop }}" data-accordion-content>
-        <div class="tw-px-8 tw-flex tw-flex-col tw-p-0 tw-bg-white tw-gap-8 tw-pt-4 tw-pb-12 xlarge:tw-pb-0 xlarge:tw-pt-0 xlarge:tw-px-0 {{ content_desktop_border }} xlarge:tw-grid xlarge:tw-gap-x-8 xlarge:tw-gap-y-0 {% block grid_columns %}xlarge:tw-w-{{ value.ncols }}/4 xlarge:tw-grid-cols-{{ value.ncols }}{% endblock grid_columns %}">
-            {% block content %}
-                {% if value.has_overview %}
-                    {% include_block value.overview_value with button=value.button %}
-                {% endif %}
-                {% for column in value.columns %}
-                    {% include_block column %}
-                {% endfor %}
-                {% if value.has_featured_column %}
-                    {% include_block value.featured_column_value %}
-                {% endif %}
+    <div class="{{ content_base_styles }} {{ content_desktop_positioning }} {{ content_desktop }} {{ alignment_class }}" data-accordion-content>
+        <div class="{% block content_width %} xlarge:tw-w-{{ value.ncols }}/4 {% endblock content_width %} {{ content_desktop_border }}">
+            <div class="tw-nav-accordion-content-inner {% block grid_columns %} xlarge:tw-grid-cols-{{ value.ncols }} {% if value.has_featured_column %}tw-has-featured-column{% endif %}{% endblock grid_columns %}">
+                {% block content %}
+                    {% if value.has_overview %}
+                        {% include_block value.overview_value with button=value.button %}
+                    {% endif %}
+                    {% for column in value.columns %}
+                        {% include_block column %}
+                    {% endfor %}
+                    {% if value.has_featured_column %}
+                        {% include_block value.featured_column_value %}
+                    {% endif %}
+                {% endblock content %}
+            </div>
+            {% block full_span_button %}
                 {% comment %}
                 If there is a button but no overview, we want to render the button at the bottom
                 of the dropdown. Otherwise it will be rendered together with the overview.
                 {% endcomment %}
                 {% if value.button and not value.has_overview %}
-                    <div class="tw-w-full tw-pb-4 xlarge:tw-col-span-4 xlarge:tw-py-0">
+                    <div class="tw-w-full">
                         {% include_block value.button with style="primary-full-width" %}
                     </div>
                 {% endif %}
-            {% endblock content %}
+            {% endblock full_span_button %}
         </div>
     </div>
 </div>

network-api/networkapi/templates/fragments/blocks/nav/featured-column.html

@@ -1,9 +1,9 @@
 {% load wagtailcore_tags wagtailadmin_tags %}
 
-{% fragment as base_styles %}tw-flex tw-flex-col tw-items-start tw-gap-12 tw-py-8 tw-px-12 tw-bg-gray-02 tw-rounded-2xl{% endfragment %}
-{% fragment as desktop_layout %}large:tw-py-22 large:tw-px-12 large:tw-rounded-none large:tw-col-span-1{% endfragment %}
+{% fragment as base_styles %}tw-gap-12 tw-bg-gray-02 tw-rounded-2xl{% endfragment %}
+{% fragment as desktop_layout %}xlarge:tw-rounded-none xlarge:tw-col-span-1{% endfragment %}
 
-<div class="{{ base_styles }} {{ desktop_layout }}">
+<div class="tw-nav-dropdown-column tw-featured-column {{ base_styles }} {{ desktop_layout }}">
     <h6 class="tw-self-stretch tw-px-4">{% block title %}{{ value.title }}{% endblock title %}</h6>
     <div class="tw-flex tw-flex-col tw-items-start tw-gap-8 tw-self-stretch">
         {% block content %}

network-api/networkapi/templates/fragments/blocks/nav/item.html

@@ -25,7 +25,7 @@
         {{ value.label }}
     </a>
     {% if value.description %}
-        <p class="tw-font-light tw-text-sm tw-text-gray-80 tw-hidden medium:tw-block">
+        <p class="tw-font-light tw-text-sm tw-text-gray-80 tw-hidden tw-mb-0 medium:tw-block">
             {{ value.description }}
         </p>
     {% endif %}

network-api/networkapi/templates/fragments/blocks/nav/overview.html

@@ -1,10 +1,10 @@
 {% load wagtailcore_tags wagtailadmin_tags %}
 
-{% fragment as base_styles %}tw-flex tw-flex-col tw-items-start tw-gap-14 tw-pb-16{% endfragment %}
-{% fragment as border_styles %}tw-border-gray-05 tw-border-b-[1px] large:tw-border-b-0 large:tw-border-r-[1px]{% endfragment %}
-{% fragment as desktop_layout %}large:tw-col-span-1 large:tw-my-22 large:tw-pb-0 large:tw-ms-8 large:tw-ps-12 large:tw-pe-8 large:tw-border-r{% endfragment %}
+{% fragment as base_styles %}tw-gap-14{% endfragment %}
+{% fragment as border_styles %}tw-border-gray-05 tw-border-b-[1px] xlarge:tw-border-b-0 xlarge:tw-border-r-[1px]{% endfragment %}
+{% fragment as desktop_layout %}xlarge:tw-border-r{% endfragment %}
 
-<div class="{{ base_styles }} {{ border_styles }} {{ desktop_layout }}">
+<div class="tw-nav-dropdown-column {{ base_styles }} {{ border_styles }} {{ desktop_layout }}">
     <div class="tw-flex tw-flex-col tw-items-start tw-gap-10">
         <p class="tw-font-zilla tw-italic tw-font-medium tw-text-2xl tw-text-black tw-my-0 tw-py-0">{{ value.title }}</p>
         <div class="last:[&_p]:tw-mb-0 [&_p]:tw-text-gray-80 [&_p]:tw-text-base [&_p]:tw-font-normal [&_p]:tw-font-sans">{{ value.description|richtext }}</div>

network-api/networkapi/templates/fragments/nav/blog/blog-dropdown.html

@@ -4,7 +4,8 @@
 
 {% block title %}{% trans "Blog" %}{% endblock title %}
 
-{% block grid_columns %}xlarge:tw-w-3/4 xlarge:tw-grid-cols-3{% endblock grid_columns %}
+{% block content_width %} xlarge:tw-w-{{ncols}}/4 {% endblock content_width %}
+{% block grid_columns %}xlarge:tw-grid-cols-{{ncols}} tw-has-featured-column{% endblock grid_columns %}
 
 {% block content %}
     {% include "./featured-posts.html" with posts=menu.localized_featured_blog_posts %}
@@ -13,3 +14,5 @@
         {% include "./button.html" with url=menu.blog_button_url label=menu.blog_button_label %}
     </div>
 {% endblock content %}
+
+{% block full_span_button %}{% endblock full_span_button %}

network-api/networkapi/templates/fragments/nav/blog/featured-posts.html

@@ -4,7 +4,7 @@
 
 {% block title %}{% trans "Featured Posts" %}{% endblock title %}
 
-{% block column_size %}large:tw-col-span-2{% endblock column_size %}
+{% block column_size %}xlarge:tw-col-span-2{% endblock column_size %}
 
 {% block content %}
     {% for post in posts %}

network-api/networkapi/templates/fragments/nav/menu.html

@@ -29,7 +29,7 @@
             {% include_block dropdown with style="desktop" %}
         {% endfor %}
         {% if menu.enable_blog_dropdown %}
-            {% include "fragments/nav/blog/blog-dropdown.html" with style="desktop" %}
+            {% include "fragments/nav/blog/blog-dropdown.html" with style="desktop" ncols="3"  alignment_class="tw-justify-end" %}
         {% endif %}
     </div>
 {% endblock wide_screen_menu %}

source/js/components/nav/desktop-dropdown.js

@@ -63,7 +63,7 @@ class NavDesktopDropdown extends Accordion {
     this.titleText.classList.add("xlarge:tw-border-black");
     this.titleText.classList.remove("xlarge:tw-border-transparent");
     this.accordion.setAttribute("aria-selected", "true");
-    this.content.classList.add("xlarge:tw-grid");
+    this.content.classList.add("xlarge:tw-flex");
     this.content.classList.remove("xlarge:tw-hidden");
     if (this.isDropdownWayfindingActive === "true") {
       this.handleWayfindingOpenStyles();
@@ -93,7 +93,7 @@ class NavDesktopDropdown extends Accordion {
     this.titleText.classList.remove("xlarge:tw-border-black");
     this.titleText.classList.add("xlarge:tw-border-transparent");
     this.accordion.setAttribute("aria-selected", "false");
-    this.content.classList.remove("xlarge:tw-grid");
+    this.content.classList.remove("xlarge:tw-flex");
     this.content.classList.add("xlarge:tw-hidden");
     if (this.isDropdownWayfindingActive === "true") {
       this.handleWayfindingClosedStyles();

tailwind-plugins/site-nav.js

@@ -0,0 +1,50 @@
+const plugin = require("tailwindcss/plugin");
+
+function shared(theme) {
+  const media = (breakpoint) => `@media (min-width: ${breakpoint})`;
+
+  return {
+    ".nav-accordion-content-inner": {
+      display: "flex",
+      flexDirection: "column",
+      background: "white",
+      gap: theme("gap.8"),
+      [media(theme("screens.xlarge"))]: {
+        display: "grid",
+        gap: `${theme("gap.0")} ${theme("gap.8")}`,
+        borderLeftWidth: "40px",
+        borderRightWidth: "40px",
+        borderLeftColor: theme("colors.white"),
+        borderRightColor: theme("colors.white"),
+        "&.has-featured-column": {
+          borderRightColor: theme("colors.gray.02"),
+        },
+      },
+    },
+    ".nav-dropdown-column": {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "start",
+      flex: "1",
+      [media(theme("screens.xlarge"))]: {
+        marginTop: theme("margin.22"),
+        marginBottom: theme("margin.22"),
+      },
+      "&.featured-column": {
+        padding: `${theme("padding.8")} ${theme("padding.12")}`,
+        [media(theme("screens.xlarge"))]: {
+          marginTop: 0,
+          marginBottom: 0,
+          paddingTop: theme("padding.22"),
+          paddingBottom: theme("padding.22"),
+        },
+      },
+    },
+  };
+}
+
+module.exports = [
+  plugin(function ({ addComponents, theme }) {
+    addComponents([shared(theme)]);
+  }),
+];

tailwind.config.js

@@ -6,6 +6,7 @@ const buttonPlugins = require("./tailwind-plugins/button");
 const typePlugins = require("./tailwind-plugins/type");
 const glyphPlugins = require("./tailwind-plugins/glyph");
 const formControlPlugins = require("./tailwind-plugins/form-control");
+const siteNavPlugins = require("./tailwind-plugins/site-nav");
 
 module.exports = {
   content: ["./source/js/**/*.{js,jsx}", "./network-api/networkapi/**/*.html"],
@@ -21,7 +22,7 @@ module.exports = {
     {
       // Handle dynamic grid column sizing on templates (see fragments/blocks/nav/dropdown.html)
       pattern: /w-(1|2|3|4)\/4/,
-      variants: ['large', 'hover', 'focus', 'large:hover', 'large:focus'],
+      variants: ['xlarge', 'large', 'hover', 'focus', 'large:hover', 'large:focus'],
     },
   ],
   plugins: [
@@ -68,6 +69,7 @@ module.exports = {
     ...typePlugins,
     ...glyphPlugins,
     ...formControlPlugins,
+    ...siteNavPlugins,
     require("@tailwindcss/forms")({ strategy: "class" }),
   ],
   theme: {