Merge pull request #5 from acmucsd/navbar

Added navbar

package.json

@@ -10,6 +10,10 @@
     "lint:check": "prettier --check ./src && next lint"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.14",
+    "@mui/material": "^5.15.14",
     "@types/node": "20.6.0",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",

src/sections/landing/hero/index.tsx

@@ -3,10 +3,13 @@ import Image from 'next/image';
 import styles from './style.module.scss';
 import Arrow from '@/public/arrow.svg';
 import BackgroundGraphic from '@/components/background';
+import Navbar from '@/sections/navbar';
 
 const Hero = () => {
   return (
     <div className={styles.container}>
+      <Navbar />
+
       <BackgroundGraphic />
       <div className={styles.cta}>
         <div>

src/sections/navbar/index.tsx

@@ -0,0 +1,129 @@
+import Link from 'next/link';
+import styles from './style.module.scss';
+import { useState } from 'react';
+import MenuIcon from '@mui/icons-material/Menu';
+import CloseIcon from '@mui/icons-material/Close';
+import { Dialog, IconButton, Toolbar } from '@mui/material';
+import Socials from '@/components/socials';
+
+const LINKS = [
+  {
+    name: 'Home',
+    href: '/',
+  },
+];
+
+export default function Navbar() {
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  const handleMobileOpen = () => {
+    setMobileOpen(true);
+  };
+
+  const handleMobileClose = () => {
+    setMobileOpen(false);
+  };
+
+  return (
+    <div className={styles.container}>
+      {/* Left side shows up on both desktop and mobile */}
+      <Link
+        href="/"
+        onClick={handleMobileClose}
+        style={{ textDecoration: 'none', color: 'inherit' }}
+      >
+        <div className={styles.leftSection}>
+          <img className={styles.logoImage} src="/diamondhacks-logo.svg" alt="DiamondHacks logo" />
+        </div>
+      </Link>
+
+      {/* Right side, desktop only */}
+      <div className={styles.rightSectionDesktop}>
+        {LINKS.map((link, index) => (
+          <Link key={index} href={link.href} className={styles.navItem}>
+            {link.name}
+          </Link>
+        ))}
+
+        <a className={styles.applyNowButton} href="https://acmurl.com/diamondhacks-preregister">
+          Apply now
+        </a>
+      </div>
+
+      {/* Hamburger button, mobile only */}
+      <IconButton
+        size="large"
+        edge="start"
+        color="primary"
+        aria-label="open drawer"
+        sx={{ mr: 2 }}
+        onClick={handleMobileOpen}
+        className={`${styles.hamburgerMenuButton} ${styles.buttonColorBlue}`}
+      >
+        <MenuIcon />
+      </IconButton>
+
+      {/* Mobile navbar */}
+      <Dialog
+        open={mobileOpen}
+        onClose={handleMobileClose}
+        PaperProps={{
+          style: {
+            backgroundColor: 'rgba(252, 252, 252, 0.7)',
+            maxHeight: '80vh',
+            width: '100%',
+            margin: 0,
+            alignSelf: 'flex-start',
+            alignItems: 'center',
+            padding: '1rem 0',
+            backdropFilter: 'blur(4px)',
+          },
+        }}
+      >
+        <Toolbar
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            width: 'calc(100% - 2 * var(--side-padding-small))',
+          }}
+        >
+          <Link
+            href="/"
+            onClick={handleMobileClose}
+            style={{ textDecoration: 'none', color: 'inherit' }}
+          >
+            <div className={styles.leftSection}>
+              <img
+                className={styles.logoImage}
+                src="/diamondhacks-logo.svg"
+                alt="DiamondHacks logo"
+              />
+            </div>
+          </Link>
+          <IconButton
+            edge="start"
+            className={styles.buttonColorBlue}
+            onClick={handleMobileClose}
+            aria-label="close"
+          >
+            <CloseIcon />
+          </IconButton>
+        </Toolbar>
+
+        {LINKS.map((link, index) => (
+          <Link href={link.href} className={styles.navItem} key={index} onClick={handleMobileClose}>
+            {link.name}
+          </Link>
+        ))}
+
+        <div style={{ margin: '2rem 0' }}>
+          <Socials />
+        </div>
+        <a className={styles.applyNowButton} href="https://acmurl.com/diamondhacks-preregister">
+          Apply now
+        </a>
+      </Dialog>
+    </div>
+  );
+}

src/sections/navbar/style.module.scss

@@ -0,0 +1,93 @@
+.container {
+  align-self: flex-start;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+
+  padding: 3rem 0;
+  z-index: 1;
+
+  @media screen and (max-width: 768px) {
+    padding: 1rem 0;
+  }
+}
+
+.leftSection {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-decoration: none;
+}
+
+.logoImage {
+  height: 100%;
+}
+
+.logoTextContainer {
+  display: flex;
+  flex-direction: column;
+  color: var(--Dark-Bleu);
+
+  font-size: 1.25rem;
+
+  @media screen and (max-width: 1100px) {
+    font-size: 1rem;
+  }
+}
+
+.rightSectionDesktop {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+
+  @media screen and (max-width: 768px) {
+    display: none;
+  }
+}
+
+.navItem {
+  color: var(--Dark-Bleu);
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 1.25rem;
+
+  @media screen and (max-width: 1100px) {
+    font-size: 1rem;
+  }
+
+  @media screen and (max-width: 768px) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+  }
+}
+
+.applyNowButton {
+  font-size: 1.25rem;
+  padding: 1rem 2rem;
+  background-color: #142e52;
+  color: white;
+  border-radius: 2rem;
+  text-decoration: none;
+
+  @media screen and (max-width: 1100px) {
+    font-size: 1rem;
+  }
+}
+
+.hamburgerMenuButton {
+  display: none;
+  padding: 0;
+  margin: 0;
+
+  @media screen and (max-width: 768px) {
+    display: block;
+  }
+}
+
+.buttonColorBlue {
+  color: var(--Dark-Bleu);
+}