Merge pull request #133 from SSWConsulting/country-flag-updates

Show/Hide Flag drop down in mobile view

Author: PothieuG

lib/components/CountryDropdown/CountryDropdown.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { Popover, Transition } from "@headlessui/react";
+import type { ClassValue } from "clsx";
 import { Fragment, useEffect, useState } from "react";
 import { useLinkComponent } from "../../hooks/useLinkComponent";
 import { Countries } from "../../types/country";
@@ -23,9 +24,10 @@ const websites: { country: Countries; url: string }[] = [
 
 type CountryDropdownProps = {
   url?: string;
+  className?: ClassValue;
 };
 
-const CountryDropdown = ({ url }: CountryDropdownProps) => {
+const CountryDropdown = ({ url, className }: CountryDropdownProps) => {
   const [isOpened, setIsOpened] = useState(false);
   const [currentCountry, setCurrentCountry] = useState<Countries>("Australia");
 
@@ -46,10 +48,10 @@ const CountryDropdown = ({ url }: CountryDropdownProps) => {
   }, [url]);
 
   return (
-    <Popover>
+    <Popover className={cx(className)}>
       <Popover.Button
         className={cx(
-          "flex items-center justify-center gap-x-1 rounded-md px-1 py-1 text-sm font-semibold text-ssw-black outline-none xs:px-4",
+          "flex items-center justify-center gap-x-1 rounded-md px-4 py-1 text-sm font-semibold text-ssw-black outline-none xs:px-5",
           "hover:scale-105",
         )}
         onClick={() => setIsOpened(!isOpened)}

lib/components/MegaMenuLayout/MegaMenuLayout.tsx

@@ -16,6 +16,7 @@ import DesktopMenu from "../DesktopMenu/DesktopMenu";
 import { Logo } from "../Logo";
 import MobileMenu from "../MobileMenu/MobileMenu";
 import { PhoneButton } from "../PhoneButton";
+import { Divider } from "../ui/Divider";
 
 export type MegaMenuWrapperProps = {
   className?: ClassValue;
@@ -26,6 +27,7 @@ export type MegaMenuWrapperProps = {
   rightSideActionsOverride?: () => JSX.Element;
   callback?: (searchTerm: string) => void;
   linkComponent?: LinkComponentType;
+  isFlagVisible?: boolean;
 } & React.PropsWithChildren &
   (Tagline | Title);
 
@@ -49,6 +51,7 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
   menuBarItems,
   rightSideActionsOverride,
   callback,
+  isFlagVisible = true,
 }) => {
   const [searchTerm, setSearchTerm] = useState<string>("");
   const performSearch = (e: React.FormEvent<HTMLFormElement>) => {
@@ -114,8 +117,8 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
             ) : (
               <PhoneButton className="max-sm:hidden" />
             )}
-            <CountryDropdown />
-            <Divider />
+            {isFlagVisible && <CountryDropdown />}
+            {isFlagVisible && <Divider />}
             <button
               type="button"
               className="inline-flex items-center justify-center rounded-md px-1 text-gray-700 xs:px-4"
@@ -155,10 +158,6 @@ const MegaMenuContents: React.FC<MegaMenuWrapperProps> = ({
   );
 };
 
-const Divider: React.FC = () => {
-  return <div className="h-4 w-px bg-gray-700/30 sm:block"></div>;
-};
-
 const MegaMenuLayout: React.FC<MegaMenuWrapperProps> = ({
   children,
   ...props

lib/components/MobileMenu/MobileMenu.tsx

@@ -30,12 +30,12 @@ const MobileMenu: React.FC<MobileMenuProps> = ({
   };
   return (
     <Dialog as="div" open={isMobileMenuOpen} onClose={onCloseMobileMenu}>
-      <div className="fixed  inset-0 z-10" />
+      <div className="fixed inset-0 z-10" />
       <Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white sm:max-w-sm sm:ring-1 sm:ring-ssw-black/10 xl:hidden">
-        <div className="flex h-16 flex-row-reverse">
+        <div className="flex h-16 items-center justify-end p-4">
           <button
             type="button"
-            className="p-4 text-gray-700"
+            className="p-2 text-gray-700 xs:p-4"
             onClick={onCloseMobileMenu}
           >
             <span className="sr-only">Close menu</span>

lib/components/ui/Divider.tsx

@@ -0,0 +1,6 @@
+import type { ClassValue } from "clsx";
+import { cx } from "../../util/cx";
+
+export const Divider = ({ className }: { className?: ClassValue }) => (
+  <div className={cx("h-4 w-px bg-gray-700/30", className)}></div>
+);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ssw.megamenu",
-  "version": "4.13.2",
+  "version": "4.13.3",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -87,4 +87,4 @@
     ]
   },
   "packageManager": "pnpm@9.5.0"
-}
+}