Ionic Horizontal &SideMenu Navigation v ReactJS

Kouzlo..

Pro tuto událost jsme uvedli MediaQueryListEvent a dostaneme zpět objekt, který vypadá nějak takto.

MediaQueryListEvent : {
  isTrusted: true, 
  media: "(min-width: 768px)", 
  matches: true,
  ...
}

Hledáme, zda z dotazu získáme shodu, a pokud ano, chceme jednat.

Nastavíme stavovou proměnnou mQuery pomocí useState a inicializoval jej získáním aktuálního okna innerWidth.

const [mQuery, setMQuery] = React.useState<any>({
  matches: window.innerWidth > 768 ? true : false,
});

V naší komponentě budeme naslouchat této události z window objekt voláním window.matchMedia

  useEffect(() => {
    let mediaQuery = window.matchMedia("(min-width: 768px)");
    mediaQuery.addListener(setMQuery);

    // this is the cleanup function to remove the listener
    return () => mediaQuery.removeListener(setMQuery);
  }, []);

addListener volá naši funkci setState, aby podržela výsledky, a změna stavové proměnné způsobí, že se komponenta znovu vykreslí.

Na základě stavové proměnné vykreslíme nabídku hamburgerů nebo seznam tlačítek, která odpovídají položkám boční nabídky

Úplný zdroj pro `NavButtons` komponent

// NavButtons.tsx
export const NavButtons = () => {
const [mQuery, setMQuery] = React.useState<any>({
  matches: window.innerWidth > 768 ? true : false,
});

  useEffect(() => {
    let mediaQuery = window.matchMedia("(min-width: 768px)");
    mediaQuery.addListener(setMQuery);

    // this is the cleanup function to remove the listener
    return () => mediaQuery.removeListener(setMQuery);
  }, []);

  // MediaQueryListEvent { isTrusted: true, media: "(min-width: 768px)", matches: true ...}

  return (
    <div>
      {mQuery && !mQuery.matches ? (
        <IonMenuButton />
      ) : (
        <>
          <IonButton routerLink={"/home"}>Home </IonButton>
          <IonButton routerLink={"/page-1"}>One </IonButton>
          <IonButton routerLink={"/page-2"}>Two</IonButton>
        </>
      )}
    </div>
  );
};

Pak použijeme komponentu v IonToolbar našich stránek, viz příklad níže

// Home.tsx
const Home: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>HOME</IonTitle>
          <IonButtons slot="end">
            <NavButtons/> // <== OUR COMPONENT
          </IonButtons>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
      </IonContent>
    </IonPage>
  );
};

export default Home;

Úplný zdrojový kód projektu na GitHubu

aaronksaunders / sidemenu-topnav-ionic-react