@material-ui/core#Backdrop TypeScript Examples

function Airdrop({ merkleIndex }: any) {
    return (
        <Grid className="airdrop-view">
            <Backdrop open={true}>
                <Fade in={true}>
                    <div className="bond-card">
                        <AirdropHeader />
                        <AirdropClaim merkleIndex={merkleIndex} />
                    </div>
                </Fade>
            </Backdrop>
        </Grid>
    );
}

CustomModal: React.FC<CustomModalProps> = ({
  open,
  onClose,
  children,
  background,
  overflow,
}) => {
  const classes = useStyles({ background, overflow });
  return (
    <Modal
      open={open}
      onClose={onClose}
      BackdropComponent={Backdrop}
      BackdropProps={{ timeout: 500 }}
    >
      <Fade in={open}>
        <Box className={classes.wrapper}>{children}</Box>
      </Fade>
    </Modal>
  );
}

LoadingProvider = ({ children }: PropsWithChildren<{}>) => {
  const classes = useStyles();
  const actions = INITIAL_LOADING_ACTIONS;
  const [state, dispatch] = useReducer(reducer, getDefaultState(actions));
  const [isBackdropVisible, setBackdropVisible] = useState(false);

  useEffect(() => {
    function displayLoadingBackdrop() {
      // Initial page loading is handled by progress bar
      setBackdropVisible(
        !state[DefaultLoadingAction.CostInsightsInitial] &&
          Object.values(state).some(l => l),
      );
    }
    displayLoadingBackdrop();
  }, [state, setBackdropVisible]);

  return (
    <LoadingContext.Provider value={{ state, actions, dispatch }}>
      {children}
      <Backdrop open={isBackdropVisible} classes={classes}>
        <CircularProgress />
      </Backdrop>
    </LoadingContext.Provider>
  );
}

PlanDetails = ({ plan, open, handleClose }: PlanDetailsProps) => (
  <StyledModal
    aria-labelledby="transition-modal-title"
    aria-describedby="transition-modal-description"
    open={open}
    onClose={handleClose}
    closeAfterTransition
    BackdropComponent={Backdrop}
    BackdropProps={{
      timeout: 500,
    }}
  >
    <Fade in={open}>
      <TableContainer component={LightPaper}>
        <Table size="small">
          <TableBody>{detailRows(plan)}</TableBody>
        </Table>
      </TableContainer>
    </Fade>
  </StyledModal>
)

function App() {
  const { connections } = useConnections([connectionDetails1, connectionDetails2]);

  if (isEmpty(connections)) {
    return (
      <Backdrop open>
        <CircularProgress color="inherit" />
      </Backdrop>
    );
  }

  return (
    <SourceTargetContextProvider connections={connections}>
      <KeyringContextProvider>
        <SubscriptionsContextProvider>
          <GUIContextProvider>
            <ApiCallsContextProvider>
              <AccountContextProvider>
                <MessageContextProvider>
                  <SnackbarProvider>
                    <TransactionContextProvider>
                      <BrowserRouter>
                        <Switch>
                          <Route path={'/'}>
                            <Main />
                          </Route>
                        </Switch>
                      </BrowserRouter>
                    </TransactionContextProvider>
                  </SnackbarProvider>
                </MessageContextProvider>
              </AccountContextProvider>
            </ApiCallsContextProvider>
          </GUIContextProvider>
        </SubscriptionsContextProvider>
      </KeyringContextProvider>
    </SourceTargetContextProvider>
  );
}

function RouteLoadingFallback() {
  return <Backdrop open={true}>
    <CircularProgress color="inherit" />
  </Backdrop>;
}

