Function NavWrapper

data-browser/src/components/Navigation.tsx:29–54

({ children }: NavWrapperProps)

/** Wraps the entire app and adds a navbar at the bottom or the top */
export function NavWrapper({ children }: NavWrapperProps): JSX.Element {
  const { navbarTop, navbarFloating } = useSettings();
  const contentRef = React.useRef(null);
  const location = useLocation();

  useEffect(() => {
    contentRef?.current?.scrollTo(0, 0);
  }, [location]);

  return (
    <>
      {navbarTop && <NavBar />}
      <SideBarWrapper>
        <SideBar />
        <Content
          ref={contentRef}
          navbarTop={navbarTop}
          navbarFloating={navbarFloating}
        >
          {children}
        </Content>
      </SideBarWrapper>
      {!navbarTop && <NavBar />}
    </>
  );
}

interface ContentProps {
  navbarTop: boolean;