Skip to content

Mob hamburger menu #649

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
funbunch wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Mob hamburger menu #649

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e641697
feat: add mobile hamburger menu
funbunch Nov 10, 2025
3963e4a
Merge branch 'Together-100Devs:main' into mob-hamburger-menu
funbunch Nov 16, 2025
ee0d9cb
chore: trigger CI
funbunch Nov 16, 2025
290d12f
chore: fix formatting (prettier)
funbunch Nov 16, 2025
d3302a8
chore: fix formatting CRLF (prettier)
funbunch Nov 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions .github/CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -128,8 +127,8 @@ 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`

Expand Down
8 changes: 4 additions & 4 deletions client/src/features/calendarHeader/CalendarHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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}
Expand All @@ -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"
Expand Down
52 changes: 39 additions & 13 deletions client/src/features/home/HamburgerNav.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }) {
Copy link
Copy Markdown
Collaborator

@geraldiner geraldiner Sep 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we're specifying links as a prop now, could we send the defaultLinks at the parent level? My 2 cents is that the HamburgerNav should only display the links as passed, and not worry about the logic for determining what they should be.

Something like

// CalendarPage.jsx
const CALENDAR_NAV_LINKS = [...list of links here]

<HamburgerNav logo={Logo} logotext="./logotext.png" links={CALENDAR_NAV_LINKS} />
// LandingPage.jsx
const LANDING_NAV_LINKS = [...list of links here, can also do logic for signed in/out]

<HamburgerNav logo={"./logoicon.png"} logotext={"./logotext.png"} links={LANDING_NAV_LINKS} />

Copy link
Copy Markdown
Collaborator Author

@funbunch funbunch Sep 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe I had something like that before, but I wasn't getting it to work. My limited understanding, I'm sure. So kept it what seemed easiest in HamburgerNav.

I'm open though, and interested in what any other reviewers think!

Copy link
Copy Markdown
Collaborator

@DevinCLane DevinCLane Nov 4, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

checking in again on this @funbunch. Did you want to implement this change or not? I think it's fine to merge for now, then we could make a separate issue for this refactor if we want to.

@geraldiner i think that @funbunch wasn't clear on how to implement this. if you have capacity could you help, otherwise we will merge it as is.

thanks!

Copy link
Copy Markdown
Collaborator

@geraldiner geraldiner Nov 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So sorry it's been a while and even I forgot the context of my own comment. 😅

I'd say merge as-is for now. There might be some other things to refactor for the component and don't want to slow this PR down.

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">
Expand All @@ -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" && (
Expand All @@ -57,6 +80,9 @@ function HamburgerNav({ logo, logotext }) {
{Link.name}
</a>
)}
{Link.type === "function" && (
<button onClick={Link.action}>{Link.name}</button>
)}
</li>
);
})}
Expand Down
5 changes: 4 additions & 1 deletion client/src/pages/CalendarPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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();
Expand All @@ -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} />
Expand Down
Loading