function Bond({ bond }: IBondProps) {
    const { provider, address } = useWeb3Context();

    const [slippage, setSlippage] = useState(0.5);
    const [recipientAddress, setRecipientAddress] = useState(address);

    const [view, setView] = useState(0);

    const isBondLoading = useSelector<IReduxState, boolean>(state => state.bonding.loading ?? true);

    const onRecipientAddressChange = (e: any) => {
        return setRecipientAddress(e.target.value);
    };

    const onSlippageChange = (e: any) => {
        return setSlippage(e.target.value);
    };

    useEffect(() => {
        if (address) setRecipientAddress(address);
    }, [provider, address]);

    const changeView = (newView: number) => () => {
        setView(newView);
    };

    return (
        <Grid className="bond-view">
            <Backdrop open={true}>
                <Fade in={true}>
                    <div className="bond-card">
                        <BondHeader
                            bond={bond}
                            slippage={slippage}
                            recipientAddress={recipientAddress}
                            onSlippageChange={onSlippageChange}
                            onRecipientAddressChange={onRecipientAddressChange}
                        />
                        {/* @ts-ignore */}
                        <Box direction="row" className="bond-price-data-row">
                            <div className="bond-price-data">
                                <p className="bond-price-data-title">Mint Price</p>
                                <p className="bond-price-data-value">{isBondLoading ? <Skeleton /> : `$${trim(bond.bondPrice, 2)}`}</p>
                            </div>
                            <div className="bond-price-data">
                                <p className="bond-price-data-title">{TOKEN_NAME} Price</p>
                                <p className="bond-price-data-value">{isBondLoading ? <Skeleton /> : `$${trim(bond.marketPrice, 2)}`}</p>
                            </div>
                        </Box>

                        <div className="bond-one-table">
                            <div className={classnames("bond-one-table-btn", { active: !view })} onClick={changeView(0)}>
                                <p>Mint</p>
                            </div>
                            <div className={classnames("bond-one-table-btn", { active: view })} onClick={changeView(1)}>
                                <p>Redeem</p>
                            </div>
                        </div>

                        <TabPanel value={view} index={0}>
                            <BondPurchase bond={bond} slippage={slippage} recipientAddress={recipientAddress} />
                        </TabPanel>

                        <TabPanel value={view} index={1}>
                            <BondRedeem bond={bond} />
                        </TabPanel>
                    </div>
                </Fade>
            </Backdrop>
        </Grid>
    );
}

function Bond({ bond }: IBondProps) {
    const { address } = useWeb3Context();

    const [slippage, setSlippage] = useState(0.5);

    const [view, setView] = useState(0);

    const isBondLoading = useSelector<IReduxState, boolean>(state => state.bonding.loading ?? true);

    const onSlippageChange = (value: any) => {
        return setSlippage(value);
    };

    const changeView = (newView: number) => () => {
        setView(newView);
    };

    return (
        <Fade in={true} mountOnEnter unmountOnExit>
            <Grid className="bond-view">
                <Backdrop open={true}>
                    <Fade in={true}>
                        <div className="bond-card">
                            <BondHeader bond={bond} slippage={slippage} onSlippageChange={onSlippageChange} />
                            {/* @ts-ignore */}
                            <Box direction="row" className="bond-price-data-row">
                                <div className="bond-price-data">
                                    <p className="bond-price-data-title">Mint Price</p>
                                    <p className="bond-price-data-value">
                                        {isBondLoading ? <Skeleton /> : bond.isLP || bond.name === "wavax" ? `$${trim(bond.bondPrice, 2)}` : `${trim(bond.bondPrice, 2)} MIM`}
                                    </p>
                                </div>
                                <div className="bond-price-data">
                                    <p className="bond-price-data-title">TIME Price</p>
                                    <p className="bond-price-data-value">{isBondLoading ? <Skeleton /> : `$${trim(bond.marketPrice, 2)}`}</p>
                                </div>
                            </Box>

                            <div className="bond-one-table">
                                <div className={classnames("bond-one-table-btn", { active: !view })} onClick={changeView(0)}>
                                    <p>Mint</p>
                                </div>
                                <div className={classnames("bond-one-table-btn", { active: view })} onClick={changeView(1)}>
                                    <p>Redeem</p>
                                </div>
                            </div>

                            <TabPanel value={view} index={0}>
                                <BondPurchase bond={bond} slippage={slippage} />
                            </TabPanel>

                            <TabPanel value={view} index={1}>
                                <BondRedeem bond={bond} />
                            </TabPanel>
                        </div>
                    </Fade>
                </Backdrop>
            </Grid>
        </Fade>
    );
}

