Taking a Bite out of Hamburger Menus in React

Austin Labador — Tue, 27 Jun 2023 03:56:19 +0000

Introduction

Hamburger menus are a common yet important part of an application's user interface that helps with navigation. They make navigation cleaner, provide top-level access, and are a very familiar icon to many users. In this article, I explore my process in creating a hamburger menu, and the hiccups along the way.

The Problem

I wanted to create a nav menu that shows when you click on a hamburger menu icon. When the menu shows, you should be able to click on those links and navigate to those menus, with the nav menu closing automatically. Additionally, you should be able to exit out of the menu when you click outside of it.

The Process

I started off with just an onClick. So you can open up a menu, but you can only close the menu when clicking the hamburger icon again. If you click outside, the menu stays there. This is fine, but not the greatest for UX.

I did some research and these were some of the resources that helped me most.

Focusing on Dynamically Added Element

Adding Hamburger Menu

ForwardRef

This was what I found worked the best for me.

Implementation

Click on nav button, handleClick to change state.
I set up a useEffect hook that runs every time the value of toggleNav(state) is changed.
Create a useRef hook to reference child component with forwardRef, which will be focused.
Since nav menu is conditionally rendered (when hamburger is clicked), setTimeout to focus on the newly rendered menu (child component).
Set up an event listener to
check if nav menu (toggleNav) is true,
if useRef current has a value,
and if the value of the currently clicked target (e.target), taken from the event listener, is not equal to useRef current.
If all the above conditions are fulfilled, then setToggleNav to false. This will make the nav bar close when you click anywhere that is outside of the ref.
Then remove the side effect (event listener) at the end of useEffect.

Resolving Final Issues

After trying a few different combinations of things, I was finally able to get my navbar to work. When I clicked outside of the menu, it would close. But now, when I clicked on the hamburger menu, it would stay open, or rather reopen!

At first I tried changing the conditions to the event listener, but that didn't give any good results. I ended up going with a CSS solution, preventing the user from clicking the hamburger menu icon again by hiding it.

Now that gave a different result, because the menu was a child component of the hamburger menu. So I added a class that would reduce the height and width of the component to 0 on click. This was what worked the best.

What I thought would be a simple task turned out to be a little more complicated. But, I was able to learn and get practice with useRef, a hook I was not very familiar with!

Upgrading my Portfolio - Process (HTML, CSS, JS to ASTRO.js )

Austin Labador — Sun, 18 Jun 2023 22:54:21 +0000

A portfolio is something developers use to tell people who they are, and what they can do. It’s a showcase of our best work.

When I started off creating my portfolio, I was eager to show off all the projects I created. However, I didn’t consider maintainability. My files grew larger, it took longer to scroll through a single file to make changes to multiple copies of the same element, and it was eventually just a pain to change things around. I started looking into component-based solutions, and eventually found one that balanced speed and dev experience, which for me -- was Astro.

Old Portfolio

For my first iteration of my portfolio, I started off in pure vanilla HTML, CSS, and JS, eventually adopting Tailwind CSS. I figured since it was mostly a static site, it would be good to practice the fundamentals.

However, as I continued to develop the site, it began to be hard to maintain as the content and site grew. For a landing page style portfolio on a single page, the file ended up having around 600 lines of code. I added Tailwind CSS as well, making the HTML tags even longer to read through.

<article class="py-6 flex flex-col">
  <img src="./img/wewatch.jpeg" alt="wewatch website" class="rounded-lg object-cover object-top h-48 lg:h-64">

  <h1 class="text-3xl py-4">WeWatch</h1>

  <div class="flex py-2 flex-wrap gap-1">
    <p class="inline-block px-2 py-1 text-xs font-semibold rounded-xl bg-blue-400 text-gray-900">
      Node.js
    </p>
    <p class="inline-block px-2 py-1 text-xs font-semibold rounded-xl bg-blue-400 text-gray-900">
      Express.js
    </p>
    <p class="inline-block px-2 py-1 text-xs font-semibold rounded-xl bg-blue-400 text-gray-900">
      MongoDB/Mongoose
    </p>
    <p class="inline-block px-2 py-1 text-xs font-semibold rounded-xl bg-blue-400 text-gray-900">
      EJS
    </p>
    <p class="inline-block px-2 py-1 text-xs font-semibold rounded-xl bg-blue-400 text-gray-900">                                
      API
    </p>
    <p class="inline-block px-2 py-1 text-xs font-semibold rounded-xl bg-blue-400 text-gray-900">
      MVC Pattern
    </p>
    <p class="inline-block px-2 py-1 text-xs font-semibold rounded-xl bg-blue-400 text-gray-900">
      Passport.js/Auth
    </p>
  </div>
  <p class="font-light text-gray-300 text-base py-2">
                            A shared show watch list using Mongoose + MongoDB, Express.js, Node.js and EJS.
  </p>
  <div class="flex gap-2 pt-2 items-center mt-auto justify-self-end">                            
    <a                           
      href="https://wewatch.cyclic.app/"
      target="_blank"
      class="pr-2 text-xl hover:text-orange-400 dark:hover:text-orange-400"
    >
     <i class="fa-solid fa-link"></i>
    </a>                             
    <a href="https://github.com/alabador/wewatch"
       target="_blank"
       class="pr-2 text-xl hover:text-orange-400 dark:hover:text-orange-400"
    ><i class="fa-brands fa-github"></i
                            ></a>
</div>
</article>

Now keep in mind, this code above was formatted for the purpose of readability on the blog. But on the actual codebase before...the formatting was much worse. (in hindsight I should have used a code formatter like Prettier though).

Here's the link to my old branch of my portfolio. The live site is down for it, but the code is all still there.

Component-Like Client-based JS

So at the time of development, I didn't have too much experience with React and other component-based libraries. I was still fairly new to web development, so I used what was in my toolset.

During the process, I knew there had to be an easier way than hardcoding HTML into my website. I tried using JS to declutter the HTML, creating functions that would dynamically create elements then append to the DOM. Essentially doing something like this:

function addElement() {
  const projects = document.querySelector('.projects');
  const newProject = document.createElement("article");
  projects.appendChild(newProject);
}

I skipped a few details, but I also created a JS object that held the information of my projects, then added that for each project within another function.

Moving to React/Astro

Doing things this way was fine for a while. Fast forward a few months, and as I started to grow as a developer, I picked up more experience with React. My portfolio looked like it needed a revamp considering the new things I learned. I started looking towards more component based tech, and considered React and Next.js.

However, these seemed to be too much overhead for a simple mostly-static site. I discovered Astro, and I fell in love with how easy it was to use, how fast it was, and it's ability to have partial hydration. So my site could still be static, and only the parts I needed React on (if I wanted to implement React) would have client-side JS.

Here's the link to the Github for my portfolio if you want to keep up with the progress: Portfolio Link - Github

Forem: Austin Labador