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 <[email protected]>
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:[email protected]",
+ 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>
  );
-}
+}