export default function UserProvider({ children, isFirebaseInit }: any) {
  const { openSnack } = useContext(SnackbarContext);
  const routerContext = useContext(RouterContext);
  const routerRef = useRef(routerContext);
  useEffect(() => {
    routerRef.current = routerContext;
  }, [routerContext]);

  const [user, setUser] = useState<{ _id: string, username: string, isAnonymous: boolean } | null>(null);

  const [isProviderSigningIn, setIsProviderSigningIn] = useState(false);
  const [isLoadingAuth, setIsLoadingAuth] = useState(true);
  const [isLoading, setIsLoading] = useState(true);
  const [renewData, isRenewing, , renew] = useFetchData<any>(`/api/login/renew`, FetchType.PUT);
  const [, , , logoutHttp] = useFetchData<any>(`/api/logout`, FetchType.PUT);
  const [loginData, isSigningin, , next] = useFetchData<any>(`/api/login`, FetchType.POST);

  const logout = useCallback(_logout, [setUser, logoutHttp]);

  const [authUser, setAuthUser] = useState<any | null>(null);
  const login = useCallback(_login, [next, authUser]);
  useEffect(() => {
    // get the initial state of the user.
    let unsubscribe: any;
    if (isFirebaseInit) {
      unsubscribe = firebase.auth().onAuthStateChanged((_user) => {
        if (_user) {
          _user.getIdToken(true).then(() => {
            const { uid, displayName, photoURL, email, emailVerified, phoneNumber, isAnonymous } = _user;
            setAuthUser({ uid, displayName, photoURL, email, emailVerified, phoneNumber, isAnonymous });
            setIsProviderSigningIn(false);
          })
        } else {
          setAuthUser(null);
          if (routerRef.current.location.pathname !== '/') {
            routerRef.current.history.push('/login')
          }
        }
        setIsLoadingAuth(false)
      });
    }

    return () => {
      if (unsubscribe) {
        unsubscribe()
      }
    }
  }, [isFirebaseInit]);

  useEffect(() => {
    setInterval(() => {
      firebase.auth().currentUser?.getIdToken(true)
        .catch(() => { });
      // Refresh token every 30 minutes.
    }, 60000 * 30)
  }, [])

  // called after it is determined whether a firebase user is logged in.
  useEffect(() => {
    // if there is an auth user. Try login.
    if (authUser && renew) {
      renew({}, false)
        .catch((err) => {
          if (err.message === 'Network Error') {
            // api servers are down, redirect to /rooms to see the error page.
            routerRef.current.history.push('/rooms');
            return;
          }
        })
    }
  }, [authUser, renew, next]);

  // Called once renewed or logged in.
  useEffect(() => {
    if (renewData) {
      setUser(renewData);
    } else if (loginData) {
      setUser(loginData);
    }
  }, [loginData, renewData])

  // called once the users data is fetched.
  useEffect(() => {
    // if loginData exists, continue to the application.
    if (user && authUser) {
      openSnack({ text: 'Successfully logged in!', severity: 'success' })
      redirect();
    }
  }, [user, authUser, openSnack]);

  // Handle smoother transitions between multiple loading states
  useEffect(() => {
    const newIsLoading = isLoadingAuth || isRenewing || isSigningin || isProviderSigningIn;
    let timeout: NodeJS.Timeout;
    // If the next loading state is false. Set a timeout.
    if (!newIsLoading) {
      timeout = setTimeout(() => {
        setIsLoading(false);
      }, 1000);
    } else {
      setIsLoading(true);
    }

    return () => {
      if (timeout) {
        clearTimeout(timeout);
      }
    };
  }, [isLoadingAuth, isRenewing, isSigningin, isProviderSigningIn])

  function redirect() {
    if (!routerRef?.current) {
      return;
    }

    const { prevLocation, history } = routerRef.current;
    // If there's no prevLocation (first request) and the path doesn't equal login. Go to desired path.
    if (!prevLocation && history.location.pathname !== '/login') {
      return;
    }

    let redirectPath = '/rooms';
    if (prevLocation) {
      const userDest = `${prevLocation.pathname}${prevLocation.search}`;
      if (userDest !== '/login' && userDest !== '/') {
        redirectPath = userDest;
      }
    }

    history.push(redirectPath);
  }

  function isPhoneOrTablet() {
    let check = false;
    // eslint-disable-next-line no-useless-escape
    (function (a) { if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true; })(navigator.userAgent || navigator.vendor || (window as any).opera);
    return check;
  }

  function signup(providerStr: string): Promise<any> {
    setIsProviderSigningIn(true);
    // here we should handle the different sign up types.
    if (providerStr === 'anonymous') {
      return firebase.auth().signInAnonymously()
        .catch((err) => { });
    }

    let provider: firebase.auth.GoogleAuthProvider | firebase.auth.FacebookAuthProvider;
    if (providerStr === 'facebook') {
      provider = new firebase.auth.FacebookAuthProvider();
    } else {
      // must be google.
      provider = new firebase.auth.GoogleAuthProvider();
    }

    if (isPhoneOrTablet()) {
      return firebase.auth().signInWithRedirect(provider)
        .catch(err => { });
    }

    return firebase.auth().signInWithPopup(provider)
      .catch(err => { });
  }

  function _login(username: string) {
    return next({ username, ...authUser });
  }

  function _logout() {
    const handleComplete = () => {
      setUser(null);
      setAuthUser(null);
      routerRef.current.history.push('/');
      document.cookie = 'auth=;'
    };

    return firebase.auth().signOut()
      .then(() => logoutHttp())
      .then(() => {
        handleComplete();
      })
      .catch(() => {
        handleComplete();
      })
  }

  return <UserContext.Provider value={{ login: (login as any), logout, user, authUser, signup }}>
    {isLoading ? null : children}
    <Backdrop className="backdrop" open={isLoading}>
      <CircularProgress color="inherit" />
    </Backdrop>
  </UserContext.Provider>
}

