scarlett/ITR-Website
1
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

hamburger menu

Browse Source
This commit is contained in:
scarlett kadan 2024-06-15 00:17:09 -04:00
parent 0eb7b94104
commit a32297e574
7 changed files with 375 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
package-lock.json generated
View File

@ -13,12 +13,14 @@
"next": "14.2.3", "next": "14.2.3",
"react": "^18", "react": "^18",
"react-dom": "^18", "react-dom": "^18",
"react-modal": "^3.16.1",
"sass": "^1.77.2" "sass": "^1.77.2"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^20", "@types/node": "^20",
"@types/react": "^18", "@types/react": "^18",
"@types/react-dom": "^18", "@types/react-dom": "^18",
"@types/react-modal": "^3.16.3",
"eslint": "^8", "eslint": "^8",
"eslint-config-next": "14.2.3", "eslint-config-next": "14.2.3",
"typescript": "^5" "typescript": "^5"
@ -423,6 +425,15 @@
"@types/react": "*" "@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": { "node_modules/@typescript-eslint/parser": {
"version": "7.2.0", "version": "7.2.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.2.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.2.0.tgz",
@ -1839,6 +1850,11 @@
"node": ">=0.10.0" "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": { "node_modules/fast-deep-equal": {
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@ -3106,7 +3122,6 @@
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"dev": true,
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
} }
@ -3418,7 +3433,6 @@
"version": "15.8.1", "version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
"dev": true,
"dependencies": { "dependencies": {
"loose-envify": "^1.4.0", "loose-envify": "^1.4.0",
"object-assign": "^4.1.1", "object-assign": "^4.1.1",
@ -3485,8 +3499,30 @@
"node_modules/react-is": { "node_modules/react-is": {
"version": "16.13.1", "version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
"dev": true },
"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": { "node_modules/readdirp": {
"version": "3.6.0", "version": "3.6.0",
@ -4253,6 +4289,14 @@
"punycode": "^2.1.0" "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": { "node_modules/which": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

2
package.json
View File

@ -14,12 +14,14 @@
"next": "14.2.3", "next": "14.2.3",
"react": "^18", "react": "^18",
"react-dom": "^18", "react-dom": "^18",
"react-modal": "^3.16.1",
"sass": "^1.77.2" "sass": "^1.77.2"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^20", "@types/node": "^20",
"@types/react": "^18", "@types/react": "^18",
"@types/react-dom": "^18", "@types/react-dom": "^18",
"@types/react-modal": "^3.16.3",
"eslint": "^8", "eslint": "^8",
"eslint-config-next": "14.2.3", "eslint-config-next": "14.2.3",
"typescript": "^5" "typescript": "^5"

4
src/app/layout.tsx
View File

@ -1,8 +1,8 @@
import Navbar from "@/components/Navbar"; import Navbar from "@/components/Navbar";
import "@/app/global.scss";
import Footer from "@/components/Footer"; import Footer from "@/components/Footer";
import "@/app/global.scss";
export default function Layout({ children }) { export default function Layout({ children }: { children: React.ReactNode }) {
return ( return (
<div className="container"> <div className="container">
<Navbar></Navbar> <Navbar></Navbar>

4
src/components/Footer.tsx
View File

@ -116,8 +116,8 @@ const Footer = () => {
</ul> </ul>
</div> </div>
<span className="footer-toes-span"> <span className="footer-toes-span">
© {new Date().getFullYear()} Illinois Tech Robotics © {new Date().getFullYear()} Illinois Tech Robotics
</span> </span>
</div> </div>
); );
}; };

91
src/components/Navbar.tsx
View File

@ -1,8 +1,14 @@
"use client";
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import Link from "next/link"; import Link from "next/link";
import Modal from "react-modal";
import "@/stylesheets/navbar.scss"; import "@/stylesheets/navbar.scss";
import index from "@/pages";
const Navbar = () => { const Navbar = () => {
const [modal, setModal] = useState(false);
const [modalOpacity, setModalOpacity] = useState(0);
const [navBackground, setNavBackground] = useState({ const [navBackground, setNavBackground] = useState({
backgroundColor: "transparent", 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 ( return (
<div className="navbar" style={navBackground}> <div className="navbar" style={navBackground}>
<Link className="navbar-logo" href="/"> <Link className="navbar-logo" href="/">
@ -35,7 +83,48 @@ const Navbar = () => {
📸 Gallery 📸 Gallery
</Link> </Link>
</div> </div>
<div className="navbar-hamburger">≡</div> <div
className="navbar-hamburger"
onClick={() => {
openModal();
}}
>
≡
</div>
<Modal
isOpen={modal}
onRequestClose={() => closeModal()}
contentLabel="Menu"
style={modalStyle}
>
<div className="hamburger">
<Link className="navbar-logo" href="/">
ITR
</Link>
<div
className="navbar-x"
onClick={() => {
closeModal();
}}
>
✕
</div>
</div>
<div className="hamburger-links">
<Link className="hamburger-link" href="/">
🏠 Home
</Link>
<Link className="hamburger-link" href="/about">
❓ About
</Link>
<Link className="hamburger-link" href="/projects">
🤖 Projects
</Link>
<Link className="hamburger-link" href="/gallery">
📸 Gallery
</Link>
</div>
</Modal>
</div> </div>
); );
}; };

168
src/stylesheets/footer.scss
View File

@ -1,130 +1,130 @@
@font-face { @font-face {
font-family: itrFont; font-family: itrFont;
src: url("../../public/LeagueSpartan-ExtraBold.ttf"); src: url("../../public/LeagueSpartan-ExtraBold.ttf");
} }
@font-face { @font-face {
font-family: itrFontMedium; font-family: itrFontMedium;
src: url("../../public/LeagueSpartan-Medium.ttf"); src: url("../../public/LeagueSpartan-Medium.ttf");
} }
.footer { .footer {
background-color: #232323; background-color: #232323;
width: 100%; width: 100%;
height: 150px; height: 150px;
border-top: 2px solid rgb(46 46 46); border-top: 2px solid rgb(46 46 46);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
} }
.footer-links { .footer-links {
width: auto; width: auto;
height: auto; height: auto;
position: relative; position: relative;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 10px;
} }
.footer-links-ul { .footer-links-ul {
width: 80vw; width: 80vw;
height: 50px; height: 50px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.footer-links-ul-li { .footer-links-ul-li {
padding: 0; padding: 0;
margin: 20px; margin: 20px;
height: 50px; height: 50px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.footer-links-ul-li-a { .footer-links-ul-li-a {
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.footer-links-ul-li-svg { .footer-links-ul-li-svg {
width: 40px; width: 40px;
height: 40px; height: 40px;
filter: invert(100%) sepia(10%) saturate(1000%) hue-rotate(10deg) brightness(100%) contrast(100%); filter: invert(100%) sepia(10%) saturate(1000%) hue-rotate(10deg)
opacity: 0.3; brightness(100%) contrast(100%);
transition: 0.3s; opacity: 0.3;
padding: 0; transition: 0.3s;
margin: 0; padding: 0;
margin: 0;
} }
.footer-links-ul-li-svg:hover { .footer-links-ul-li-svg:hover {
opacity: 0.7; opacity: 0.7;
} }
.footer-toes-links { .footer-toes-links {
display: flex; display: flex;
margin-bottom: 5px; margin-bottom: 5px;
} }
.footer-toes-links-link { .footer-toes-links-link {
text-align: center; text-align: center;
width: 100px; width: 100px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
display: flex; display: flex;
height: 30px; height: 30px;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.footer-toes-links-link-a { .footer-toes-links-link-a {
font-family: itrFontMedium; font-family: itrFontMedium;
font-size: 20px; font-size: 20px;
color: #f5f5f5; color: #f5f5f5;
text-decoration: none; text-decoration: none;
transition: 0.3s; transition: 0.3s;
} }
.footer-toes-links-link-a:hover { .footer-toes-links-link-a:hover {
color: white; color: white;
} }
.footer-toes-span { .footer-toes-span {
font-family: itrFontMedium; font-family: itrFontMedium;
font-size: 14px; font-size: 14px;
color: #afafaf; color: #afafaf;
margin: 0; margin: 0;
padding: 0; padding: 0;
text-align: center; text-align: center;
} }
@media screen and (width <=650px) { @media screen and (width <=650px) {
// Phones
.footer-links-ul-li-svg {
width: 30px;
height: 30px;
}
// Phones .footer-links-ul-li {
.footer-links-ul-li-svg { margin: 15px;
width: 30px; }
height: 30px;
}
.footer-links-ul-li { .footer-toes-links-link-a {
margin: 15px; font-size: 17px;
} }
.footer-toes-links-link-a { .footer-toes-links-link {
font-size: 17px; width: 80px;
} }
}
.footer-toes-links-link {
width: 80px;
}
}

228
src/stylesheets/navbar.scss
View File

@ -1,120 +1,186 @@
@font-face { @font-face {
font-family: itrFont; font-family: itrFont;
src: url("../../public/LeagueSpartan-ExtraBold.ttf"); src: url("../../public/LeagueSpartan-ExtraBold.ttf");
} }
@font-face { @font-face {
font-family: itrFontMedium; font-family: itrFontMedium;
src: url("../../public/LeagueSpartan-Medium.ttf"); src: url("../../public/LeagueSpartan-Medium.ttf");
} }
.navbar { .navbar {
width: 100vw; width: 100vw;
height: 70px; height: 70px;
top: 0px; top: 0px;
left: 0px; left: 0px;
position: fixed; position: fixed;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background-color: transparent; background-color: transparent;
overflow: hidden; overflow: hidden;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
z-index: 1000; z-index: 1000;
transition: 0.5s; transition: 0.5s;
} }
.navbar-logo { .navbar-logo {
width: 100px; width: 100px;
height: 60%; height: 60%;
color: white; color: white;
font-size: 50px; font-size: 50px;
font-family: itrFont; font-family: itrFont;
transition: 0.5s; transition: 0.5s;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
margin-left: 30px; margin-left: 30px;
margin-right: 0px; margin-right: 0px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: 6px; margin-top: 6px;
} }
.navbar-logo:hover { .navbar-logo:hover {
color: red; color: red;
} }
.navbar-links { .navbar-links {
width: auto; width: auto;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: row; flex-direction: row;
} }
.navbar-link, .navbar-link,
.navbar-hamburger { .navbar-hamburger {
width: auto; width: auto;
height: 70%; height: 70%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
color: rgb(216 216 216); color: rgb(216 216 216);
text-decoration: none; text-decoration: none;
font-family: itrFontMedium; font-family: itrFontMedium;
font-size: 20px; font-size: 20px;
transition: 0.3s; transition: 0.3s;
cursor: pointer; cursor: pointer;
} }
.navbar-link:hover, .navbar-link:hover,
.navbar-hamburger:hover { .navbar-hamburger:hover {
color: white; color: white;
} }
.navbar-hamburger { .navbar-hamburger,
border: none; .navbar-x {
width: 100px;; border: none;
font-size: 40px; width: 100px;
margin-right: 30px; font-size: 40px;
margin-left: 0px; margin-right: 30px;
margin-left: 0px;
visibility: hidden;
color: white;
cursor: pointer;
} }
@media screen and (width <=912px) { .navbar-x {
// Tablets font-size: 30px;
visibility: visible;
} }
@media screen and (width <=650px) { .hamburger {
// Phones 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 { @keyframes navbar-logo {
0%,
100% {
background-position: 0 0;
}
0%, 50% {
100% { background-position: 100% 0;
background-position: 0 0; }
}
50% {
background-position: 100% 0;
}
} }
@keyframes glow { @keyframes glow {
0% { 0% {
background-position: 0 0; background-position: 0 0;
} }
50% { 50% {
background-position: 400% 0; background-position: 400% 0;
} }
100% { 100% {
background-position: 0 0; background-position: 0 0;
} }
} }