From e641697be98b1ca0531e65b726b1b53d3ae10cf5 Mon Sep 17 00:00:00 2001
From: funbunch <shannan_bunch@hotmail.com>
Date: Mon, 10 Nov 2025 14:31:13 -0800
Subject: [PATCH 1/4] feat: add mobile hamburger menu

---
 .../calendarHeader/CalendarHeader.jsx         |  8 +--
 client/src/features/home/HamburgerNav.jsx     | 52 ++++++++++++++-----
 client/src/pages/CalendarPage.jsx             |  5 +-
 3 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/client/src/features/calendarHeader/CalendarHeader.jsx b/client/src/features/calendarHeader/CalendarHeader.jsx
index ee88dc14..b859e224 100644
--- a/client/src/features/calendarHeader/CalendarHeader.jsx
+++ b/client/src/features/calendarHeader/CalendarHeader.jsx
@@ -30,8 +30,8 @@ function CalendarHeader({ date }) {
   };
 
   return (
-    <header className="flex items-center max-[440px]:px-2 px-5 py-3 bg-white lg:justify-between w-full justify-center lg:flex-nowrap flex-wrap  max-[440px]:gap-x-2 gap-x-6 lg:gap-x-4 overflow-hidden">
-      <section className="flex max-[440px]:gap-x-2 gap-x-6 lg:gap-x-4">
+    <header className="flex items-center max-[440px]:px-2 px-5 py-3 bg-white lg:justify-between w-full justify-center lg:flex-nowrap flex-wrap max-[440px]:gap-x-2 gap-x-6 lg:gap-x-4 overflow-hidden">
+      <section className="hidden md:flex max-[440px]:gap-x-2 gap-x-6 lg:gap-x-4">
         <HeaderButton
           Icon={BsCalendarPlusFill}
           tooltipText="Add Event"
@@ -49,7 +49,7 @@ function CalendarHeader({ date }) {
           onClick={() => navigate("/")}
         />
       </section>
-      <section className="flex items-center w-full order-first lg:w-min lg:space-x-3 lg:order-0 justify-between mb-4 lg:mb-0">
+      <section className="hidden md:flex items-center w-full order-first lg:w-min lg:space-x-3 lg:order-none justify-between mb-4 lg:mb-0">
         <img src={Logo} className="max-w-none max-[380px]:w-9" alt="Logo" />
         <MonthAndYear
           month={date?.month}
@@ -63,7 +63,7 @@ function CalendarHeader({ date }) {
           onClick={() => date.getCurrentMonth()}
         />
       </section>
-      <section className="flex max-[440px]:gap-x-2 gap-x-6 lg:gap-x-4">
+      <section className="hidden md:flex max-[440px]:gap-x-2 gap-x-6 lg:gap-x-4">
         <HeaderButton
           Icon={IoChatbubblesOutline}
           tooltipText="Feedback"
diff --git a/client/src/features/home/HamburgerNav.jsx b/client/src/features/home/HamburgerNav.jsx
index 053c0b70..5fdb49e1 100644
--- a/client/src/features/home/HamburgerNav.jsx
+++ b/client/src/features/home/HamburgerNav.jsx
@@ -1,24 +1,47 @@
 import { useState } from "react";
 import { FaBars, FaTimes } from "react-icons/fa";
 import { useAuthContext } from "../../contexts/AuthContext";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
+import { useFormModalContext } from "../../contexts/FormModalContext";
 
-function HamburgerNav({ logo, logotext }) {
+function HamburgerNav({ logo, logotext, links }) {
   const navigate = useNavigate();
+  const location = useLocation();
   const { isAuthenticated, logout } = useAuthContext();
+  const formModal = useFormModalContext();
 
-  let Links = [
-    { name: "HOME", link: "/", type: "button" },
-    { name: "CALENDAR", link: "calendar", type: "button" },
-  ];
+  const getDefaultLinks = () => {
+    const defaultLinks = [{ name: "HOME", link: "/", type: "button" }];
+    if (location.pathname.includes("calendar")) {
+      defaultLinks.push({
+        name: "ADD EVENT",
+        action: formModal.handleOpen,
+        type: "function",
+      });
+    } else {
+      defaultLinks.push({
+        name: "CALENDAR",
+        link: "/calendar",
+        type: "button",
+      });
+    }
 
-  if (!isAuthenticated()) {
-    Links.push({ name: "LOG IN", link: "api/auth/discord", type: "a" });
-  } else {
-    Links.push({ name: "LOG OUT", onClick: logout, type: "button" });
-  }
+    if (!isAuthenticated()) {
+      defaultLinks.push({
+        name: "LOG IN",
+        link: "api/auth/discord",
+        type: "a",
+      });
+    } else {
+      defaultLinks.push({ name: "LOG OUT", action: logout, type: "function" });
+    }
 
-  let [open, setOpen] = useState(false);
+    return defaultLinks;
+  };
+
+  const menuItems = links || getDefaultLinks();
+
+  const [open, setOpen] = useState(false);
 
   return (
     <nav className="shadow-md w-full fixed top-0 left-0 md:hidden">
@@ -38,7 +61,7 @@ function HamburgerNav({ logo, logotext }) {
             open ? "top-20" : "top-[-480px]"
           }`}
         >
-          {Links.map((Link) => {
+          {menuItems.map((Link) => {
             return (
               <li key={Link.name} className="text-xl my-7">
                 {Link.type === "button" && (
@@ -57,6 +80,9 @@ function HamburgerNav({ logo, logotext }) {
                     {Link.name}
                   </a>
                 )}
+                {Link.type === "function" && (
+                  <button onClick={Link.action}>{Link.name}</button>
+                )}
               </li>
             );
           })}
diff --git a/client/src/pages/CalendarPage.jsx b/client/src/pages/CalendarPage.jsx
index 9c70ce75..901385a7 100644
--- a/client/src/pages/CalendarPage.jsx
+++ b/client/src/pages/CalendarPage.jsx
@@ -1,6 +1,7 @@
 import useDate from "../hooks/useDate";
 import Calendar from "../features/calendar/Calendar";
 import CalendarHeader from "../features/calendarHeader";
+import HamburgerNav from "../features/home/HamburgerNav";
 import FormProvider from "../contexts/FormContext";
 import Modal from "../features/modal/Modal";
 import UserForm from "../features/form/UserForm";
@@ -10,6 +11,7 @@ import EventModal from "../features/modal/EventModal";
 import { useModalContext } from "../contexts/ModalContext";
 import RejectionModal from "../features/modal/RejectionModal";
 import { useRef } from "react";
+import Logo from "../assets/images/togetherLogo.svg";
 
 function CalendarPage() {
   const auth = useAuthContext();
@@ -34,9 +36,10 @@ function CalendarPage() {
 
   return (
     <FormProvider>
+      <HamburgerNav logo={Logo} logotext="./logotext.png" />
       <main
         onWheel={handleWheelScroll}
-        className="flex flex-col gap-3 p-3 shadow-xs min-h-screen max-w-[1920px] mx-auto"
+        className="flex flex-col gap-3 p-3 shadow-xs min-h-screen max-w-[1920px] mx-auto relative z-[-1] md:z-[100] pt-24 md:pt-3"
       >
         <CalendarHeader date={date} />
         <Calendar date={date} />

From ee0d9cb9b2f107c4655ed2de833127d0a97293fa Mon Sep 17 00:00:00 2001
From: funbunch <shannan_bunch@hotmail.com>
Date: Sat, 15 Nov 2025 23:34:47 -0800
Subject: [PATCH 2/4] chore: trigger CI


From 290d12fdddbb7ba5268b89e8d5fdbe0a7399da74 Mon Sep 17 00:00:00 2001
From: funbunch <shannan_bunch@hotmail.com>
Date: Sat, 15 Nov 2025 23:40:48 -0800
Subject: [PATCH 3/4] chore: fix formatting (prettier)

---
 .github/CONTRIBUTING.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index f4a0038b..678f5c8c 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -78,14 +78,13 @@ Together's progress and milestones are split into separate, distinct issues. You
 
 > 💡 Issues tagged with `Good 100Devs First Try` are beginner-level issues that are great for fellow 100Devs.
 
-
 Currently we have the way to discover issues using Issue Tab.
+
 ### Issues Tab
 
 ![Screenshot of Issues tab on GitHub with example issues representing various stages of a project](assets/contributing-issues-tab.jpg)
 The [Issues tab](https://github.com/Together-100Devs/Together/issues) contains all of the issues that are currently in progress, planned to be worked on, or need further review.
 
-
 ## Editing code and submitting a pull request
 
 Use the following process to make changes after an issue has been assigned to you.
@@ -129,7 +128,7 @@ Now that you have a personal fork of the project on GitHub, you will be able to
 Now that you have the copy, you will need access to the feature branch related to your issue to create a local working branch to write your code.
 
 1. Set upstream to track the remote repository containing the original repo. (Not just your fork.)  
-                     
+
 2. Use this command to fetch the list of remote branches.  
    `git fetch upstream`
 

From d3302a86e5b9a49feb2f18f40c7d4d459a4fb192 Mon Sep 17 00:00:00 2001
From: funbunch <shannan_bunch@hotmail.com>
Date: Sat, 15 Nov 2025 23:46:23 -0800
Subject: [PATCH 4/4] chore: fix formatting CRLF (prettier)

---
 .github/CONTRIBUTING.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index 678f5c8c..da9e7ada 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -127,7 +127,7 @@ Now that you have a personal fork of the project on GitHub, you will be able to
 
 Now that you have the copy, you will need access to the feature branch related to your issue to create a local working branch to write your code.
 
-1. Set upstream to track the remote repository containing the original repo. (Not just your fork.)  
+1. Set upstream to track the remote repository containing the original repo. (Not just your fork.)
 
 2. Use this command to fetch the list of remote branches.  
    `git fetch upstream`