export default function GameManager() {
  const { openSnack } = useContext(SnackbarContext);
  const [clientId, room, isHost, isCzar, game, cards, players, , isLoading, , showPasswordDialog, joinRoom, disconnected, reconnecting] = useGameRoom(openSnack);
  const [, , , leave] = useFetchData(`/api/rooms/leave`, FetchType.PUT);
  const [, , , startGame] = useFetchData(`/api/games/start`, FetchType.PUT);
  const [, , , submitCards] = useFetchData(`/api/games/cards`, FetchType.POST);
  const [, , , selectWinner] = useFetchData(`/api/games/winner`, FetchType.POST);
  const { history } = useContext(RouterContext);
  const onLeave = useCallback(_onLeave, [room, leave, history]);
  const onGameStart = useCallback(_onGameStart, [room, startGame, openSnack]);
  const onCardsSubmit = useCallback(_onCardsSubmit, [room, submitCards, clientId, openSnack]);
  const onWinnerSelect = useCallback(_onWinnerSelect, [room, clientId, selectWinner, openSnack]);


  function _onLeave() {
    leave({ roomId: room?._id })
      .then(() => {
        (window as any)?.gtag('event', 'game_leave');
        history.push('/rooms');
      })
      .catch(() => {
        history.push('/rooms');
        // handle toasty error.
      })
  }

  function _onGameStart() {
    startGame({ roomId: room?._id })
      .then(() => {
        (window as any)?.gtag('event', 'game_started');
      })
      .catch((err) => {
        openSnack({ text: err?.response?.data?.message, severity: 'error' });
      })
  }

  function _onCardsSubmit(cards: string[]) {
    return submitCards({ roomId: room._id, clientId, cards })
      .then((res) => {
        (window as any)?.gtag('event', 'cards_selected', { value: cards.length });
        return res;
      })
      .catch(err => {
        openSnack({ text: err?.response?.data?.message, severity: 'error' });
      })
  }

  function _onWinnerSelect(winnerId: string) {
    return selectWinner({ roomId: room._id, clientId, winnerId })
      .then(res => {
        (window as any)?.gtag('event', 'winner_selected');
        return res;
      })
      .catch(err => {
        openSnack({ text: err?.response?.data?.message, severity: 'error' });
        return null;
      })
  }

  function renderMain() {
    if (isLoading || showPasswordDialog) {
      // Joining room.
      return <Backdrop open={true}>
        <CircularProgress color="inherit" />
      </Backdrop>
    }

    return <GameContainer key={game?.state} host={room?.host} isHost={isHost} roomName={room?.name} players={players} onLeave={onLeave} cards={cards} isCzar={isCzar} onCardsSubmit={onCardsSubmit} game={game} room={room} openSnack={openSnack}>
      {room?.status === 'pending' ?
        <Pending isHost={isHost} numberOfPlayers={players.length} startGame={onGameStart} room={room} /> :
        <Game players={players} game={game} isCzar={isCzar} onWinnerSelect={onWinnerSelect} />
      }
    </GameContainer>
  }

  if (disconnected || reconnecting) {

    return <div className="game-disconnected">
      <GenericGardGroup
        leftCardText="Game Disconnected!"
        leftCardChild={
          reconnecting ? <Typography className="reconnecting-typog"> Reconnecting<CircularProgress /></Typography> : <Button color="secondary" variant="contained" onClick={() => history.push('/login')}>Reconnect</Button>
        }
        rightCardText="Ensure you do not have more than one instance of the game open."
      />
    </div>
  }

  return <Container className="game-manager-container" maxWidth="xl">
    {renderMain()}
    {showPasswordDialog ? <PasswordDialog isDialogOpen={true} onSubmit={joinRoom} onClose={() => history.push('/rooms')} /> : null}
  </Container>
}

