@ably/ui 7.10.0 → 8.0.0-dev.43132fe

package/src/core/Meganav/component.js

@@ -17,6 +17,8 @@ import MeganavControl from "../MeganavControl/component";
 import MeganavControlMobileDropdown from "../MeganavControlMobileDropdown/component";
 import MobilePanelOpenClick from "../MeganavControlMobilePanelOpen/component";
 import MobilePanelCloseClick from "../MeganavControlMobilePanelClose/component";
+import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component";
+import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component";
 
 // Close menu when user clicks outside of viewport
 const windowOnBlur = (closeAll) => {
@@ -111,10 +113,14 @@ const documentScroll = (themeName) => {
   };
 };
 
-export default function Meganav({ themeName } = { themeName: null }) {
+export default function Meganav(
+  { themeName, addSearchApiKey } = { themeName: null }
+) {
   const controls = MeganavControl();
   const panelOpenControls = MobilePanelOpenClick();
   const panelCloseControls = MobilePanelCloseClick();
+  const search = MeganavSearchAutocomplete(addSearchApiKey);
+  const searchSuggestions = MeganavSearchSuggestions();
 
   const mobileDropdownControl = MeganavControlMobileDropdown({
     clearPanels: () =>
@@ -124,9 +130,11 @@ export default function Meganav({ themeName } = { themeName: null }) {
   const closeAll = () =>
     [
       mobileDropdownControl,
+      searchSuggestions,
       ...panelOpenControls,
       ...panelCloseControls,
       ...controls,
+      ...search,
     ].forEach((i) => i.clear());
 
   const teardowns = [
@@ -134,9 +142,11 @@ export default function Meganav({ themeName } = { themeName: null }) {
     documentClick(closeAll),
     windowOnBlur(closeAll),
     mobileDropdownControl,
+    searchSuggestions,
     ...controls,
     ...panelOpenControls,
     ...panelCloseControls,
+    ...search,
   ].map((i) => i.teardown);
 
   return () => teardowns.forEach((teardown) => teardown());

package/src/core/Meganav/component.jsx

@@ -18,23 +18,27 @@ import MeganavContentPlatform from "../MeganavContentPlatform/component.jsx";
 import MeganavContentUseCases from "../MeganavContentUseCases/component.jsx";
 import MeganavContentWhyAbly from "../MeganavContentWhyAbly/component.jsx";
 import MeganavContentDevelopers from "../MeganavContentDevelopers/component.jsx";
+import MeganavSearch from "../MeganavSearch/component.jsx";
 
 const SignIn = ({ sessionState, theme, loginLink, absUrl }) => {
   return sessionState.signedIn ? (
     <MeganavItemsSignedIn absUrl={absUrl} sessionState={sessionState} theme={theme} />
   ) : (
     <ul className="hidden md:flex items-center">
-      <li>
+      <li className="ui-meganav-item">
         <a href={absUrl("/contact")} className={`ui-meganav-link ${theme.textColor}`} data-id="meganav-link">
           Contact us
         </a>
       </li>
-      <li>
-        <a href={absUrl(loginLink)} className={`ui-meganav-link ${theme.textColor}`} data-id="meganav-link">
+      <li className="ui-meganav-item">
+        <a href={absUrl(loginLink)} className={`ui-meganav-link mr-0 ${theme.textColor}`} data-id="meganav-link">
           Login
         </a>
       </li>
-      <li className="ml-16">
+      <li className="ui-meganav-item">
+        <MeganavSearch absUrl={absUrl} />
+      </li>
+      <li className="ui-meganav-item">
         <a href={absUrl("/sign-up")} data-id="meganav-sign-up-btn" className={`ui-btn p-btn-small ${theme.buttonBackgroundColor} ${theme.buttonTextColor}`}>
           Sign up free
         </a>
@@ -60,7 +64,7 @@ const panels = {
   MeganavContentDevelopers: MeganavContentDevelopers,
 };
 
-export default function Meganav({ paths, themeName = "white", notice, loginLink = "/login", urlBase }) {
+export default function Meganav({ paths, themeName = "white", notice, loginLink = "/login", urlBase, addSearchApiKey }) {
   const [sessionState, setSessionState] = useState(null);
 
   useEffect(() => {
@@ -70,7 +74,7 @@ export default function Meganav({ paths, themeName = "white", notice, loginLink
   }, []);
 
   useEffect(() => {
-    const teardown = MeganavScripts({ themeName });
+    const teardown = MeganavScripts({ themeName, addSearchApiKey });
     return () => teardown();
   }, [sessionState]);
 
@@ -81,7 +85,10 @@ export default function Meganav({ paths, themeName = "white", notice, loginLink
     <nav className={`ui-meganav-wrapper ${theme.backgroundColor} ${theme.barShadow}`} data-id="meganav" aria-label="Main">
       {notice && <Notice {...notice.props} config={notice.config} />}
       <div className="ui-meganav ui-grid-px">
-        <Logo dataId="meganav-logo" href={urlBase} />
+        <div className="mr-24">
+          <Logo dataId="meganav-logo" href={urlBase} />
+        </div>
+
         <MeganavItemsDesktop panels={panels} paths={paths} theme={theme} absUrl={absUrl} />
 
         {/* Because we load the session state through fetch, we display a placeholder until fetch returns */}
@@ -112,4 +119,5 @@ Meganav.propTypes = {
   }),
   loginLink: T.string,
   urlBase: T.string,
+  addSearchApiKey: T.string,
 };

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

@@ -14,41 +14,47 @@
   </div>
 
   <div>
-    <h3 class="ui-meganav-overline" id="meganav-platform-panel-list-our-features">Our features</h3>
-    <ul aria-labelledby="meganav-platform-panel-list-our-features">
+    <h3 class="ui-meganav-overline" id="meganav-platform-panel-list-examples">Examples</h3>
+    <ul aria-labelledby="meganav-platform-panel-list-examples">
       <li>
-        <%= link_to abs_url("/pub-sub-messaging"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Publish/subscribe messaging</p>
-          <p class="ui-meganav-media-copy">Feature-rich pub/sub messaging to power any realtime requirement.</p>
+        <%= link_to abs_url("/examples/avatar-stack"), class: "ui-meganav-media group" do %>
+          <p class="ui-meganav-media-heading">Avatar Stack</p>
+          <p class="ui-meganav-media-copy">See who is connected in a digital space.</p>
         <% end %>
       </li>
       <li>
-        <%= link_to abs_url("/push-notifications"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Push notifications</p>
-          <p class="ui-meganav-media-copy">Deliver native notifications at scale with our unified API.</p>
+        <%= link_to abs_url("/examples/emoji-reactions"), class: "ui-meganav-media group" do %>
+          <p class="ui-meganav-media-heading">Emoji Reactions</p>
+          <p class="ui-meganav-media-copy">React with an emoji to a message.</p>
         <% end %>
       </li>
       <li>
-        <%= link_to abs_url("/integrations"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Third-party integrations</p>
-          <p class="ui-meganav-media-copy">Integrate and extend Ably with cloud services like AWS Kinesis.</p>
+        <%= link_to abs_url("/examples/activity-feed"), class: "ui-meganav-media group" do %>
+          <p class="ui-meganav-media-heading">Activity Feed</p>
+          <p class="ui-meganav-media-copy">Display a list of user actions in realtime.</p>
         <% end %>
       </li>
       <li>
-        <%= link_to abs_url("/protocols"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Multi-protocol messaging</p>
-          <p class="ui-meganav-media-copy">We support pub/sub over WebSockets, MQTT, SSE, and more.</p>
+        <%= link_to abs_url("/examples/live-charts"), class: "ui-meganav-media group" do %>
+          <p class="ui-meganav-media-heading">Live Charts</p>
+          <p class="ui-meganav-media-copy">Visualise live metrics and data in a chart.</p>
         <% end %>
       </li>
       <li>
-        <%= link_to abs_url("/hub"), class: "ui-meganav-media group" do %>
-          <p class="ui-meganav-media-heading">Streaming data sources</p>
-          <p class="ui-meganav-media-copy">Augment your apps with realtime updates like weather or transit.</p>
+        <%= link_to abs_url("/examples/live-cursors"), class: "ui-meganav-media group" do %>
+          <p class="ui-meganav-media-heading">Live Cursors</p>
+          <p class="ui-meganav-media-copy">Track all cursors in realtime.</p>
+        <% end %>
+      </li>
+      <li>
+        <%= link_to abs_url("/examples/typing-indicator"), class: "ui-meganav-media group" do %>
+          <p class="ui-meganav-media-heading">Typing Indicator</p>
+          <p class="ui-meganav-media-copy">See when a user is typing a message.</p>
         <% end %>
       </li>
     </ul>
 
-    <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/platform"))) do %>Explore all platform features<% end %>
+    <%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/examples/live-examples"))) do %>Explore all live examples<% end %>
   </div>
 
   <div>

package/src/core/MeganavContentPlatform/component.jsx

@@ -19,43 +19,48 @@ const MeganavContentPlatform = ({ paths, absUrl }) => (
     </div>
 
     <div>
-      <h3 className="ui-meganav-overline" id="meganav-platform-panel-list-our-features">
-        Our features
+      <h3 className="ui-meganav-overline" id="meganav-platform-panel-list-examples">
+        Examples
       </h3>
-      <ul aria-labelledby="meganav-platform-panel-list-our-features">
+      <ul aria-labelledby="meganav-platform-panel-list-examples">
         <li>
-          <a href={absUrl("/pub-sub-messaging")} className="group ui-meganav-media">
-            <p className="ui-meganav-media-heading">Publish/subscribe messaging</p>
-            <p className="ui-meganav-media-copy">Feature-rich pub/sub messaging to power any realtime requirement.</p>
+          <a href={absUrl("/examples/avatar-stack")} className="group ui-meganav-media">
+            <p className="ui-meganav-media-heading">Avatar Stack</p>
+            <p className="ui-meganav-media-copy">See who is connected in a digital space.</p>
           </a>
         </li>
         <li>
-          <a href={absUrl("/push-notifications")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Push notifications</p>
-            <p className="ui-meganav-media-copy">Deliver native notifications at scale with our unified API.</p>
+          <a href={absUrl("/examples/emoji-reactions")} className="ui-meganav-media group">
+            <p className="ui-meganav-media-heading">Emoji Reactions</p>
+            <p className="ui-meganav-media-copy">React with an emoji to a message.</p>
           </a>
         </li>
         <li>
-          <a href={absUrl("/integrations")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Third-party integrations</p>
-            <p className="ui-meganav-media-copy">Integrate and extend Ably with cloud services like AWS Kinesis.</p>
+          <a href={absUrl("/examples/activity-feed")} className="ui-meganav-media group">
+            <p className="ui-meganav-media-heading">Activity Feed</p>
+            <p className="ui-meganav-media-copy">Display a list of user actions in realtime.</p>
           </a>
         </li>
         <li>
-          <a href={absUrl("/protocols")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Multi-protocol messaging</p>
-            <p className="ui-meganav-media-copy">We support pub/sub over WebSockets, MQTT, SSE, and more.</p>
+          <a href={absUrl("/examples/live-charts")} className="ui-meganav-media group">
+            <p className="ui-meganav-media-heading">Live Charts</p>
+            <p className="ui-meganav-media-copy">Visualise live metrics and data in a chart.</p>
           </a>
         </li>
         <li>
-          <a href={absUrl("/hub")} className="ui-meganav-media group">
-            <p className="ui-meganav-media-heading">Streaming data sources</p>
-            <p className="ui-meganav-media-copy">Augment your apps with realtime updates like weather or transit.</p>
+          <a href={absUrl("/examples/live-cursors")} className="ui-meganav-media group">
+            <p className="ui-meganav-media-heading">Live Cursors</p>
+            <p className="ui-meganav-media-copy">Track all cursors in realtime.</p>
+          </a>
+        </li>
+        <li>
+          <a href={absUrl("/examples/typing-indicator")} className="ui-meganav-media group">
+            <p className="ui-meganav-media-heading">Typing Indicator</p>
+            <p className="ui-meganav-media-copy">See when a user is typing a message.</p>
           </a>
         </li>
       </ul>
-
-      <FeaturedLink url={absUrl("/platform")}>Explore all platform features</FeaturedLink>
+      <FeaturedLink url={absUrl("/examples/live-examples")}>Explore all live examples</FeaturedLink>
     </div>
 
     <div>

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

@@ -1,6 +1,6 @@
 <%= button_tag(type: "button",
-               class: ["ui-meganav-link", "h-64", "flex", "items-center", "group", theme(:text_color)],
+               class: ["ui-meganav-link", "h-64", "flex", "items-center", "group", theme(:text_color), additional_css],
                data: { id: "meganav-control" },
-               aria: { expanded: false, controls: @aria_controls, label: "Show #{content}" }) do -%>
+               aria: { expanded: false, controls: aria_controls, label: "Show #{content}" }) do -%>
   <%= content -%><%= render(AblyUi::Core::Icon.new(name: "icon-gui-disclosure-arrow", size: "1.5rem", color: "text-cool-black", additional_css: "transform rotate-90 group-hover:text-gui-hover group-focus:text-gui-focus")) %>
 <% end %>

package/src/core/MeganavControl/component.js

@@ -1,4 +1,4 @@
-import { queryIdAll } from "../dom-query";
+import { queryId, queryIdAll } from "../dom-query";
 
 const MeganavControl = () => {
   const controls = Array.from(queryIdAll("meganav-control"));
@@ -12,11 +12,21 @@ const MeganavControl = () => {
       `(hover: hover) and (pointer: fine) and (min-width: ${mdBreakpoint})`
     ).matches;
 
+  const isSearchControl = (node) => node.dataset.control === "search";
+
+  const isSearchPanelOpen = () => {
+    const searchPanel = document.querySelector(
+      '[data-id="meganav-panel"]#panel-search'
+    );
+    if (!searchPanel) return;
+    return !searchPanel.classList.contains("invisible");
+  };
+
   const controlsHaveFocus = () =>
     controls.some((control) => control === document.activeElement);
 
   const hover = (control, panel, open) => {
-    if (hoverEnabled() && !controlsHaveFocus()) {
+    if (hoverEnabled() && !controlsHaveFocus() && !isSearchPanelOpen()) {
       const classes = ["invisible", "visible"];
       panel.classList.replace(...(open ? classes : classes.reverse()));
       control.setAttribute("aria-expanded", open);
@@ -40,12 +50,20 @@ const MeganavControl = () => {
 
     const ariaExpanded = control.getAttribute("aria-expanded");
 
-    if (ariaExpanded) {
+    if (ariaExpanded === "true") {
+      control.setAttribute("aria-expanded", false);
+      panel.classList.replace("visible", "invisible");
+    } else {
       control.setAttribute("aria-expanded", true);
       panel.classList.replace("invisible", "visible");
+    }
+
+    if (isSearchControl(control)) {
+      const searchInput = queryId("meganav-search-input", panel);
+      if (!searchInput) return;
+      searchInput.focus();
     } else {
-      control.setAttribute("aria-expanded", false);
-      panel.classList.replace("visible", "invisible");
+      control.focus();
     }
   };
 
@@ -56,18 +74,25 @@ const MeganavControl = () => {
         `#${control.getAttribute("aria-controls")}`
       );
       const click = clickHandler(control, panel);
-      const mouseenter = mouseenterHandler(control, panel);
-      const mouseleave = mouseleaveHandler(control, panel);
-
-      item.addEventListener("mouseenter", mouseenter);
-      item.addEventListener("mouseleave", mouseleave);
       control.addEventListener("click", click);
+      let mouseenter, mouseleave;
+
+      if (!isSearchControl(control)) {
+        mouseenter = mouseenterHandler(control, panel);
+        mouseleave = mouseleaveHandler(control, panel);
+
+        item.addEventListener("mouseenter", mouseenter);
+        item.addEventListener("mouseleave", mouseleave);
+      }
 
       return [
         {
           teardown: () => {
-            item.removeEventListener("mouseenter", mouseenter);
-            item.removeEventListener("mouseleave", mouseleave);
+            if (mouseenter && mouseleave) {
+              item.removeEventListener("mouseenter", mouseenter);
+              item.removeEventListener("mouseleave", mouseleave);
+            }
+
             control.removeEventListener("click", click);
           },
           clear: () => {

package/src/core/MeganavControl/component.jsx

@@ -3,11 +3,11 @@ import T from "prop-types";
 
 import Icon from "../Icon/component.jsx";
 
-const MeganavControl = ({ ariaControls, children, theme }) => (
+const MeganavControl = ({ ariaControls, children, theme, additionalCSS }) => (
   <button
     type="button"
     data-id="meganav-control"
-    className={`ui-meganav-link h-64 flex items-center group ${theme.textColor}`}
+    className={`ui-meganav-link h-64 flex items-center group ${additionalCSS} ${theme.textColor}`}
     aria-expanded="false"
     aria-controls={ariaControls}
     aria-label={`Show ${children}`}
@@ -26,6 +26,7 @@ MeganavControl.propTypes = {
   ariaControls: T.string,
   children: T.node,
   theme: T.object,
+  additionalCSS: T.string,
 };
 
 export default MeganavControl;

package/src/core/MeganavControl/component.rb

@@ -2,9 +2,11 @@ module AblyUi
   module Core
     class MeganavControl < ViewComponent::Base
       include AblyUi::Core::MeganavConfig
+      attr_reader :aria_controls, :additional_css
 
-      def initialize(aria_controls:, theme_name:)
+      def initialize(aria_controls:, theme_name:, additional_css: '')
         @aria_controls = aria_controls
+        @additional_css = additional_css
         theme_setup(theme_name)
       end
     end

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

@@ -11,8 +11,36 @@
     <%= render(AblyUi::Core::MeganavControlMobileDropdown.new(theme_name: @theme_name)) %>
 
     <div class="ui-meganav-mobile-dropdown invisible" id="meganav-mobile-dropdown" data-id="meganav-mobile-dropdown">
-      <div class="py-16 ui-grid-px bg-white">
-        <ul class="mb-16">
+      <div class="pt-24 pb-16 ui-grid-px bg-white">
+        <%= tag.form class: "mb-16", action: abs_url("/search"), method: "get" do %>
+          <div class="relative w-full">
+            <%= render(AblyUi::Core::Icon.new(name: "icon-gui-search", size: "1.5rem", color: "text-cool-black", additional_css: "absolute top-12 left-16 hover:text-gui-hover")) %>
+            <button
+              type="button"
+              class="absolute top-12 right-16 p-0 focus:outline-gui-focus m-0 md:hidden invisible"
+              data-id="meganav-search-input-clear"
+            >
+              <%= render(AblyUi::Core::Icon.new(name: "icon-gui-cross-circled-fill", size: "1.5rem", color: "text-dark-grey")) %>
+            </button>
+            <input
+              type="search"
+              name="q"
+              class="ui-input px-48 h-48"
+              style={{ maxWidth: "none" }}
+              placeholder="Search"
+              autocomplete="off"
+              data-id="meganav-mobile-search-input"
+            />
+
+            <%= render(AblyUi::Core::MeganavSearchAutocomplete.new) %>
+          </div>
+        <% end %>
+
+        <div class="max-h-0 overflow-hidden transition-all" data-id="meganav-mobile-search-suggestions">
+           <%= render(AblyUi::Core::MeganavSearchSuggestions.new(url_base: url_base, display_support_link: false)) %>
+        </div>
+
+        <ul class="mb-16" data-id="meganav-mobile-panel-controls">
           <% panels.each do |panel| %>
             <li class="ui-meganav-mobile-item">
               <%= render(AblyUi::Core::MeganavControlMobilePanelOpen.new(aria_controls: "#{panel[:id]}-mobile")) do %>

package/src/core/MeganavItemsMobile/component.jsx

@@ -2,11 +2,14 @@ import React from "react";
 import T from "prop-types";
 
 import SignOutLink from "../SignOutLink/component.jsx";
+import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component.jsx";
+import Icon from "../Icon/component.jsx";
 
 import MeganavData from "../Meganav/component.json";
 import MeganavControlMobileDropdown from "../MeganavControlMobileDropdown/component.jsx";
 import MeganavControlMobilePanelClose from "../MeganavControlMobilePanelClose/component.jsx";
 import MeganavControlMobilePanelOpen from "../MeganavControlMobilePanelOpen/component.jsx";
+import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component.jsx";
 
 const MeganavItemsMobile = ({ panels, paths, sessionState, theme, loginLink, absUrl }) => {
   const classNames = `ui-meganav-link ${theme.textColor}`;
@@ -33,8 +36,36 @@ const MeganavItemsMobile = ({ panels, paths, sessionState, theme, loginLink, abs
         <MeganavControlMobileDropdown theme={theme} />
 
         <div className="ui-meganav-mobile-dropdown invisible" id="meganav-mobile-dropdown" data-id="meganav-mobile-dropdown">
-          <div className="py-16 ui-grid-px bg-white">
-            <ul className="mb-16">
+          <div className="pt-24 pb-16 ui-grid-px bg-white">
+            <form className="mb-16" action={absUrl("/search")} method="get">
+              <div className="relative w-full">
+                <Icon name="icon-gui-search" color="text-cool-black" size="1.5rem" additionalCSS="absolute top-12 left-16 hover:text-gui-hover" />
+                <button
+                  type="button"
+                  className="absolute top-12 right-16 p-0 focus:outline-gui-focus m-0 md:hidden invisible"
+                  data-id="meganav-search-input-clear"
+                >
+                  <Icon name="icon-gui-cross-circled-fill" color="text-dark-grey" size="1.5rem" additionalCSS="" />
+                </button>
+                <input
+                  type="search"
+                  name="q"
+                  className="ui-input px-48 h-48"
+                  style={{ maxWidth: "none" }}
+                  placeholder="Search"
+                  autoComplete="off"
+                  data-id="meganav-mobile-search-input"
+                />
+
+                <MeganavSearchAutocomplete />
+              </div>
+            </form>
+
+            <div className="max-h-0 overflow-hidden transition-all" data-id="meganav-mobile-search-suggestions">
+              <MeganavSearchSuggestions absUrl={absUrl} displaySupportLink={false} />
+            </div>
+
+            <ul className="mb-16" data-id="meganav-mobile-panel-controls">
               {MeganavData.panels.map((panel) => {
                 const PanelComponent = panels[panel.component];
 

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

@@ -1,6 +1,6 @@
 <ul class="hidden md:flex items-center">
   <li class="ui-meganav-item relative">
-    <%= render(AblyUi::Core::MeganavControl.new(aria_controls: "account-panel", theme_name: @theme_name)) do %>
+    <%= render(AblyUi::Core::MeganavControl.new(aria_controls: "account-panel", theme_name: @theme_name, additional_css: "mr-0")) do %>
       <%= account_name %>
     <% end %>
 
@@ -41,8 +41,12 @@
     </div>
   </li>
 
+  <li>
+    <%= render(AblyUi::Core::MeganavSearch.new(url_base: url_base)) %>
+  </li>
+
   <% if account? %>
-    <li class="ml-16">
+    <li>
       <%= link_to "Dashboard", @session_data[:account][:links][:dashboard][:href], class: "ui-btn-secondary p-btn-small" %>
     </li>
   <% end %>

package/src/core/MeganavItemsSignedIn/component.jsx

@@ -3,6 +3,7 @@ import T from "prop-types";
 
 import MeganavControl from "../MeganavControl/component.jsx";
 import SignOutLink from "../SignOutLink/component.jsx";
+import MeganavSearch from "../MeganavSearch/component.jsx";
 
 const truncate = (string, length) => {
   return string?.length && string.length > length ? `${string.slice(0, length - 1)}…` : string;
@@ -16,7 +17,7 @@ const MeganavItemsSignedIn = ({ sessionState, theme, absUrl }) => {
   return (
     <ul className="hidden md:flex items-center">
       <li className="ui-meganav-item relative">
-        <MeganavControl ariaControls="account-panel" theme={theme}>
+        <MeganavControl ariaControls="account-panel" theme={theme} additionalCSS="mr-0">
           {accountName}
         </MeganavControl>
 
@@ -70,8 +71,12 @@ const MeganavItemsSignedIn = ({ sessionState, theme, absUrl }) => {
         </div>
       </li>
 
+      <li>
+        <MeganavSearch absUrl={absUrl} />
+      </li>
+
       {sessionState.account && (
-        <li className="ml-16">
+        <li>
           <a href={absUrl(sessionState.account.links.dashboard.href)} className="ui-btn-secondary p-btn-small">
             Dashboard
           </a>

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

@@ -0,0 +1,15 @@
+<button
+  type="button"
+  data-id="meganav-control"
+  data-control="search"
+  class="h-64 w-24 px-24 pr-48 py-20 group focus:outline-none"
+  aria-expanded="false"
+  aria-controls="panel-search"
+  aria-label="Show Search Panel"
+>
+  <%= render(AblyUi::Core::Icon.new(name: "icon-gui-search", size: "1.5rem", color: "text-cool-black", additional_css: "group-hover:text-gui-hover group-focus:text-gui-focus")) %>
+</button>
+
+<div class="ui-meganav-panel invisible" id="panel-search" data-id="meganav-panel">
+  <%= render(AblyUi::Core::MeganavSearchPanel.new(url_base: url_base)) %>
+</div>

package/src/core/MeganavSearch/component.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import T from "prop-types";
+
+import Icon from "../Icon/component.jsx";
+import MeganavSearchPanel from "../MeganavSearchPanel/component.jsx";
+
+const MeganavSearch = ({ absUrl }) => {
+  return (
+    <>
+      <button
+        type="button"
+        data-id="meganav-control"
+        data-control="search"
+        className="h-64 w-24 px-24 pr-48 py-20 group focus:outline-none"
+        aria-expanded="false"
+        aria-controls="panel-search"
+        aria-label={`Show Search Panel`}
+      >
+        <Icon name="icon-gui-search" color="text-cool-black" size="1.5rem" additionalCSS="group-hover:text-gui-hover group-focus:text-gui-focus" />
+      </button>
+
+      <div className="ui-meganav-panel invisible" id="panel-search" data-id="meganav-panel">
+        <MeganavSearchPanel absUrl={absUrl} />
+      </div>
+    </>
+  );
+};
+
+MeganavSearch.propTypes = {
+  absUrl: T.func,
+};
+
+export default MeganavSearch;

package/src/core/MeganavSearch/component.rb

@@ -0,0 +1,13 @@
+module AblyUi
+  module Core
+    class MeganavSearch < ViewComponent::Base
+      include Util
+
+      attr_reader :url_base
+
+      def initialize(url_base:)
+        @url_base = url_base
+      end
+    end
+  end
+end

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

@@ -0,0 +1,6 @@
+<div
+  class="absolute w-full mt-8 z-10 hidden shadow-container rounded-lg bg-white border border-mid-grey"
+  data-id="meganav-search-autocomplete-container"
+>
+  <ol class="m-16" data-id="meganav-search-autocomplete-list"></ol>
+</div>