@ably/ui 8.1.1 → 8.2.1-dev.ade9a3d

package/src/core/MeganavContentUseCases/component.html.erb

@@ -1,84 +1,113 @@
-<section class="ui-meganav-content ui-grid-gap md:grid-cols-2 gap-y-0 md:gap-y-32">
-  <div>
-    <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-industry-use-cases">By use case</h3>
-    <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
-      <li>
-        <%= link_to abs_url("/solutions/edtech"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">EdTech</p>
-          <p class="ui-meganav-media-copy">Deliver interactive learning experiences like multi-user classrooms with chat.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/solutions/virtual-events"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Virtual Events</p>
-          <p class="ui-meganav-media-copy">Power engaging virtual events with interactive realtime features.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/solutions/sports-and-media"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Sports & Media</p>
-          <p class="ui-meganav-media-copy">Deliver global realtime experiences to keep fans informed, engaged, entertained.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/solutions/fintech"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Fintech</p>
-          <p class="ui-meganav-media-copy">Deliver fast, personalised fintech data in realtime to mobile & web customers.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/solutions/gaming"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Gaming</p>
-          <p class="ui-meganav-media-copy">Power interactive gaming experiences that are wicked fast and utterly reliable.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/solutions/automotive-logistics-and-mobility"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Automotive, Logistics, & Mobility</p>
-          <p class="ui-meganav-media-copy">Power asset tracking, live transit updates, race-critical diagnostics, and more.</p>
-        <% end %>
-      </li>
-    </ul>
-  </div>
+<div class="flex">
+  <div class="ui-meganav-content-spacer bg-extra-light-grey"></div>
+  <section class="grid grid-cols-12 ui-grid-gap-x">
+    <div class="col-span-full md:col-span-4 bg-extra-light-grey py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
+      <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-use-cases">
+          Use cases
+        </h3>
+      <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
+        <li>
+          <%= link_to abs_url("/solutions/chat"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-chat-stack-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Chat</p>
+              <p class="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale. </p>
+            </div>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/virtual-events"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-virtual-events-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Virtual Events</p>
+              <p class="ui-meganav-media-copy">Power engaging virtual events with realtime features.</p>
+            </div>
+          <% end %>
+        </li>
+      </ul>
+    </div>
 
-  <div>
-    <ul class="md:mt-40" aria-labelledby="meganav-use-cases-panel-industry-use-cases">
-      <li>
-        <%= link_to abs_url("/solutions/b2b-platforms"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">B2B Platforms</p>
-          <p class="ui-meganav-media-copy">Empower customers with realtime technology that gives them a competitive edge.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/solutions/healthcare"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Healthcare</p>
-          <p class="ui-meganav-media-copy">Provide HIPAA-compliant realtime apps healthcare professionals can depend on.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/solutions/ecommerce-and-retail"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">eCommerce & Retail</p>
-          <p class="ui-meganav-media-copy">Enable realtime pricing, inventory, and transactions to enrich user experiences.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/solutions/iot-and-connected-devices"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">IoT & Connected Devices</p>
-          <p class="ui-meganav-media-copy">Monitor and control global IoT deployments of any kind in realtime.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/solutions/asset-tracking"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Asset Tracking</p>
-          <p class="ui-meganav-media-copy">Track assets in realtime with a solution optimized for last mile logistics, food delivery applications, and urban mobility services.</p>
-        <% end %>
-      </li>
-      <li>
-        <%= link_to abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Extend Kafka to the edge</p>
-          <p class="ui-meganav-media-copy">Enhance and reliably expand Kafka&apos;s event streaming capabilities beyond your private network.</p>
-        <% end %>
-      </li>
-    </ul>
-  </div>
-</section>
+    <div class="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
+      <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-industry">
+        Industry
+      </h3>
+      <ul aria-labelledby="meganav-use-cases-panel-industry">
+        <li>
+          <%= link_to abs_url("/solutions/edtech"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">EdTech</p>
+            <p class="ui-meganav-media-copy">Deliver interactive learning experiences.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/fintech"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Fintech</p>
+            <p class="ui-meganav-media-copy">Deliver personalised financial data in realtime.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/automotive-logistics-and-mobility"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Automotive, Logistics, & Mobility</p>
+            <p class="ui-meganav-media-copy">Power diagnostics, order tracking and more.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/b2b-platforms"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">B2B Platforms</p>
+            <p class="ui-meganav-media-copy">Empower your customers with realtime solutions.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/healthcare"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Healthcare (HIPAA)</p>
+            <p class="ui-meganav-media-copy">Provide trustworthy, HIPAA-compliant realtime apps.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/ecommerce-and-retail"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">eCommerce & Retail</p>
+            <p class="ui-meganav-media-copy">Enrich customer experiences with realtime updates.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/sports-and-media"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Sports, Media & Audience Engagement</p>
+            <p class="ui-meganav-media-copy">Deliver engaging global realtime experiences.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/gaming"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Gaming</p>
+            <p class="ui-meganav-media-copy">Power ultra fast and reliable gaming experiences.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/iot-and-connected-devices"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">IoT & Connected Devices</p>
+            <p class="ui-meganav-media-copy">Monitor and control global IoT deployments in realtime.</p>
+          <% end %>
+        </li>
+      </ul>
+    </div>
+
+    <div class="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
+      <h3 class="ui-meganav-overline" id="meganav-use-cases-panel-solutions">
+        Solutions
+      </h3>
+      <ul aria-labelledby="meganav-use-cases-panel-solutions">
+        <li>
+          <%= link_to abs_url("/solutions/extend-kafka-to-the-edge"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Extend Kafka to the edge</p>
+            <p class="ui-meganav-media-copy">Reliably expand Kafka’s event streaming beyond your private network.</p>
+          <% end %>
+        </li>
+        <li>
+          <%= link_to abs_url("/solutions/asset-tracking"), class: "ui-meganav-media group" do %>
+            <p class="ui-meganav-media-heading">Asset Tracking</p>
+            <p class="ui-meganav-media-copy">Track assets in realtime with a solution optimised for last mile logistics.</p>
+          <% end %>
+        </li>
+      </ul>
+    </div>
+  </section>
+  <div class="ui-meganav-content-spacer"></div>
+</div>

package/src/core/MeganavContentUseCases/component.jsx

@@ -1,95 +1,122 @@
 import React from "react";
 import T from "prop-types";
 
+import Icon from "../Icon/component.jsx";
+
 const MeganavContentUseCases = ({ absUrl }) => (
-  <section className="ui-meganav-content ui-grid-gap md:grid-cols-2 gap-y-0 md:gap-y-32">
-    <div>
-      <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-industry-use-cases">
-        By use case
-      </h3>
-      <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
-        <li>
-          <a href={absUrl("/solutions/edtech")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">EdTech</p>
-            <p className="ui-meganav-media-copy">Deliver interactive learning experiences like multi-user classrooms with chat.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/solutions/virtual-events")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Virtual Events</p>
-            <p className="ui-meganav-media-copy">Power engaging virtual events with interactive realtime features.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/solutions/sports-and-media")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Sports & Media</p>
-            <p className="ui-meganav-media-copy">Deliver global realtime experiences to keep fans informed, engaged, entertained.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/solutions/fintech")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Fintech</p>
-            <p className="ui-meganav-media-copy">Deliver fast, personalised fintech data in realtime to mobile & web customers.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/solutions/gaming")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Gaming</p>
-            <p className="ui-meganav-media-copy">Power interactive gaming experiences that are wicked fast and utterly reliable.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/solutions/automotive-logistics-and-mobility")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Automotive, Logistics, & Mobility</p>
-            <p className="ui-meganav-media-copy">Power asset tracking, live transit updates, race-critical diagnostics, and more.</p>
-          </a>
-        </li>
-      </ul>
-    </div>
+  <div className="flex">
+    <div className="ui-meganav-content-spacer bg-extra-light-grey"></div>
+    <section className="grid grid-cols-12 ui-grid-gap-x">
+      <div className="col-span-full md:col-span-4 bg-extra-light-grey py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
+        <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-use-cases">
+          Use cases
+        </h3>
+        <ul aria-labelledby="meganav-use-cases-panel-industry-use-cases">
+          <li>
+            <a href={absUrl("/solutions/chat")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-chat-stack-col" size="2.5rem" />
+              <div className="flex flex-col justify-center">
+                <p className="ui-meganav-media-heading">Chat</p>
+                <p className="ui-meganav-media-copy">Deliver highly reliable chat experiences at scale. </p>
+              </div>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/solutions/virtual-events")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-virtual-events-col" size="2.5rem" />
+              <div className="flex flex-col justify-center">
+                <p className="ui-meganav-media-heading">Virtual Events</p>
+                <p className="ui-meganav-media-copy">Power engaging virtual events with realtime features.</p>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      <div className="col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
+        <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-industry">
+          Industry
+        </h3>
+        <ul aria-labelledby="meganav-use-cases-panel-industry">
+          <li>
+            <a href={absUrl("/solutions/edtech")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">EdTech</p>
+              <p className="ui-meganav-media-copy">Deliver interactive learning experiences.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/solutions/fintech")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Fintech</p>
+              <p className="ui-meganav-media-copy">Deliver personalised financial data in realtime.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/solutions/automotive-logistics-and-mobility")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Automotive, Logistics, & Mobility</p>
+              <p className="ui-meganav-media-copy">Power diagnostics, order tracking and more.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/solutions/b2b-platforms")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">B2B Platforms</p>
+              <p className="ui-meganav-media-copy">Empower your customers with realtime solutions.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/solutions/healthcare")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Healthcare (HIPAA)</p>
+              <p className="ui-meganav-media-copy">Provide trustworthy, HIPAA-compliant realtime apps.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/solutions/ecommerce-and-retail")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">eCommerce & Retail</p>
+              <p className="ui-meganav-media-copy">Enrich customer experiences with realtime updates.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/solutions/sports-and-media")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Sports, Media & Audience Engagement</p>
+              <p className="ui-meganav-media-copy">Deliver engaging global realtime experiences.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/solutions/gaming")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Gaming</p>
+              <p className="ui-meganav-media-copy">Power ultra fast and reliable gaming experiences.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/solutions/iot-and-connected-devices")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">IoT & Connected Devices</p>
+              <p className="ui-meganav-media-copy">Monitor and control global IoT deployments in realtime.</p>
+            </a>
+          </li>
+        </ul>
+      </div>
 
-    <div>
-      <ul className="md:mt-40">
-        <li>
-          <a href={absUrl("/solutions/b2b-platforms")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">B2B Platforms</p>
-            <p className="ui-meganav-media-copy">Empower customers with realtime technology that gives them a competitive edge.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/solutions/healthcare")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Healthcare</p>
-            <p className="ui-meganav-media-copy">Provide HIPAA-compliant realtime apps healthcare professionals can depend on.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/solutions/ecommerce-and-retail")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">eCommerce & Retail</p>
-            <p className="ui-meganav-media-copy">Enable realtime pricing, inventory, and transactions to enrich user experiences.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/solutions/iot-and-connected-devices")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">IoT & Connected Devices</p>
-            <p className="ui-meganav-media-copy">Monitor and control global IoT deployments of any kind in realtime.</p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/solutions/asset-tracking")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Asset Tracking</p>
-            <p className="ui-meganav-media-copy">
-              Track assets in realtime with a solution optimized for last mile logistics, food delivery applications, and urban mobility services.
-            </p>
-          </a>
-        </li>
-        <li>
-          <a href={absUrl("/solutions/extend-kafka-to-the-edge")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Extend Kafka to the edge</p>
-            <p className="ui-meganav-media-copy">Enhance and reliably expand Kafka&apos;s event streaming capabilities beyond your private network.</p>
-          </a>
-        </li>
-      </ul>
-    </div>
-  </section>
+      <div className="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
+        <h3 className="ui-meganav-overline" id="meganav-use-cases-panel-solutions">
+          Solutions
+        </h3>
+        <ul aria-labelledby="meganav-use-cases-panel-solutions">
+          <li>
+            <a href={absUrl("/solutions/extend-kafka-to-the-edge")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Extend Kafka to the edge</p>
+              <p className="ui-meganav-media-copy">Reliably expand Kafka’s event streaming beyond your private network.</p>
+            </a>
+          </li>
+          <li>
+            <a href={absUrl("/solutions/asset-tracking")} className="ui-meganav-media group">
+              <p className="ui-meganav-media-heading">Asset Tracking</p>
+              <p className="ui-meganav-media-copy">Track assets in realtime with a solution optimised for last mile logistics.</p>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </section>
+    <div className="ui-meganav-content-spacer"></div>
+  </div>
 );
 
 MeganavContentUseCases.propTypes = {

package/src/core/MeganavControlMobilePanelClose/component.html.erb

@@ -2,9 +2,11 @@
   <%= button_tag(type: "button",
                  class: "ui-meganav-mobile-link text-gui-default mb-16",
                  data: { id: "meganav-control-mobile-panel-close" },
-                 aria: { expanded: false, controls: @aria_controls, label: "Hide panel" }) do -%>
+                 aria: { expanded: false, controls: aria_controls, label: "Hide panel" }) do -%>
     <%= render(AblyUi::Core::Icon.new(name: "icon-gui-disclosure-arrow", size: "1.5rem", color: "text-cool-black", additional_css: "relative -top-1 transform rotate-180")) %>
     Back
   <% end %>
-  <hr class="ui-meganav-hr" />
+  <% if display_hr %>
+    <hr class="ui-meganav-hr" />
+  <% end %>
 </div>

package/src/core/MeganavControlMobilePanelClose/component.jsx

@@ -3,7 +3,7 @@ import T from "prop-types";
 
 import Icon from "../Icon/component.jsx";
 
-const MeganavControlMobilePanelClose = ({ ariaControls }) => (
+const MeganavControlMobilePanelClose = ({ ariaControls, displayHr = true }) => (
   <div className="mx-24 md:mx-32">
     <button
       type="button"
@@ -16,12 +16,13 @@ const MeganavControlMobilePanelClose = ({ ariaControls }) => (
       <Icon name="icon-gui-disclosure-arrow" color="text-cool-black" size="1.5rem" additionalCSS="relative -top-1 transform rotate-180" />
       Back
     </button>
-    <hr className="ui-meganav-hr" />
+    {displayHr ? <hr className="ui-meganav-hr" /> : null}
   </div>
 );
 
 MeganavControlMobilePanelClose.propTypes = {
   ariaControls: T.string,
+  displayHr: T.bool,
 };
 
 export default MeganavControlMobilePanelClose;

package/src/core/MeganavControlMobilePanelClose/component.rb

@@ -1,8 +1,11 @@
 module AblyUi
   module Core
     class MeganavControlMobilePanelClose < ViewComponent::Base
-      def initialize(aria_controls:)
+      attr_reader :aria_controls, :display_hr
+
+      def initialize(aria_controls:, display_hr: true)
         @aria_controls = aria_controls
+        @display_hr = display_hr
       end
     end
   end

package/src/core/MeganavItemsDesktop/component.html.erb

@@ -2,7 +2,8 @@
   <% panels.each do |panel| %>
     <li class="ui-meganav-item">
       <%= render(AblyUi::Core::MeganavControl.new(aria_controls: panel[:id], theme_name: @theme_name)) do %>
-        <%= panel[:label] %>
+        <span class="hidden lg:inline"><%= panel[:label] %></span>
+        <span class="lg:hidden"><%= panel[:short_label] %></span>
       <% end %>
 
       <%= content_tag :div, class: 'ui-meganav-panel invisible', data: { id: "meganav-panel" }, id: panel[:id] do %>

package/src/core/MeganavItemsDesktop/component.jsx

@@ -12,7 +12,8 @@ const MeganavDesktopItems = ({ panels, paths, theme, absUrl }) => (
       return (
         <li className="ui-meganav-item" key={panel.id}>
           <MeganavControl theme={theme} ariaControls={panel.id}>
-            {panel.label}
+            <span className="hidden lg:inline">{panel.label}</span>
+            <span className="lg:hidden">{panel.shortLabel}</span>
           </MeganavControl>
 
           <div className="ui-meganav-panel invisible" id={panel.id} data-id="meganav-panel">

package/src/core/MeganavItemsMobile/component.html.erb

@@ -48,7 +48,7 @@
               <% end %>
 
               <%= content_tag(:div, class: "ui-meganav-panel-mobile hidden", id: "#{panel[:id]}-mobile", data: { scroll_lock_scrollable: true }) do %>
-                <%= render(AblyUi::Core::MeganavControlMobilePanelClose.new(aria_controls: "#{panel[:id]}-mobile")) %>
+                <%= render(AblyUi::Core::MeganavControlMobilePanelClose.new(aria_controls: "#{panel[:id]}-mobile", display_hr: display_hr(panel[:id]))) %>
                 <%= render("AblyUi::Core::#{panel[:component]}".constantize.new(url_base: url_base)) %>
               <% end %>
             </li>

package/src/core/MeganavItemsMobile/component.jsx

@@ -68,13 +68,14 @@ const MeganavItemsMobile = ({ panels, paths, sessionState, theme, loginLink, abs
             <ul className="mb-16" data-id="meganav-mobile-panel-controls">
               {MeganavData.panels.map((panel) => {
                 const PanelComponent = panels[panel.component];
+                const displayHr = ["company-panel", "developers-panel"].includes(panel.id);
 
                 return (
                   <li className="ui-meganav-mobile-item" key={`${panel.id}-mobile`}>
                     <MeganavControlMobilePanelOpen ariaControls={`${panel.id}-mobile`}>{panel.label}</MeganavControlMobilePanelOpen>
 
                     <div className="ui-meganav-panel-mobile hidden" id={`${panel.id}-mobile`} data-scroll-lock-scrollable>
-                      <MeganavControlMobilePanelClose ariaControls={`${panel.id}-mobile`} />
+                      <MeganavControlMobilePanelClose ariaControls={`${panel.id}-mobile`} displayHr={displayHr} />
                       <PanelComponent paths={paths} absUrl={absUrl} />
                     </div>
                   </li>

package/src/core/MeganavItemsMobile/component.rb

@@ -12,6 +12,10 @@ module AblyUi
         @login_link = login_link
         @url_base = url_base
       end
+
+      def display_hr(panel_id)
+        %w[company-panel developers-panel].include?(panel_id)
+      end
     end
   end
 end

package/src/core/MeganavSearchPanel/component.html.erb

@@ -9,7 +9,7 @@
           <%= render(AblyUi::Core::MeganavSearchAutocomplete.new) %>
         </div>
 
-        <button type="submit" class="ui-btn-secondary ml-8 sm:ml-16 md:ml-24 xl:ml-32">
+        <button type="submit" class="ui-btn-secondary flex-shrink-0 ml-8 sm:ml-16 md:ml-24 xl:ml-32">
           Search
         </button>
       <% end %>

package/src/core/MeganavSearchPanel/component.jsx

@@ -18,7 +18,7 @@ const MeganavSearchPanel = ({ absUrl }) => {
               <MeganavSearchAutocomplete />
             </div>
 
-            <button type="submit" className="ui-btn-secondary ml-8 sm:ml-16 md:ml-24 xl:ml-32">
+            <button type="submit" className="ui-btn-secondary flex-shrink-0 ml-8 sm:ml-16 md:ml-24 xl:ml-32">
               Search
             </button>
           </form>

package/src/core/MeganavSearchSuggestions/component.html.erb

@@ -1,7 +1,7 @@
 <p class="ui-text-overline2 text-cool-black py-12">Popular pages</p>
 
-<div class="flex justify-between items-center overflow-x-scroll md:overflow-auto">
-  <ul class="flex">
+<div class="flex justify-between items-center overflow-hidden">
+  <ul class="flex transition-transform">
     <li class="py-12 pr-8 flex-shrink-0">
       <%= link_to 'How does Ably work?', abs_url("/docs/how-ably-works"), class: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus" %>
     </li>

package/src/core/MeganavSearchSuggestions/component.js

@@ -18,15 +18,16 @@ const getDistance = (e, touchStartX) =>
 
 const withinBuffer = (distance) => Math.abs(distance) < DRAG_BUFFER;
 
+const getItemsTotalWidth = (nodes) =>
+  nodes
+    .map((item) => item.getBoundingClientRect().width)
+    .reduce((acc, val) => acc + val, 0);
+
 const MeganavSearchSuggestions = () => {
   const suggestionsToggle = queryId("meganav-mobile-search-input");
   const suggestions = queryId("meganav-mobile-search-suggestions");
   const list = suggestions.querySelector("ul");
-  const listItems = list.querySelectorAll("li");
-
-  const itemsTotalWidth = Array.from(listItems)
-    .map((item) => item.getBoundingClientRect().width)
-    .reduce((acc, val) => acc + val, 0);
+  const listItems = Array.from(list.querySelectorAll("li"));
 
   const dragLeft = (distance, threshold) => {
     const currentTranslateX = getTranslateX(list);
@@ -50,6 +51,7 @@ const MeganavSearchSuggestions = () => {
     const listWidth = list.getBoundingClientRect().width;
     const currentTranslateX = getTranslateX(list);
     const translateX = Math.round(currentTranslateX + distance);
+    const itemsTotalWidth = getItemsTotalWidth(listItems);
 
     if (dragRightBoundary(translateX, itemsTotalWidth, listWidth, threshold)) {
       return;
@@ -61,6 +63,7 @@ const MeganavSearchSuggestions = () => {
   const dragRightEnd = (distance, threshold) => {
     const listWidth = list.getBoundingClientRect().width;
     const currentTranslateX = getTranslateX(list);
+    const itemsTotalWidth = getItemsTotalWidth(listItems);
     let translateX = Math.round(currentTranslateX + distance);
 
     if (dragRightBoundary(translateX, itemsTotalWidth, listWidth, threshold)) {
@@ -99,11 +102,18 @@ const MeganavSearchSuggestions = () => {
     suggestions.classList.remove("max-h-96");
   };
 
+  const wheelHandler = (e) => {
+    const distance = e.deltaY * 4;
+    if (withinBuffer(distance)) return;
+    distance > 0 ? dragLeftEnd(distance, 24) : dragRightEnd(distance, 48);
+  };
+
   suggestionsToggle.addEventListener("focus", focusSuggestionsHandler);
   suggestionsToggle.addEventListener("blur", blurSuggestionsHandler);
   suggestions.addEventListener("touchstart", touchstartHandler);
   suggestions.addEventListener("touchmove", touchmoveHandler);
   suggestions.addEventListener("touchend", touchendHandler);
+  suggestions.addEventListener("wheel", wheelHandler);
 
   return {
     teardown: () => {