import { Outlet, useNavigation } from "react-router";
import { HydrateFallback } from "../HydrateFallback";
import { AppBar } from "../AppBar";
import styled from "styled-components";

const StyledContainer = styled.div`
  padding-bottom: 90px;
  box-sizing: border-box;
`;
export const AppBarLayout = () => {
  const navigation = useNavigation();
  const loading = navigation.state === 'loading';
  return loading ? <HydrateFallback /> : (<StyledContainer>
    <Outlet />
    <AppBar />
  </StyledContainer>);
}