function Bond({ bond }: IBondProps) {
  const { provider, address } = useWeb3Context();

  const [slippage, setSlippage] = useState(0.5);
  const [recipientAddress, setRecipientAddress] = useState(address);

  const [view, setView] = useState(0);

  const isBondLoading = useSelector<IReduxState, boolean>(state => state.bonding.loading ?? true);

  const onRecipientAddressChange = (value: any) => {
    return setRecipientAddress(value);
  };

  const onSlippageChange = (value: any) => {
    return setSlippage(value);
  };

  useEffect(() => {
    if (address) setRecipientAddress(address);
  }, [provider, address]);

  const changeView = (newView: number) => () => {
    setView(newView);
  };

  return (
    <Fade in={true} mountOnEnter unmountOnExit>
      <Grid className="bond-view">
        <Backdrop open={true}>
          <Fade in={true}>
            <div className="bond-card">
              <BondHeader
                bond={bond}
                slippage={slippage}
                recipientAddress={recipientAddress}
                onSlippageChange={onSlippageChange}
                onRecipientAddressChange={onRecipientAddressChange}
              />
              {/* @ts-ignore */}
              <Box direction="row" className="bond-price-data-row">
                <div className="bond-price-data">
                  <p className="bond-price-data-title">Mint Price</p>
                  <p className="bond-price-data-value">
                    {isBondLoading ? (
                      <Skeleton />
                    ) : bond.available ? (
                      "Sold Out - Please Claim"
                    ) : bond.isLP || bond.name === "wavax" ? (
                      `$${trim(bond.bondPrice, 2)}`
                    ) : (
                      `$${trim(bond.bondPrice, 2)}`
                    )}
                  </p>
                </div>
                <div className="bond-price-data">
                  <p className="bond-price-data-title">RUG Price</p>
                  <p className="bond-price-data-value">
                    {isBondLoading ? <Skeleton /> : `$${trim(bond.marketPrice, 2)}`}
                  </p>
                </div>
              </Box>

              <div className="bond-one-table">
                {bond.available ? (
                  <>
                    <div className={classnames("bond-one-table-btn", { active: !view })} onClick={changeView(0)}>
                      <p>Mint</p>
                    </div>
                    <div className={classnames("bond-one-table-btn", { active: view })} onClick={changeView(1)}>
                      <p>Redeem</p>
                    </div>
                  </>
                ) : (
                  <div className={classnames("bond-one-table-btn", { active: !view })}>
                    <p>Redeem</p>
                  </div>
                )}
              </div>
              {bond.available ? (
                <>
                  <TabPanel value={view} index={0}>
                    <BondPurchase bond={bond} slippage={slippage} recipientAddress={recipientAddress} />
                  </TabPanel>

                  <TabPanel value={view} index={1}>
                    <BondRedeem bond={bond} />
                  </TabPanel>
                </>
              ) : (
                <TabPanel value={view} index={0}>
                  <BondRedeem bond={bond} />
                </TabPanel>
              )}
            </div>
          </Fade>
        </Backdrop>
      </Grid>
    </Fade>
  );
}

