Feature schedule maintenance (#40)

* feat: maintenance mode

* feat: schedule page in maintenance mode

* fix: made maintenance image responsive

* update: added petr maintenance image

removed imports

fix: removed coming soon image

* fix: extract embedded text, vertical align center

* fix: removed unused asset

* Move Maintenance graphic/text to dedicated view

- Extract graphic and text to new `Maintenance` component

* Simplify maintenance image layout & use next/image

* Configure maintenance mode from environment

- Show Maintenance view instead of page content when environment
  variable is set for Schedule and Resources page

* Reenable navigation bar

---------

Co-authored-by: Sam Der <sder@uci.edu>
Co-authored-by: Taesung Hwang <taesungh@uci.edu>

apps/site/src/app/resources/page.tsx

@@ -1,3 +1,11 @@
+import { Resources } from "@/views";
+import { Maintenance } from "@/views";
+
 export const revalidate = 60;
 
-export { Resources as default } from "@/views";
+// When set to any value
+const Component = process.env.MAINTENANCE_MODE_RESOURCES
+	? Maintenance
+	: Resources;
+
+export default Component;

apps/site/src/app/schedule/page.tsx

@@ -1,3 +1,11 @@
+import { Schedule } from "@/views";
+import { Maintenance } from "@/views";
+
 export const revalidate = 60;
+
+// When set to any value
+const Component = process.env.MAINTENANCE_MODE_SCHEDULE
+	? Maintenance
+	: Schedule;
 
-export { Schedule as default } from "@/views";
+export default Component;

apps/site/src/components/NavBar/NavBar.tsx

@@ -20,7 +20,7 @@ export default function NavBar() {
 			<Navbar expand="md" className={`bg-body-tertiary ${styles.navbar}`}>
 				<Container fluid>
 					<Navbar.Brand />
-					{/* <Navbar.Toggle aria-controls="basic-navbar-nav" />
+					<Navbar.Toggle aria-controls="basic-navbar-nav" />
 					<Navbar.Collapse id="basic-navbar-nav">
 						<Nav className="ms-auto text-center">
 							<Link
@@ -52,7 +52,7 @@ export default function NavBar() {
 								Schedule
 							</Link>
 						</Nav>
-					</Navbar.Collapse> */}
+					</Navbar.Collapse>
 				</Container>
 			</Navbar>
 			<Link href="/">

apps/site/src/views/Maintenance/Maintenance.module.scss

@@ -0,0 +1,11 @@
+@use "bootstrap-utils" as bootstrap;
+
+.maintenanceContainer {
+	text-align: center;
+
+	.imageContainer {
+		margin: auto;
+		min-height: 60vh;
+		position: relative;
+	}
+}

apps/site/src/views/Maintenance/Maintenance.tsx

@@ -0,0 +1,23 @@
+import Image from "next/image";
+import maintenancePetr from "@/assets/images/UnderMaintenenceLight.png";
+
+import styles from "./Maintenance.module.scss";
+
+function Maintenance() {
+	return (
+		<section className={"container " + styles.maintenanceContainer}>
+			<div className={styles.imageContainer}>
+				<Image
+					src={maintenancePetr.src}
+					alt="Anteaters working at a construction site."
+					fill
+					style={{ objectFit: "contain" }}
+				/>
+			</div>
+			<h1 className="fs-2">Page Under Maintenance</h1>
+			<p>Check back soon!</p>
+		</section>
+	);
+}
+
+export default Maintenance;

apps/site/src/views/Schedule/Schedule.tsx

@@ -1,4 +1,5 @@
 import ClipboardSchedule from "./sections/ClipboardSchedule/ClipboardSchedule";
+
 import styles from "./Schedule.module.scss";
 
 export default function Schedule() {

apps/site/src/views/index.ts

@@ -1,3 +1,4 @@
 export { default as Home } from "./Home/Home";
+export { default as Maintenance } from "./Maintenance/Maintenance";
 export { default as Resources } from "./Resources/Resources";
 export { default as Schedule } from "./Schedule/Schedule";