Added rules functionality

SSWConsulting · Dec 29, 2023 · 41f3bd1 · 41f3bd1
1 parent a7477b6
commit 41f3bd1
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 19 deletions.
diff --git a/lib/components/DesktopMenu/DesktopMenu.tsx b/lib/components/DesktopMenu/DesktopMenu.tsx
@@ -9,11 +9,19 @@ import { MenuItemWithSubmenu } from "./MenuItemWithSubmenu";
 
 export interface DesktopMenuProps {
   menuGroups: NavMenuGroup[];
+  sideActionsOverride?: () => JSX.Element;
+  hidePhone?: boolean;
 }
 
 export const ClosePopoverContext = createContext<(() => void) | null>(null);
 
-const DesktopMenu: React.FC<DesktopMenuProps> = ({ menuGroups }) => {
+const DesktopMenu: React.FC<DesktopMenuProps> = ({
+  menuGroups,
+  sideActionsOverride,
+  hidePhone,
+}) => {
+  const SideActions = sideActionsOverride;
+
   return (
     <>
       <div className="hidden flex-1 xl:block">
@@ -62,15 +70,31 @@ const DesktopMenu: React.FC<DesktopMenuProps> = ({ menuGroups }) => {
       </div>
 
       <div className="hidden shrink items-center justify-end xl:flex">
-        <PhoneButton hideMobile />
-        <Search />
-        <Divider />
-        <CountryDropdown />
+        {SideActions ? (
+          <SideActions />
+        ) : (
+          <DefaultSideActions hidePhone={hidePhone} />
+        )}
       </div>
     </>
   );
 };
 
+type DefaultSideActionsProps = {
+  hidePhone?: boolean;
+};
+
+const DefaultSideActions = ({ hidePhone }: DefaultSideActionsProps) => {
+  return (
+    <>
+      {!hidePhone && <PhoneButton hideMobile />}
+      <Search />
+      <Divider />
+      <CountryDropdown />
+    </>
+  );
+};
+
 const Divider: React.FC = () => {
   return <div className="hidden h-5 w-px bg-gray-700/30 sm:block"></div>;
 };

diff --git a/lib/components/MegaMenuLayout/MegaMenuLayout.tsx b/lib/components/MegaMenuLayout/MegaMenuLayout.tsx
@@ -4,27 +4,36 @@ import { useMenuItems } from "../../hooks/useMenuItems";
 import { NavMenuGroup } from "../../types/megamenu";
 import { CustomLink } from "../CustomLink";
 import DesktopMenu from "../DesktopMenu/DesktopMenu";
-import { Logo } from "../Logo";
+import { Logo as BaseLogo } from "../Logo";
 import MobileMenu from "../MobileMenu/MobileMenu";
 import { PhoneButton } from "../PhoneButton";
 import { Search } from "../Search";
 
 export interface MegaMenuWrapperProps extends React.PropsWithChildren {
   tagline?: string;
   menuBarItems?: NavMenuGroup[];
+  logoOverride?: () => JSX.Element;
+  sideActionsOverride?: () => JSX.Element;
+  hidePhone?: boolean;
 }
 
 const MegaMenuLayout: React.FC<MegaMenuWrapperProps> = ({
   tagline = "Enterprise Software Development",
   menuBarItems,
+  logoOverride,
+  sideActionsOverride,
+  hidePhone,
 }) => {
   const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   const { menuItems } = useMenuItems(menuBarItems);
 
+  const Logo = logoOverride;
+  const SideActions = sideActionsOverride;
+
   return (
     <>
-      <div className="relative z-10 flex h-16 w-full items-center justify-center lg:h-[120px]">
+      <div className="relative z-10 flex h-16 w-full items-center justify-center sm:h-[120px]">
         <nav
           className="flex h-full w-full items-center justify-between gap-x-4 overflow-hidden px-0"
           aria-label="Global"
@@ -35,15 +44,26 @@ const MegaMenuLayout: React.FC<MegaMenuWrapperProps> = ({
               className="flex items-center gap-1 whitespace-nowrap"
             >
               <div className="flex min-w-[4rem] max-w-[14rem] items-center justify-center">
-                <Logo />
-                <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 ? (
+                  <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>
+                  </>
+                )}
               </div>
             </CustomLink>
           </div>
           <div className="flex items-center xl:hidden">
-            <PhoneButton className="max-sm:hidden" />
+            {!hidePhone && <PhoneButton className="max-sm:hidden" />}
+            {SideActions && (
+              <div className="max-sm:hidden">
+                <SideActions />
+              </div>
+            )}
             <Search />
             <Divider />
             <button
@@ -55,7 +75,10 @@ const MegaMenuLayout: React.FC<MegaMenuWrapperProps> = ({
               <Bars3Icon className="h-6 w-6" aria-hidden="true" />
             </button>
           </div>
-          <DesktopMenu menuGroups={menuItems} />
+          <DesktopMenu
+            menuGroups={menuItems}
+            sideActionsOverride={sideActionsOverride}
+          />
         </nav>
 
         <MobileMenu
@@ -64,7 +87,12 @@ const MegaMenuLayout: React.FC<MegaMenuWrapperProps> = ({
           closeMobileMenu={() => setMobileMenuOpen(false)}
         />
       </div>
-      <PhoneButton className="pb-4 sm:hidden" />
+      {!hidePhone && <PhoneButton className="pb-4 sm:hidden" />}
+      {SideActions && (
+        <div className="sm:hidden">
+          <SideActions />
+        </div>
+      )}
     </>
   );
 };

diff --git a/lib/hooks/useMenuItems.ts b/lib/hooks/useMenuItems.ts
@@ -7,11 +7,14 @@ const refreshData = async () => {
   const res = await fetch(API_URL);
 
   const json = await res.json();
-  if (window?.localStorage) {
-    window.localStorage.setItem("megamenu", JSON.stringify(json));
+
+  const { menuGroups } = json;
+
+  if (window?.localStorage && menuGroups?.length > 0) {
+    window.localStorage.setItem("megamenu", JSON.stringify(menuGroups));
   }
 
-  return json;
+  return menuGroups;
 };
 
 export const useMenuItems = (
@@ -20,11 +23,12 @@ export const useMenuItems = (
   const [menuItems, setMenuItems] = useState<NavMenuGroup[] | null>([]);
 
   useEffect(() => {
-    const cached = JSON.parse(window.localStorage.getItem("megamenu") || "{}");
+    const cached = JSON.parse(window.localStorage.getItem("megamenu") || "[]");
+    console.log("cached", cached);
 
     if (menuBarItems) {
       setMenuItems(menuBarItems);
-    } else if (cached) {
+    } else if (cached?.length > 0) {
       setMenuItems(cached);
     } else {
       refreshData().then((data) => {