molecular_frontend/src/App.tsx

import "./App.css";

import { AppShell, useMantineTheme } from "@mantine/core";

import Header from "Components/Layout/Header/Header";
import "@mantine/notifications/styles.css";
import "@mantine/core/styles.css";
import { Notifications } from "@mantine/notifications";
import { useLayoutStore } from "Stores/LayoutStore";
import Sidebar from "Components/Layout/Sidebar/Sidebar";
import { Outlet, useLocation } from "react-router";
import { Helmet } from "react-helmet";
import { useEffect } from "react";
import { useMediaQuery } from "@mantine/hooks";
import BreadCrumbs from "Routes/Breadcrumbs/Breadcrumbs";
import keycloak from "Api/Keycloak/Keycloak";
import { AuthenticationStore } from "Stores/AuthenticationStore";
function App() {
  const { is_navbar_open, set_navbar_open } = useLayoutStore();
  const { set_token } = AuthenticationStore();
  const theme = useMantineTheme();

  const location = useLocation();
  const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm}`);

  useEffect(() => {
    if (isMobile)
      setTimeout(() => {
        set_navbar_open(false);
      }, 100);
  }, [location]);

  useEffect(() => {
    const refreshToken = () => {
      keycloak
        .updateToken(60)
        .then((refreshed) => {
          if (refreshed) {
            set_token(keycloak.token);
          }
        })
        .catch(() => {
          keycloak.logout();
        });
    };

    setInterval(refreshToken, 30000);
  }, []);

  return (
    <>
      <Helmet>
        <title>QMolSim</title>
        <meta
          name="description"
          content="Compute ground state energy of molecules using a distributed system"
        />
      </Helmet>

      <Notifications />

      <AppShell
        header={{ height: 50 }}
        aside={{
          width: 280,
          breakpoint: "sm",
          collapsed: {
            desktop: !is_navbar_open,
            mobile: !is_navbar_open,
          },
        }}
        padding="md"
        transitionDuration={100}
      >
        <AppShell.Header id="Header" zIndex={1000}>
          <Header />
        </AppShell.Header>

        <AppShell.Aside id="Navbar">
          <Sidebar />
        </AppShell.Aside>

        <AppShell.Main className="body">
          <>
            <BreadCrumbs />
            <Outlet />
          </>
        </AppShell.Main>
      </AppShell>
    </>
  );
}

export default App;