Navigation Bar and Footer (#14)

* feat: create navigation bar * feat: create footer * refactor: font, dependencies, scss, footer * fix: navbar on mobile * refactor: added routes and other small changes * feat: active page link has corresponding color * feat: add ZotHacks logo * fix: use responsive css and add bold weight * chore: use absolute asset path for navbar background * fix: logo moves upon navbar expansion and navbar is fixed to top of the screen * refactor: clean up css and use bootstrap grid * fix: remove horizontal scroll * fix: switch Twitter to Hack and SVG to PNG * fix: move Hack to front of footer --------- Co-authored-by: Alexander Liu <a@alexanderliu.com>
HackAtUCI · Sep 9, 2023 · e952f49 · e952f49
1 parent dd3aad0
commit e952f49
Show file tree

Hide file tree

Showing 15 changed files with 412 additions and 43 deletions.
diff --git a/apps/site/package.json b/apps/site/package.json
@@ -14,10 +14,12 @@
 		"@types/node": "20.4.9",
 		"@types/react": "18.2.20",
 		"@types/react-dom": "^18.2.0",
+		"bootstrap": "^5.3.1",
 		"eslint": "8.46.0",
 		"eslint-config-next": "^13.4.1",
 		"next": "^13.4.1",
 		"react": "18.2.0",
+		"react-bootstrap": "^2.8.0",
 		"react-dom": "^18.2.0",
 		"sass": "^1.65.1",
 		"typescript": "5.1.6"

diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx
@@ -1,8 +1,13 @@
+import "bootstrap/dist/css/bootstrap.min.css";
 import "./globals.scss";
+
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import { Fuzzy_Bubbles } from "next/font/google";
+
+import NavBar from "@/components/NavBar/NavBar";
+import Footer from "@/components/Footer/Footer";
 
-const inter = Inter({ subsets: ["latin"] });
+const fuzzy = Fuzzy_Bubbles({ weight: ["400", "700"], subsets: ["latin"] });
 
 export const metadata: Metadata = {
 	title: "Create Next App",
@@ -16,7 +21,11 @@ export default function RootLayout({
 }) {
 	return (
 		<html lang="en">
-			<body className={inter.className}>{children}</body>
+			<body className={fuzzy.className}>
+				<NavBar />
+				{children}
+				<Footer />
+			</body>
 		</html>
 	);
 }
diff --git a/apps/site/src/assets/icons/facebook.png b/apps/site/src/assets/icons/facebook.png
diff --git a/apps/site/src/assets/icons/hack.png b/apps/site/src/assets/icons/hack.png
diff --git a/apps/site/src/assets/icons/insta.png b/apps/site/src/assets/icons/insta.png
diff --git a/apps/site/src/assets/icons/mail.png b/apps/site/src/assets/icons/mail.png
diff --git a/apps/site/src/assets/icons/zothacks-logo.png b/apps/site/src/assets/icons/zothacks-logo.png
diff --git a/apps/site/src/assets/images/lined_paper.png b/apps/site/src/assets/images/lined_paper.png
diff --git a/apps/site/src/components/Footer/Footer.module.scss b/apps/site/src/components/Footer/Footer.module.scss
@@ -0,0 +1,17 @@
+@use "@/lib/styles/variables.scss" as variables;
+
+.footer {
+	padding-bottom: 7vw;
+}
+
+.text {
+	font-size: 1.5rem;
+	font-weight: bold;
+	color: black;
+	text-align: center;
+	margin-bottom: 0;
+}
+
+.socials {
+	margin: 10px;
+}
diff --git a/apps/site/src/components/Footer/Footer.tsx b/apps/site/src/components/Footer/Footer.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import Image from "next/image";
+
+import styles from "./Footer.module.scss";
+
+import Mail from "@/assets/icons/mail.png";
+import Facebook from "@/assets/icons/facebook.png";
+import Instagram from "@/assets/icons/insta.png";
+import Hack from "@/assets/icons/hack.png";
+
+type Social = {
+	icon: any;
+	link: string;
+	alt: string;
+	width: number;
+	height: number;
+};
+
+const SOCIALS: Social[] = [
+	{
+		icon: Hack,
+		link: "https://hack.ics.uci.edu/",
+		alt: "Hack at UCI",
+		width: 70,
+		height: 70,
+	},
+	{
+		icon: Mail,
+		link: "mailto:hack@uci.edu",
+		alt: "Mail",
+		width: 79,
+		height: 59,
+	},
+	{
+		icon: Facebook,
+		link: "https://www.facebook.com/UCI.Hack/",
+		alt: "Facebook",
+		width: 59,
+		height: 59,
+	},
+	{
+		icon: Instagram,
+		link: "https://www.instagram.com/hackatuci/",
+		alt: "Instagram",
+		width: 69,
+		height: 72,
+	},
+];
+
+export default function Footer() {
+	return (
+		<footer className={styles.footer}>
+			<p className={styles.text}>Made with &lt;3 in Irvine, CA - Hack @ UCI</p>
+			<div className="text-center">
+				{SOCIALS.map(({ icon, link, alt, width, height }) => (
+					<a key={link} href={link} target="_blank" className={styles.socials}>
+						<Image src={icon.src} alt={alt} width={width} height={height} />
+					</a>
+				))}
+			</div>
+		</footer>
+	);
+}
diff --git a/apps/site/src/components/NavBar/NavBar.module.scss b/apps/site/src/components/NavBar/NavBar.module.scss
@@ -0,0 +1,69 @@
+@use "@/lib/styles/variables.scss" as variables;
+
+.nav {
+	position: sticky;
+	width: 100%;
+	filter: drop-shadow(0px 2.5px 2px rgba(0, 0, 0, 0.4));
+}
+
+.navbar {
+	background-image: url("~@/assets/images/lined_paper.png");
+	background-size: cover;
+	background-position: left bottom;
+	background-repeat: no-repeat;
+}
+
+.logo {
+	position: absolute;
+	left: 30px;
+	width: 20vw;
+	height: 20vw;
+	text-align: center;
+	transform: rotate(-16.81deg) translateY(-5vw);
+}
+
+.text {
+	margin-left: 1vw;
+	margin-right: 1vw;
+	font-size: 2rem;
+	font-weight: bold;
+	text-decoration: none;
+}
+
+.notActive {
+	@extend .text;
+	color: black;
+}
+
+.homeActive {
+	@extend .text;
+	color: variables.$green;
+}
+
+.resourcesActive {
+	@extend .text;
+	color: variables.$blue;
+}
+
+.scheduleActive {
+	@extend .text;
+	color: variables.$navbar-red;
+}
+
+@include variables.media-breakpoint-down(md) {
+	.logo {
+		left: 3vw;
+		transform: rotate(-16.81deg) translateY(-6vw);
+	}
+	.text {
+		font-size: 1.5rem;
+	}
+}
+
+@include variables.media-breakpoint-up(lg) {
+	.logo {
+		width: 180px;
+		height: 180px;
+		transform: rotate(-16.81deg) translateY(-50px);
+	}
+}
diff --git a/apps/site/src/components/NavBar/NavBar.tsx b/apps/site/src/components/NavBar/NavBar.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
+
+import Container from "react-bootstrap/Container";
+import Nav from "react-bootstrap/Nav";
+import Navbar from "react-bootstrap/Navbar";
+
+import ZotHacksLogo from "@/assets/icons/zothacks-logo.png";
+
+import styles from "./NavBar.module.scss";
+
+export default function NavBar() {
+	const activeRoute = usePathname();
+
+	return (
+		<nav className={styles.nav}>
+			<Navbar expand="md" className={`bg-body-tertiary ${styles.navbar}`}>
+				<Container fluid>
+					<Navbar.Brand />
+					<Navbar.Toggle aria-controls="basic-navbar-nav" />
+					<Navbar.Collapse id="basic-navbar-nav">
+						<Nav className="ms-auto text-center">
+							<Link
+								href="/"
+								className={
+									activeRoute === "/" ? styles.homeActive : styles.notActive
+								}
+							>
+								Home
+							</Link>
+							<Link
+								href="/resources"
+								className={
+									activeRoute === "/resources"
+										? styles.resourcesActive
+										: styles.notActive
+								}
+							>
+								Resources
+							</Link>
+							<Link
+								href="/schedule"
+								className={
+									activeRoute === "/schedule"
+										? styles.scheduleActive
+										: styles.notActive
+								}
+							>
+								Schedule
+							</Link>
+						</Nav>
+					</Navbar.Collapse>
+				</Container>
+			</Navbar>
+			<Link href="/">
+				<div className={styles.logo}>
+					<Image src={ZotHacksLogo.src} alt="ZotHacks Logo" fill />
+				</div>
+			</Link>
+		</nav>
+	);
+}
diff --git a/apps/site/src/lib/styles/variables.scss b/apps/site/src/lib/styles/variables.scss
@@ -1,5 +1,10 @@
 // Common variables for site theme consistency
 
+// import bootstrap scss
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+
 // colors
 $white: #fafaff; // Paper Background color
 $beige: #faf4ea;
@@ -14,6 +19,7 @@ $green: #3df048;
 $light-blue: #81deeb;
 $blue: #3902fd;
 $purple: #6600b6;
+$navbar-red: #ff0000;
 
 // fonts
 $fuzzy-bubbles: "Fuzzy Bubbles", cursive;
diff --git a/apps/site/src/views/Landing/Landing.tsx b/apps/site/src/views/Landing/Landing.tsx
@@ -6,4 +6,4 @@ export default function Landing() {
 			<h1>ZotHacks 2023</h1>
 		</main>
 	);
-}
+}