From 572f9c2cbabdbb9d8e9f35986ef367dde337c1fc Mon Sep 17 00:00:00 2001
From: "Ricardo M." <lordrip@gmail.com>
Date: Thu, 11 Jul 2024 12:16:00 -0400
Subject: [PATCH] fix(topmenu): Keep menu on the same row

The Top menu is switching to stack mode at `sm` and `md` viewports,
which is not efficient.

This commit forces the layout to be inline for all viewports.

fix: https://github.com/KaotoIO/kaoto/issues/825
---
 packages/ui/src/layout/TopBar.tsx | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/ui/src/layout/TopBar.tsx b/packages/ui/src/layout/TopBar.tsx
index b6abf090a..5544575e1 100644
--- a/packages/ui/src/layout/TopBar.tsx
+++ b/packages/ui/src/layout/TopBar.tsx
@@ -8,6 +8,7 @@ import {
   MastheadBrand,
   MastheadContent,
   MastheadMain,
+  MastheadProps,
   MastheadToggle,
   MenuToggle,
   MenuToggleElement,
@@ -15,7 +16,7 @@ import {
 } from '@patternfly/react-core';
 import { EllipsisVIcon, ExternalLinkAltIcon, GithubIcon } from '@patternfly/react-icons';
 import { BarsIcon } from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import React, { FunctionComponent, useRef } from 'react';
+import React, { FunctionComponent } from 'react';
 import { Link } from 'react-router-dom';
 import logo from '../assets/logo-kaoto.png';
 import { useComponentLink } from '../hooks/ComponentLink';
@@ -26,13 +27,16 @@ interface ITopBar {
   navToggle: () => void;
 }
 
+const displayObject: MastheadProps['display'] = {
+  default: 'inline',
+};
+
 const DEFAULT_POPPER_PROPS = {
   position: 'end',
   preventOverflow: true,
 } as const;
 
 export const TopBar: FunctionComponent<ITopBar> = (props) => {
-  const displayObject = useRef({ default: 'inline', lg: 'stack', '2xl': 'inline' } as const);
   const logoLink = useComponentLink(Links.Home);
   const [isOpen, setIsOpen] = React.useState(false);
   const [isAboutModalOpen, setIsAboutModalOpen] = React.useState(false);
@@ -44,14 +48,6 @@ export const TopBar: FunctionComponent<ITopBar> = (props) => {
   const onSelect = (event: React.MouseEvent<Element, MouseEvent> | undefined) => {
     event?.stopPropagation();
     setIsOpen(!isOpen);
-    const selectedItemId = event?.currentTarget?.id || '';
-    if (selectedItemId === 'settings') {
-      // TODO: open the settings modal
-    } else if (selectedItemId === 'about') {
-      // todo
-    } else {
-      // ignore unknown menu items
-    }
   };
 
   const toggleAboutModal = () => {
@@ -60,7 +56,7 @@ export const TopBar: FunctionComponent<ITopBar> = (props) => {
 
   return (
     <>
-      <Masthead id="stack-inline-masthead" display={displayObject.current}>
+      <Masthead id="stack-inline-masthead" display={displayObject}>
         <MastheadToggle>
           <Button variant="plain" onClick={props.navToggle} aria-label="Global navigation">
             <BarsIcon />