loading...
Cover image for Create A Menu For Your Gatsby Website Without Libs

Create A Menu For Your Gatsby Website Without Libs

daviddalbusco profile image David Dal Busco Updated on ・3 min read

One Trick A Day (35 Part Series)

1) How To Call The Service Worker From The Web App Context 2) Replace Environment Variables In Your Index.html 3 ... 33 3) Inject JavaScript Or CSS At Runtime And On Demand 4) Sometimes You Just Need A Dumb Library 5) Internationalization with Gatsby 6) How To Declare And Use Ionic Modals With Stencil 7) Get App Name And Version In Angular 8) Deploy Apps And Functions To Firebase From A Mono Repo With GitHub Actions 9) Starting In A New Company? Think Npmrc And Git Name 10) Test Angular Pipes With Services 11) Gatsby Tricks: Viewport, CSS Modules Transition And i18n Tricks 12) Takeover The Cordova Facebook Plugin Maintenance 13) Protect Your HTTP Firebase Cloud Functions 14) Create A Menu For Your Gatsby Website Without Libs 15) Create A Modal For Your Angular App Without Libs 16) Add A Slider To You Angular App 17) Test Angular Components and Services With HTTP Mocks 18) Merge Two Objects And Array To Object In JavaScript 19) JSX For Angular Developers 20) More JSX For Angular Developers 21) Create Your Own NPM Cli 22) Third Party Service Providers. Be transparent to each other! 23) React And Web Workers 24) Angular Testing: Mock Private Functions 25) React, Web Workers and IndexedDB 26) React, Web Workers, IndexedDB and ExcelJS 27) GitHub Actions: Hide And Set Angular Environment Variables 28) JavaScript Useful Functions 29) Deeplinking in Ionic Apps With Branch.io 30) Follow-up: Web Push Notifications And PWA In 2020 31) Angular And Web Workers 32) Git Commands I Always Forget 33) An Open Source Medium Like WYSIWYG Editor 34) Currency Picker And Formatter With Ionic React 35) Develop A Konami Code For Any Apps With Stencil

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.

daviddalbusco.com


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 "gatsby"

import styles from "./menu.module.scss"

class Menu extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      open: false,
    }
  }

  render() {
    return (
      <div
        role="button"
        tabIndex="0"
        className={`${styles.menu} ${this.state.open ? `${styles.open}` : ""}`}
        onClick={() => this.close()}
        onKeyDown={() => this.close()}
      >
        <Link to="/"><h1>Home</h1></Link>
        <Link to="/#portfolio"><h1>Portfolio</h1></Link>
        <Link to="/#about"><h1>About</h1></Link>
        <Link to="/blog"><h1>Blog</h1></Link>
        <Link to="/#contact"><h1>Contact</h1></Link>
      </div>
    )
  }

  close() {
    this.setState({ open: false })
  }

  open() {
    this.setState({ open: true })
  }
}

export default React.forwardRef((props, ref) => {
  const menuRef = useRef()

  useImperativeHandle(ref, () => ({
    open() {
      menuRef.current.open()
    },
  }))

  return <Menu ref={menuRef} {...props} />
})

For the styling, I use CSS modules in the above example. The menu is as a fixed div which covers the all screen and is per default not visible. With the help of the state, I apply a style to modify its opacity with a small transition to make the menu appears a bit smoothly.

.menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #ffffff;
  z-index: 1031;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  visibility: hidden;
  opacity: 0;

  transition: all 0.35s;

  cursor: pointer;

  &.open {
    visibility: visible;
    opacity: 1;
  }

  a {
    pointer-events: all;
  }
}

Integrating The Menu

To use the menu in the navigation, I have integrated in its related component. The only particularity I had to develop is assigning a reference in order to be able call the method open() from an onClick function.

Note that as the menu inherits a fixed style, it can be integrated at any level of the DOM.

import React from "react"

import Menu from "./menu"

class Navigation extends React.Component {

  render() {
    return (
      <>
        <button onClick={() => this.toggleMenu()}>
          Open Menu
        </button>

        <Menu ref={el => (this.childMenu = el)} />
      </>
    )
  }

  toggleMenu() {
    this.childMenu.open()
  }
}

export default Navigation

That’s it, nothing more, nothing less, we have developed a custom menu for our website without any JavaScript dependencies 😁.


Summary

I like to use Gatsby for website. It has many advantages and I think it is also cool for me that it uses React as I like on a weekly basis to not stick to the same technologies. A bit of Angular, a bit of React, a bit of Web Components with StencilJS, a bit of vanilla JavaScript, everything is only fun 😉.

Stay home, stay safe!

David

Cover photo by Catherine Heath on Unsplash

One Trick A Day (35 Part Series)

1) How To Call The Service Worker From The Web App Context 2) Replace Environment Variables In Your Index.html 3 ... 33 3) Inject JavaScript Or CSS At Runtime And On Demand 4) Sometimes You Just Need A Dumb Library 5) Internationalization with Gatsby 6) How To Declare And Use Ionic Modals With Stencil 7) Get App Name And Version In Angular 8) Deploy Apps And Functions To Firebase From A Mono Repo With GitHub Actions 9) Starting In A New Company? Think Npmrc And Git Name 10) Test Angular Pipes With Services 11) Gatsby Tricks: Viewport, CSS Modules Transition And i18n Tricks 12) Takeover The Cordova Facebook Plugin Maintenance 13) Protect Your HTTP Firebase Cloud Functions 14) Create A Menu For Your Gatsby Website Without Libs 15) Create A Modal For Your Angular App Without Libs 16) Add A Slider To You Angular App 17) Test Angular Components and Services With HTTP Mocks 18) Merge Two Objects And Array To Object In JavaScript 19) JSX For Angular Developers 20) More JSX For Angular Developers 21) Create Your Own NPM Cli 22) Third Party Service Providers. Be transparent to each other! 23) React And Web Workers 24) Angular Testing: Mock Private Functions 25) React, Web Workers and IndexedDB 26) React, Web Workers, IndexedDB and ExcelJS 27) GitHub Actions: Hide And Set Angular Environment Variables 28) JavaScript Useful Functions 29) Deeplinking in Ionic Apps With Branch.io 30) Follow-up: Web Push Notifications And PWA In 2020 31) Angular And Web Workers 32) Git Commands I Always Forget 33) An Open Source Medium Like WYSIWYG Editor 34) Currency Picker And Formatter With Ionic React 35) Develop A Konami Code For Any Apps With Stencil

Posted on by:

daviddalbusco profile

David Dal Busco

@daviddalbusco

Creator of DeckDeckGo | Organizer of the Ionic Zürich Meetup

Discussion

markdown guide
 

I am currently making an ecommerce site with gatsby tailwind, and I was able to open a modal menu using the information you provided. Thank you.

 

Awesome!!! My pleasure and thank your for the feedback 😃