Header with menu click event

const [deviceWidth, setDeviceWidth] = useState("5000");

  function handleMenuClick() {
    alert("Menu not being displayed and you can do anything");
  }

<GoabxRadioGroup
        name="device"
        value={deviceWidth}
        onChange={(event: GoabRadioGroupOnChangeDetail) =>
          setDeviceWidth(event.value)
        }
      >
        <GoabxRadioItem value="600" label="Desktop" />
        <GoabxRadioItem value="5000" label="Mobile" />
      </GoabxRadioGroup>

      <GoabAppHeader
        url="https://example.com"
        heading="Design System"
        onMenuClick={handleMenuClick}
        fullMenuBreakpoint={+deviceWidth}
      >
        <GoabAppHeaderMenu heading="Search" leadingIcon="search">
          <a href="#">Cases</a>
          <a href="#">Payments</a>
          <a href="#">Outstanding</a>
        </GoabAppHeaderMenu>
        <a href="#">Support</a>
        <a href="#" className="interactive">
          Sign in
        </a>
      </GoabAppHeader>

deviceWidth = "5000";

  changeDeviceWidth(event: GoabRadioGroupOnChangeDetail): void {
    this.deviceWidth = event.value;
  }

  handleMenuClick(): void {
    alert("Menu not being displayed and you can do anything");
  }

<goabx-radio-group
  name="device"
  [value]="deviceWidth"
  (onChange)="changeDeviceWidth($event)">
  <goabx-radio-item value="600" label="Desktop"></goabx-radio-item>
  <goabx-radio-item value="5000" label="Mobile"></goabx-radio-item>
</goabx-radio-group>

<goab-app-header
  url="https://example.com"
  heading="Design System"
  [fullMenuBreakpoint]="+deviceWidth"
  (onMenuClick)="handleMenuClick()">
  <goab-app-header-menu heading="Search" leadingIcon="search">
    <a href="#">Cases</a>
    <a href="#">Payments</a>
    <a href="#">Outstanding</a>
  </goab-app-header-menu>
  <a href="#">Support</a>
  <a href="#" class="interactive">Sign in</a>
</goab-app-header>

const radioGroup = document.getElementById("device-radio-group");
const appHeader = document.getElementById("app-header");

radioGroup.addEventListener("_change", (e) => {
  appHeader.setAttribute("full-menu-breakpoint", e.detail.value);
});

appHeader.addEventListener("_menuClick", () => {
  alert("Menu not being displayed and you can do anything");
});

<goa-radio-group version="2" name="device" value="5000" id="device-radio-group">
  <goa-radio-item value="600" label="Desktop"></goa-radio-item>
  <goa-radio-item value="5000" label="Mobile"></goa-radio-item>
</goa-radio-group>

<goa-app-header
  id="app-header"
  url="https://example.com"
  heading="Design System"
  fullmenubreakpoint="5000">
  <goa-app-header-menu heading="Search" leadingicon="search">
    <a href="#">Cases</a>
    <a href="#">Payments</a>
    <a href="#">Outstanding</a>
  </goa-app-header-menu>
  <a href="#">Support</a>
  <a href="#" class="interactive">Sign in</a>
</goa-app-header>