Don't add 200px left margin for toolbar on sign-in page. (#404)

Author: mrabbitt

src/components/layout/Layout.module.css

@@ -45,7 +45,7 @@
 
 /* Medium Devices, Desktops */
 @media only screen and (min-width: 992px) {
-  .main {
+  .main.hasNavBar {
     margin-left: 200px;
   }
 }

src/components/layout/Layout.tsx

@@ -3,18 +3,21 @@ import NavBar from "../navbar/NavBar";
 import $layout from "./Layout.module.css";
 import { useRouter } from "next/router";
 import { requiresLogin } from "@/client/lib/authenticated-page";
+import { useSession } from "next-auth/react";
 
 interface LayoutProps {
   children: React.ReactNode;
 }
 
 const Layout = ({ children }: LayoutProps) => {
   const router = useRouter();
+  const { status } = useSession();
   // TODO?: Are there better ways to achieve this?
   //Sets purple background for student profile and instructions routes
   const isPurpleBg =
     router.asPath.includes("/studentprofile") ||
     router.asPath.includes("/instructions");
+  const hasNavBar = "authenticated" == status;
 
   return (
     <div className={$layout.container}>
@@ -24,7 +27,8 @@ const Layout = ({ children }: LayoutProps) => {
         ${router.query.student_id ? $layout.mainStudent : ""}
         ${router.query.goal_id ? $layout.mainGoal : ""}
         ${router.query.user_id ? $layout.mainStaff : ""}
-        ${router.pathname.includes("benchmarks") ? $layout.mainPurple : ""}`}
+        ${router.pathname.includes("benchmarks") ? $layout.mainPurple : ""}
+        ${hasNavBar ? $layout.hasNavBar : ""}`}
       >
         {children}
       </main>