Merge branch 'main' of https://github.com/sfbrigade/compass into abou…

…t-page

.gitignore

@@ -10,6 +10,7 @@ coverage
 build
 .terraform*
 terraform.tfstate*
+!.terraform.lock.hcl
 
 # Ignore all .env files except .env.example
 .env*

src/backend/auth/options.ts

@@ -1,13 +1,19 @@
 import GoogleProvider from "next-auth/providers/google";
 import { createPersistedAuthAdapter } from "@/backend/auth/adapter";
 import { KyselyDatabaseInstance } from "../lib";
+import type { NextAuthOptions } from "next-auth";
 
-export const getNextAuthOptions = (db: KyselyDatabaseInstance) => ({
+export const getNextAuthOptions = (
+  db: KyselyDatabaseInstance
+): NextAuthOptions => ({
   providers: [
     GoogleProvider({
       clientId: process.env.GOOGLE_CLIENT_ID as string,
       clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
     }),
   ],
   adapter: createPersistedAuthAdapter(db),
+  pages: {
+    signIn: "/signInPage",
+  },
 });

src/components/layout/Layout.module.css

@@ -11,7 +11,7 @@
   color: var(--on-background);
   height: 100%;
   width: 100%;
-  padding: 1em;
+  padding: 5em 3em 3em 3em;
 }
 
 .mainPurple {
@@ -24,18 +24,27 @@
   background-color: var(--grey-80);
 }
 
+/* @media only screen and (max-width: 480px) {
+  .main {
+    padding: 5em 3em 3em 3em;
+  }
+} */
+
 @media only screen and (min-width: 480px) {
+  .main {
+    padding: 5em 3em 3em 3em;
+  }
 }
 
 /* Small Devices, Tablets */
 @media only screen and (min-width: 768px) {
+  .main {
+    padding: 5em 3em 3em 3em;
+  }
 }
 
 /* Medium Devices, Desktops */
 @media only screen and (min-width: 992px) {
-  .main {
-    padding: 5em;
-  }
 }
 
 /* Large Devices, Wide Screens */

src/components/navbar/NavBar.tsx

@@ -1,4 +1,22 @@
-import React from "react";
+import CloseIcon from "@mui/icons-material/Close";
+import CoPresent from "@mui/icons-material/CoPresent";
+import Logout from "@mui/icons-material/Logout";
+import MenuIcon from "@mui/icons-material/Menu";
+import PeopleOutline from "@mui/icons-material/PeopleOutline";
+import Settings from "@mui/icons-material/Settings";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Drawer from "@mui/material/Drawer";
+import IconButton from "@mui/material/IconButton";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import Toolbar from "@mui/material/Toolbar";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { signOut, useSession } from "next-auth/react";
+import Image from "next/image";
+import Link from "next/link";
+import * as React from "react";
+import { MouseEventHandler } from "react";
 import $navbar from "./Navbar.module.css";
 import Link from "next/link";
 import Image from "next/image";
@@ -7,7 +25,6 @@ import {
   CoPresent,
   Settings,
   Logout,
-  Info,
 } from "@mui/icons-material";
 import { signOut } from "next-auth/react";
 import { useSession } from "next-auth/react";
@@ -19,7 +36,7 @@ const NavBar = () => {
     <>
       {status === "authenticated" && (
         <nav className={$navbar.sidebar}>
-          <Link href="/about">
+          <Link href="/">
             <Image
               src="/img/compass-logo-white.svg"
               alt="logo"
@@ -47,11 +64,6 @@ const NavBar = () => {
               <p className={$navbar.linkTitle}>Settings</p>
             </Link>
             <br />
-            <Link href="/about" className={$navbar.link}>
-              <Info className={$navbar.icon} />
-              <p className={$navbar.linkTitle}>About</p>
-            </Link>
-            <br />
             <Link href="" className={$navbar.link}>
               <Logout className={$navbar.icon} />
               <p
@@ -67,5 +79,3 @@ const NavBar = () => {
     </>
   );
 };
-
-export default NavBar;

src/components/navbar/Navbar.module.css

@@ -1,37 +1,42 @@
-.sidebar {
-  flex: 2;
-  background-color: var(--primary-20);
+.logo {
+  padding: 1rem;
 }
 
-.linkContainer {
+.toolbar {
+  background-color: var(--primary-40);
   display: flex;
-  flex-direction: column;
+  justify-content: space-between;
+  box-shadow: 0;
 }
 
-.logo {
-  padding-left: 28px;
-  padding-top: 12px;
-  padding-bottom: 10px;
+.sidebar {
+  background-color: var(--primary-40);
+}
+
+.linkItem {
+  padding: 1.25rem 0 1.25rem calc(45% - 1.5rem * 1.5);
 }
 
 .link {
   color: var(--on-primary);
-  padding-left: 30px;
-  padding-top: 12px;
-  padding-bottom: 12px;
-  display: flex;
-  align-items: center;
   text-decoration: none;
+  display: flex;
 }
 
 .linkTitle {
-  padding-left: 8px;
+  padding-left: 1rem;
 }
 
-.link:hover {
-  background-color: #383473;
+.linkItem:hover {
+  background-color: var(--primary-60);
 }
 
-.icon {
-  color: var(--on-primary);
+.burger {
+  color: var(--primary-99);
+}
+
+@media (min-width: 992px) {
+  .linkItem {
+    padding-left: 9%;
+  }
 }