From 104eabbef58c9fa77aaefef22180b859dfd531cb Mon Sep 17 00:00:00 2001
From: Harry Ross <hazross@hotmail.com>
Date: Fri, 29 Dec 2023 17:06:08 +1100
Subject: [PATCH] Added subtitle + title fields instead of logo override

---
 .../MegaMenuLayout/MegaMenuLayout.tsx         | 77 +++++++++++--------
 src/App.tsx                                   |  5 +-
 2 files changed, 49 insertions(+), 33 deletions(-)

diff --git a/lib/components/MegaMenuLayout/MegaMenuLayout.tsx b/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
index 6c0c6b8..a8596b5 100644
--- a/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
+++ b/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
@@ -4,33 +4,40 @@ import { useMenuItems } from "../../hooks/useMenuItems";
 import { NavMenuGroup } from "../../types/megamenu";
 import { CustomLink } from "../CustomLink";
 import DesktopMenu from "../DesktopMenu/DesktopMenu";
-import { Logo as BaseLogo } from "../Logo";
+import { Logo } from "../Logo";
 import MobileMenu from "../MobileMenu/MobileMenu";
 import { PhoneButton } from "../PhoneButton";
 import { Search } from "../Search";
 
-export interface MegaMenuWrapperProps extends React.PropsWithChildren {
-  tagline?: string;
+export type MegaMenuWrapperProps = {
   menuBarItems?: NavMenuGroup[];
-  logoOverride?: () => JSX.Element;
-  sideActionsOverride?: () => JSX.Element;
-  // TODO: REmove
-  hidePhone?: boolean;
-}
+  subtitle?: string;
+  rightSideActionsOverride?: () => JSX.Element;
+} & React.PropsWithChildren &
+  (Tagline | Title);
+
+type Tagline = {
+  title?: never;
+  tagline?: string;
+};
+
+type Title = {
+  title: string;
+  tagline?: never;
+};
 
 const MegaMenuLayout: React.FC<MegaMenuWrapperProps> = ({
-  tagline = "Enterprise Software Development",
+  tagline,
+  title,
+  subtitle,
   menuBarItems,
-  logoOverride,
-  sideActionsOverride,
-  hidePhone,
+  rightSideActionsOverride,
 }) => {
   const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   const { menuItems } = useMenuItems(menuBarItems);
 
-  const Logo = logoOverride;
-  const RightSideActions = sideActionsOverride;
+  const RightSideActions = rightSideActionsOverride;
 
   return (
     <>
@@ -40,30 +47,35 @@ const MegaMenuLayout: React.FC<MegaMenuWrapperProps> = ({
           aria-label="Global"
         >
           <div className="flex items-center">
-            <CustomLink
-              href="/"
-              className="flex items-center gap-1 whitespace-nowrap"
-            >
+            <CustomLink href="/" className="gap-1 whitespace-nowrap">
               <div className="flex min-w-[4rem] max-w-[14rem] items-center justify-center">
-                {Logo ? (
-                  <Logo />
-                ) : (
-                  <>
-                    <BaseLogo />
-                    <div className="w-fit whitespace-break-spaces text-sm font-semibold uppercase leading-4 text-gray-700">
-                      <span className="ml-4 hidden xl:block">{tagline}</span>
-                    </div>
-                  </>
+                <Logo />
+
+                {tagline && (
+                  <div className="w-fit whitespace-break-spaces text-sm font-semibold uppercase leading-4 text-gray-700">
+                    <span className="ml-4 hidden xl:block">{tagline}</span>
+                  </div>
+                )}
+                {title && (
+                  <div className="mb-3 ml-2 mt-2 text-4xl leading-5">
+                    {title}
+                  </div>
                 )}
               </div>
+              {subtitle && (
+                <p className="relative text-xs text-ssw-black opacity-70">
+                  {subtitle}
+                </p>
+              )}
             </CustomLink>
           </div>
           <div className="flex items-center xl:hidden">
-            {!hidePhone && <PhoneButton className="max-sm:hidden" />}
-            {RightSideActions && (
+            {RightSideActions ? (
               <div className="max-sm:hidden">
                 <RightSideActions />
               </div>
+            ) : (
+              <PhoneButton className="max-sm:hidden" />
             )}
             <Search />
             <Divider />
@@ -78,7 +90,7 @@ const MegaMenuLayout: React.FC<MegaMenuWrapperProps> = ({
           </div>
           <DesktopMenu
             menuGroups={menuItems}
-            sideActionsOverride={sideActionsOverride}
+            sideActionsOverride={rightSideActionsOverride}
           />
         </nav>
 
@@ -88,11 +100,12 @@ const MegaMenuLayout: React.FC<MegaMenuWrapperProps> = ({
           closeMobileMenu={() => setMobileMenuOpen(false)}
         />
       </div>
-      {!hidePhone && <PhoneButton className="pb-4 sm:hidden" />}
-      {RightSideActions && (
+      {RightSideActions ? (
         <div className="sm:hidden">
           <RightSideActions />
         </div>
+      ) : (
+        <PhoneButton className="pb-4 sm:hidden" />
       )}
     </>
   );
diff --git a/src/App.tsx b/src/App.tsx
index 12187d9..f7900ae 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,7 +6,10 @@ function App() {
     <>
       <header>Test MegaMenu</header>
       <div className="mx-auto max-w-7xl px-8">
-        <MegaMenuLayout />
+        <MegaMenuLayout
+          title="Rules"
+          subtitle="Secret ingredients to quality software"
+        />
       </div>
     </>
   );