useMainNavigation

The useMainNavigation hook can be used inside the MainNavigation to access and control the state of the Navigation. It allows you to access the context of the MainNavigation which stores the state of the MainNavigation.

Usage

import { useMainNavigation } from "@wfp/react";

function ComponentInsideMainNavigation() {
  const { onChangeSub, activeMenuItem, openMobileMenu, toggleMenu } =
    useMainNavigation();

  return <Button onClick={() => toggleMenu()}>Toggle Menu</Button>;
}

Return value definitions

export interface MainNavigationContextType {
  /**
   * Callback when the user clicks on a sub menu item
   */
  onChangeSub: (action: string, i?: string, event?: any) => void;
  /**
   * The active menu item
   */
  activeMenuItem?: string | null;
  /**
   * Whether the mobile menu is open
   */
  openMobileMenu: boolean;
  /**
   * Toggle the mobile menu
   */
  toggleMenu: () => void;
}

`onChangeSub`

The action can be toggle or close. i is the ID (number) of the SubMenuItem that should be triggered. Optionally add the native event to prevent it's default behaviour.

toggleFirstSubMenuItem = () => {
  onChangeSub("toggle", 0);
};

closeMenu = () => {
  onChangeSub("close");
};

`activeMenuItem`

Returns the index of the currently active SubMenuItem. Returns null if no SubMenu is opened.

const { activeMenuItem } = useMainNavigation();

`toggleMenu`

TODO: Rename the function name to toggleMobileMenu, also add true/false optional.

The toggleMenu function allows you to toggle mobile navigation

const toggleMenu = () => {
  setOpenMobileMenu(!openMobileMenu);
};

`openMobileMenu`

Opens or closes the mobile navigation.

setOpenMobileMenu(true);