export function AdrBrowserLayout({
  projectName,
  adrs,
  adrsReloading = false,
  currentAdr,
  children,
  routing = false,
  l4bVersion
}: AdrBrowserLayoutProps) {
  const classes = useStyles();
  const router = useRouter();

  const [mobileDrawerOpen, setMobileDrawerOpen] = React.useState(false);

  const handleMobileDrawerToggle = () => {
    setMobileDrawerOpen(!mobileDrawerOpen);
  };

  React.useEffect(() => {
    const closeMobileDrawer = () => setMobileDrawerOpen(false);
    router?.events.on("routeChangeStart", closeMobileDrawer);
    return () => {
      router?.events.off("routeChangeStart", closeMobileDrawer);
    };
  }, [router]);

  const [searchOpen, setSearchOpenState] = React.useState(false);
  const [searchReallyOpen, setSearchReallyOpenState] = React.useState(false);

  const drawer = (
    <div className={classes.drawerContainer}>
      <Toolbar className={classes.drawerToolbar}>
        <div />
        <Link href="/" passHref>
          <IconButton
            size="small"
            color="inherit"
            aria-label="go to homepage"
            title={`Architecture knowledge base of ${projectName}`}
          >
            <img
              src={`${router?.basePath}/l4b-static/Log4brains-logo.png`}
              alt="Log4brains logo"
              width={40}
              height={40}
            />
          </IconButton>
        </Link>
        <IconButton
          size="small"
          color="inherit"
          aria-label="close drawer"
          title="Close"
          onClick={handleMobileDrawerToggle}
        >
          <CloseIcon fontSize="small" />
        </IconButton>
      </Toolbar>

      <div className={classes.adlTitleAndSpinner}>
        <Typography variant="subtitle2" className={classes.adlTitle}>
          Decision log
        </Typography>

        <Fade in={adrsReloading}>
          <CircularProgress size={13} />
        </Fade>
      </div>

      <Grow in={adrs !== undefined} style={{ transformOrigin: "center left" }}>
        <AdrMenu
          adrs={adrs}
          currentAdrSlug={currentAdr?.slug}
          className={classes.adrMenu}
        />
      </Grow>

      {adrs === undefined && (
        <CircularProgress size={30} className={classes.adrMenuSpinner} />
      )}

      <List className={classes.bottomMenuList}>
        {/* <Divider />
      <ListItem button>
        <ListItemIcon>
          <ChevronRightIcon />
        </ListItemIcon>
        <ListItemText>
          <Badge badgeContent={0} color="primary">
            <Typography>Filters</Typography>
          </Badge>
        </ListItemText>
      </ListItem> */}
        {/* <Divider />
      <Link href="/decision-backlog" passHref>
        <ListItem button selected={backlog} component="a">
          <ListItemIcon>
            <PlaylistAddCheckIcon />
          </ListItemIcon>
          <ListItemText primary="Decision backlog" />
        </ListItem>
      </Link> */}
      </List>
    </div>
  );

  return (
    <div className={classes.root}>
      <AppBar position="fixed" className={classes.appBar}>
        {routing && <RoutingProgress />}
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            edge="start"
            onClick={handleMobileDrawerToggle}
            className={classes.appBarMenuButton}
          >
            <MenuIcon />
          </IconButton>
          <Link href="/">
            <div className={classes.appBarTitle}>
              <div>
                <img
                  src={`${router?.basePath}/l4b-static/Log4brains-logo-dark.png`}
                  alt="Log4brains logo"
                  width={50}
                  height={50}
                />
              </div>
              <div>
                <Link href="/" passHref>
                  <MuiLink
                    variant="h6"
                    noWrap
                    className={classes.appBarTitleLink}
                  >
                    {projectName}
                  </MuiLink>
                </Link>
                <Link href="/" passHref>
                  <MuiLink
                    variant="body2"
                    noWrap
                    className={classes.appBarTitleLink}
                  >
                    Architecture knowledge base
                  </MuiLink>
                </Link>
              </div>
            </div>
          </Link>
          <div className={classes.layoutLeftCol} />
          <div className={clsx(classes.layoutCenterCol)}>
            <Backdrop open={searchOpen} className={classes.searchBackdrop} />
            <NoSsr>
              <ConnectedSearchBox
                onOpen={() => {
                  setSearchOpenState(true);
                  // Delayed real opening because otherwise the dropdown width is bugged
                  setTimeout(
                    () => setSearchReallyOpenState(true),
                    searchTransitionDuration + 100
                  );
                }}
                onClose={() => {
                  setSearchOpenState(false);
                  setSearchReallyOpenState(false);
                }}
                open={searchReallyOpen}
                className={clsx(classes.searchBox, {
                  [classes.searchBoxOpen]: searchOpen
                })}
              />
            </NoSsr>
          </div>
          <div className={classes.layoutRightCol} />
        </Toolbar>
      </AppBar>

      <nav
        className={classes.drawer}
        aria-label="architecture decision records list"
      >
        <Hidden smUp implementation="css">
          <Drawer
            variant="temporary"
            anchor="left"
            open={mobileDrawerOpen}
            onClose={handleMobileDrawerToggle}
            classes={{
              paper: classes.drawerPaper
            }}
            ModalProps={{
              keepMounted: true // Better open performance on mobile.
            }}
          >
            {drawer}
          </Drawer>
        </Hidden>
        <Hidden xsDown implementation="css">
          <Drawer
            variant="permanent"
            open
            classes={{
              paper: classes.drawerPaper
            }}
          >
            {drawer}
          </Drawer>
        </Hidden>
      </nav>

      <div className={classes.container}>
        <Toolbar />
        <main className={classes.content}>
          <AdrNavContext.Provider
            value={currentAdr && adrs ? buildAdrNav(currentAdr, adrs) : {}}
          >
            {children}
          </AdrNavContext.Provider>
        </main>
        <footer className={classes.footer}>
          <div className={classes.layoutLeftCol} />
          <div className={clsx(classes.layoutCenterCol, classes.footerContent)}>
            <Typography className={classes.footerText}>
              Powered by{" "}
              <MuiLink
                href="https://github.com/thomvaill/log4brains"
                className={classes.footerLink}
                target="_blank"
                rel="noopener"
              >
                Log4brains
              </MuiLink>{" "}
              <span style={{ fontSize: "0.8em" }}>
                {l4bVersion ? `(v${l4bVersion})` : null}
              </span>
            </Typography>
          </div>
          <div className={classes.layoutRightCol} />
        </footer>
      </div>
    </div>
  );
}