hamburger menu

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==",
+      "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": {
       "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",

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"

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 (
     <div className="container">
       <Navbar></Navbar>

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 (
     <div className="navbar" style={navBackground}>
       <Link className="navbar-logo" href="/">
@@ -35,7 +83,48 @@ const Navbar = () => {
           📸 Gallery
         </Link>
       </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>
   );
 };

src/stylesheets/footer.scss

@@ -60,7 +60,8 @@
 .footer-links-ul-li-svg {
   width: 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)
+    brightness(100%) contrast(100%);
   opacity: 0.3;
   transition: 0.3s;
   padding: 0;
@@ -109,7 +110,6 @@
 }
 
 @media screen and (width <=650px) {
-
   // Phones
   .footer-links-ul-li-svg {
     width: 30px;

src/stylesheets/navbar.scss

@@ -77,24 +77,90 @@
   color: white;
 }
 
-.navbar-hamburger {
+.navbar-hamburger,
+.navbar-x {
   border: none;
-    width: 100px;;
+  width: 100px;
   font-size: 40px;
   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 {
-
   0%,
   100% {
     background-position: 0 0;