set up auth for side nav to display conditionally

submit-web/src/components/Shared/layout/SideNav/BreadcrumbNav.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Box, Breadcrumbs, Typography } from "@mui/material";
-import { Link, useRouter } from "@tanstack/react-router";
+import { Link, useRouter, useRouterState } from "@tanstack/react-router";
 import { theme } from "@/styles/theme";
 
 interface RouteSegment {
@@ -20,8 +20,8 @@ const filterUniqueRoutes = (breadcrumbs: RouteSegment[]) => {
 };
 
 const BreadcrumbNav: React.FC = () => {
-  const router = useRouter();
-  const breadcrumbs = router.state.matches.map((match) => {
+  const router = useRouterState();
+  const breadcrumbs = router.matches.map((match) => {
     const { meta, pathname } = match;
     if (meta)
       return {

submit-web/src/routes/__root.tsx

@@ -19,20 +19,21 @@ export const Route = createRootRouteWithContext<RouterContext>()({
   meta: () => [{ title: "Home" }],
 });
 function Layout() {
-  const isMobile = useIsMobile();
   const { isAuthenticated } = useAuth();
-
+  const isMobile = useIsMobile();
   return (
     <>
       <EAOAppBar />
-      <BreadcrumbNav />
+      {isAuthenticated && <BreadcrumbNav />}
       <Box
         height={"calc(100vh - 88px)"}
-        width={isMobile ? "100%" : "calc(100vw)"}
-        flexDirection={"row"}
+        width={
+          isMobile ? "100%" : `calc(100vw - ${isAuthenticated ? 240 : 0}px)`
+        }
+        flexDirection={isAuthenticated ? "column" : "row"}
         display={"flex"}
       >
-        {<SideNavBar />}
+        {isAuthenticated && <SideNavBar />}
         <Outlet />
       </Box>
       <Footer />