From a32297e574e5349bd96d79859f8b5b3df3214c33 Mon Sep 17 00:00:00 2001 From: Scarlett Date: Sat, 15 Jun 2024 00:17:09 -0400 Subject: [PATCH] hamburger menu --- package-lock.json | 52 +++++++- package.json | 2 + src/app/layout.tsx | 4 +- src/components/Footer.tsx | 4 +- src/components/Navbar.tsx | 91 +++++++++++++- src/stylesheets/footer.scss | 168 +++++++++++++------------- src/stylesheets/navbar.scss | 228 +++++++++++++++++++++++------------- 7 files changed, 375 insertions(+), 174 deletions(-) diff --git a/package-lock.json b/package-lock.json index eaf51f7..8a4b908 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,12 +13,14 @@ "next": "14.2.3", "react": "^18", "react-dom": "^18", + "react-modal": "^3.16.1", "sass": "^1.77.2" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "@types/react-modal": "^3.16.3", "eslint": "^8", "eslint-config-next": "14.2.3", "typescript": "^5" @@ -423,6 +425,15 @@ "@types/react": "*" } }, + "node_modules/@types/react-modal": { + "version": "3.16.3", + "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.16.3.tgz", + "integrity": "sha512-xXuGavyEGaFQDgBv4UVm8/ZsG+qxeQ7f77yNrW3n+1J6XAstUy5rYHeIHPh1KzsGc6IkCIdu6lQ2xWzu1jBTLg==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@typescript-eslint/parser": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.2.0.tgz", @@ -1839,6 +1850,11 @@ "node": ">=0.10.0" } }, + "node_modules/exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==" + }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -3106,7 +3122,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -3418,7 +3433,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -3485,8 +3499,30 @@ "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, + "node_modules/react-modal": { + "version": "3.16.1", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz", + "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==", + "dependencies": { + "exenv": "^1.2.0", + "prop-types": "^15.7.2", + "react-lifecycles-compat": "^3.0.0", + "warning": "^4.0.3" + }, + "engines": { + "node": ">=8" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18", + "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18" + } }, "node_modules/readdirp": { "version": "3.6.0", @@ -4253,6 +4289,14 @@ "punycode": "^2.1.0" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/package.json b/package.json index ecf95c8..81bff07 100644 --- a/package.json +++ b/package.json @@ -14,12 +14,14 @@ "next": "14.2.3", "react": "^18", "react-dom": "^18", + "react-modal": "^3.16.1", "sass": "^1.77.2" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "@types/react-modal": "^3.16.3", "eslint": "^8", "eslint-config-next": "14.2.3", "typescript": "^5" diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 2f97816..f952ee6 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,8 +1,8 @@ import Navbar from "@/components/Navbar"; -import "@/app/global.scss"; import Footer from "@/components/Footer"; +import "@/app/global.scss"; -export default function Layout({ children }) { +export default function Layout({ children }: { children: React.ReactNode }) { return (
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index ad990e2..04a10cd 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -116,8 +116,8 @@ const Footer = () => {
- © {new Date().getFullYear()} Illinois Tech Robotics - + © {new Date().getFullYear()} Illinois Tech Robotics + ); }; diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 02bdd78..1fd9555 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,8 +1,14 @@ +"use client"; + import React, { useState, useEffect } from "react"; import Link from "next/link"; +import Modal from "react-modal"; import "@/stylesheets/navbar.scss"; +import index from "@/pages"; const Navbar = () => { + const [modal, setModal] = useState(false); + const [modalOpacity, setModalOpacity] = useState(0); const [navBackground, setNavBackground] = useState({ backgroundColor: "transparent", }); @@ -16,6 +22,48 @@ const Navbar = () => { }); }, []); + const modalStyle = { + content: { + opacity: modalOpacity, + transition: "opacity 300ms ease-in-out", + top: "50%", + left: "50%", + right: "auto", + bottom: "auto", + marginRight: "-50%", + width: "100vw", + height: "100vh", + transform: "translate(-50%, -50%)", + overflow: "hidden", + display: "flex", + flexDirection: "column", + justifyContent: "flex-start", + alignItems: "center", + backgroundColor: "#232323", + minWidth: "30%", + minHeight: "30%", + animation: "slideUp 500ms ease-in-out", + border: "none", + }, + overlay: { + opacity: modalOpacity, + transition: "opacity 300ms ease-in-out", + backgroundColor: "rgba(255, 255, 255, 0.15)", + backdropFilter: "blur(5px)", + zIndex: "1000", + }, + }; + + const openModal = () => { + setModal(true); + setTimeout(() => setModalOpacity(1), 10); + }; + + const closeModal = () => { + setModalOpacity(0); + setTimeout(() => setModal(false), 300); + }; + return (
@@ -35,7 +83,48 @@ const Navbar = () => { 📸 Gallery
-
≡
+
{ + openModal(); + }} + > + ≡ +
+ closeModal()} + contentLabel="Menu" + style={modalStyle} + > +
+ + ITR + +
{ + closeModal(); + }} + > + ✕ +
+
+
+ + 🏠 Home + + + ❓ About + + + 🤖 Projects + + + 📸 Gallery + +
+ ); }; diff --git a/src/stylesheets/footer.scss b/src/stylesheets/footer.scss index 53f9839..203751b 100644 --- a/src/stylesheets/footer.scss +++ b/src/stylesheets/footer.scss @@ -1,130 +1,130 @@ @font-face { - font-family: itrFont; - src: url("../../public/LeagueSpartan-ExtraBold.ttf"); + font-family: itrFont; + src: url("../../public/LeagueSpartan-ExtraBold.ttf"); } @font-face { - font-family: itrFontMedium; - src: url("../../public/LeagueSpartan-Medium.ttf"); + font-family: itrFontMedium; + src: url("../../public/LeagueSpartan-Medium.ttf"); } .footer { - background-color: #232323; - width: 100%; - height: 150px; - border-top: 2px solid rgb(46 46 46); - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin: 0; - padding: 0; - overflow: hidden; + background-color: #232323; + width: 100%; + height: 150px; + border-top: 2px solid rgb(46 46 46); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 0; + padding: 0; + overflow: hidden; } .footer-links { - width: auto; - height: auto; - position: relative; - display: flex; - justify-content: center; - align-items: center; - margin-bottom: 10px; + width: auto; + height: auto; + position: relative; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 10px; } .footer-links-ul { - width: 80vw; - height: 50px; - display: flex; - justify-content: center; - align-items: center; + width: 80vw; + height: 50px; + display: flex; + justify-content: center; + align-items: center; } .footer-links-ul-li { - padding: 0; - margin: 20px; - height: 50px; - display: flex; - justify-content: center; - align-items: center; + padding: 0; + margin: 20px; + height: 50px; + display: flex; + justify-content: center; + align-items: center; } .footer-links-ul-li-a { - margin: 0; - padding: 0; - display: flex; - justify-content: center; - align-items: center; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; } .footer-links-ul-li-svg { - width: 40px; - height: 40px; - filter: invert(100%) sepia(10%) saturate(1000%) hue-rotate(10deg) brightness(100%) contrast(100%); - opacity: 0.3; - transition: 0.3s; - padding: 0; - margin: 0; + width: 40px; + height: 40px; + filter: invert(100%) sepia(10%) saturate(1000%) hue-rotate(10deg) + brightness(100%) contrast(100%); + opacity: 0.3; + transition: 0.3s; + padding: 0; + margin: 0; } .footer-links-ul-li-svg:hover { - opacity: 0.7; + opacity: 0.7; } .footer-toes-links { - display: flex; - margin-bottom: 5px; + display: flex; + margin-bottom: 5px; } .footer-toes-links-link { - text-align: center; - width: 100px; - justify-content: center; - align-items: center; - display: flex; - height: 30px; - padding: 0; - margin: 0; + text-align: center; + width: 100px; + justify-content: center; + align-items: center; + display: flex; + height: 30px; + padding: 0; + margin: 0; } .footer-toes-links-link-a { - font-family: itrFontMedium; - font-size: 20px; - color: #f5f5f5; - text-decoration: none; - transition: 0.3s; + font-family: itrFontMedium; + font-size: 20px; + color: #f5f5f5; + text-decoration: none; + transition: 0.3s; } .footer-toes-links-link-a:hover { - color: white; + color: white; } .footer-toes-span { - font-family: itrFontMedium; - font-size: 14px; - color: #afafaf; - margin: 0; - padding: 0; - text-align: center; + font-family: itrFontMedium; + font-size: 14px; + color: #afafaf; + margin: 0; + padding: 0; + text-align: center; } @media screen and (width <=650px) { + // Phones + .footer-links-ul-li-svg { + width: 30px; + height: 30px; + } - // Phones - .footer-links-ul-li-svg { - width: 30px; - height: 30px; - } + .footer-links-ul-li { + margin: 15px; + } - .footer-links-ul-li { - margin: 15px; - } + .footer-toes-links-link-a { + font-size: 17px; + } - .footer-toes-links-link-a { - font-size: 17px; - } - - .footer-toes-links-link { - width: 80px; - } -} \ No newline at end of file + .footer-toes-links-link { + width: 80px; + } +} diff --git a/src/stylesheets/navbar.scss b/src/stylesheets/navbar.scss index 6e57ea1..f4a3662 100644 --- a/src/stylesheets/navbar.scss +++ b/src/stylesheets/navbar.scss @@ -1,120 +1,186 @@ @font-face { - font-family: itrFont; - src: url("../../public/LeagueSpartan-ExtraBold.ttf"); + font-family: itrFont; + src: url("../../public/LeagueSpartan-ExtraBold.ttf"); } @font-face { - font-family: itrFontMedium; - src: url("../../public/LeagueSpartan-Medium.ttf"); + font-family: itrFontMedium; + src: url("../../public/LeagueSpartan-Medium.ttf"); } .navbar { - width: 100vw; - height: 70px; - top: 0px; - left: 0px; - position: fixed; - display: flex; - justify-content: space-between; - align-items: center; - background-color: transparent; - overflow: hidden; - margin: 0px; - padding: 0px; - z-index: 1000; - transition: 0.5s; + width: 100vw; + height: 70px; + top: 0px; + left: 0px; + position: fixed; + display: flex; + justify-content: space-between; + align-items: center; + background-color: transparent; + overflow: hidden; + margin: 0px; + padding: 0px; + z-index: 1000; + transition: 0.5s; } .navbar-logo { - width: 100px; - height: 60%; - color: white; - font-size: 50px; - font-family: itrFont; - transition: 0.5s; - text-decoration: none; - cursor: pointer; - margin-left: 30px; - margin-right: 0px; - display: flex; - align-items: center; - justify-content: center; - margin-top: 6px; + width: 100px; + height: 60%; + color: white; + font-size: 50px; + font-family: itrFont; + transition: 0.5s; + text-decoration: none; + cursor: pointer; + margin-left: 30px; + margin-right: 0px; + display: flex; + align-items: center; + justify-content: center; + margin-top: 6px; } .navbar-logo:hover { - color: red; + color: red; } .navbar-links { - width: auto; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - flex-direction: row; + width: auto; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: row; } .navbar-link, .navbar-hamburger { - width: auto; - height: 70%; - display: flex; - align-items: center; - justify-content: center; - margin-left: 20px; - margin-right: 20px; - color: rgb(216 216 216); - text-decoration: none; - font-family: itrFontMedium; - font-size: 20px; - transition: 0.3s; - cursor: pointer; + width: auto; + height: 70%; + display: flex; + align-items: center; + justify-content: center; + margin-left: 20px; + margin-right: 20px; + color: rgb(216 216 216); + text-decoration: none; + font-family: itrFontMedium; + font-size: 20px; + transition: 0.3s; + cursor: pointer; } .navbar-link:hover, .navbar-hamburger:hover { - color: white; + color: white; } -.navbar-hamburger { - border: none; - width: 100px;; - font-size: 40px; - margin-right: 30px; - margin-left: 0px; +.navbar-hamburger, +.navbar-x { + border: none; + width: 100px; + font-size: 40px; + margin-right: 30px; + margin-left: 0px; + visibility: hidden; + color: white; + cursor: pointer; } -@media screen and (width <=912px) { - // Tablets +.navbar-x { + font-size: 30px; + visibility: visible; } -@media screen and (width <=650px) { - // Phones +.hamburger { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; +} + +.hamburger-links { + width: 100%; + height: auto; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.hamburger-link:first-child { + margin-top: 30px; +} + +.hamburger-link { + width: 100%; + height: auto; + display: flex; + align-items: center; + justify-content: center; + padding-bottom: 10px; + padding-top: 10px; + margin-bottom: 3px; + margin-top: 3px; + color: rgb(216 216 216); + text-decoration: none; + font-family: itrFontMedium; + font-size: 30px; + transition: 0.3s; + cursor: pointer; +} + +@media screen and (width <=850px) { + .navbar-hamburger, + .navbar-x { + visibility: visible; + margin-right: 20px; + width: auto; + } + + .navbar-links { + display: none; + } + + .navbar-logo { + margin-left: 20px; + width: auto; + } +} + +@keyframes slideUp { + from { + top: 200%; + } + to { + top: 50%; + } } @keyframes navbar-logo { + 0%, + 100% { + background-position: 0 0; + } - 0%, - 100% { - background-position: 0 0; - } - - 50% { - background-position: 100% 0; - } + 50% { + background-position: 100% 0; + } } @keyframes glow { - 0% { - background-position: 0 0; - } + 0% { + background-position: 0 0; + } - 50% { - background-position: 400% 0; - } + 50% { + background-position: 400% 0; + } - 100% { - background-position: 0 0; - } -} \ No newline at end of file + 100% { + background-position: 0 0; + } +}