Merge pull request #311 from WestpacGEL/301-gel-docs-home-page-cant-c…

…lose-the-main-menu-in-mobile

closes #301 gel docs home page cant close the main menu in mobile

apps/site/src/app/(home)/components/brand-select/brand-select.component.tsx

@@ -27,13 +27,23 @@ export function BrandSelect(props: BrandSelectProps) {
   const { focusProps, isFocusVisible } = useFocusRing();
   const styles = brandSelectStyles({ isFocusVisible, isOpen: state.isOpen });
 
+  const finalButtonProps = mergeProps(focusProps, buttonProps);
   return (
     <div className={styles.base()}>
       <div {...labelProps} className={styles.label()}>
         {props.label}
       </div>
 
-      <button {...mergeProps(buttonProps, focusProps)} ref={ref} className={styles.button()}>
+      <button
+        {...finalButtonProps}
+        onClick={undefined}
+        onPointerUp={undefined}
+        onPointerDown={() => {
+          state.toggle();
+        }}
+        ref={ref}
+        className={styles.button()}
+      >
         <div className={styles.textWrapper()}>
           <div className="flex w-full items-end gap-[0.625rem] overflow-hidden text-ellipsis py-2" {...valueProps}>
             <GELLogo className="w-[2.8125rem] shrink-0" />

apps/site/src/app/(home)/components/brand-select/brand-select.styles.ts

@@ -10,7 +10,7 @@ export const styles = tv(
       // TODO: this is a workaround to align, but need to find a better way.
       popover: 'w-full',
       // icon: 'text-primary transition-transform',
-      iconWrapper: 'mb-[-0.4rem] flex flex-shrink-0 items-center text-primary',
+      iconWrapper: 'pointer-events-none mb-[-0.4rem] flex flex-shrink-0 touch-none items-center text-primary',
       textWrapper: 'flex flex-shrink items-center overflow-hidden pr-2',
     },
     variants: {