Create A Menu For Your Gatsby Website Without Libs
How to create a menu for your Gatsby website without the use of any libraries or dependencies
I share one trick a day until the end of the COVID-19 quarantine in Switzerland, April 19th 2020. Twenty-one days left until hopefully better days.
I have developed my personal website with Gatsby but without using any templates or any design libraries. No particular reason, I just like in my personal projects to restrict the use of dependencies when I can. Thereby, I had to build my own simple menu for the navigation which I’m sharing with you today.
Menu Component
The menu is nothing else than a component which contains a state to reflect its status, being open or close. Its only particularity is the fact that we have to expose a function open() in order to be able to trigger its opening from the navigation, in my case, from the hamburger menu in the navigation bar. For such purpose we use Hooks API useImperativeHandle to customize our instance.
import React, { useImperativeHandle, useRef } from "react"
import { Link } from…
