DEV Community

Cover image for Building a Professionally Designed Website Episode 3 - Header & Footer, Hamburger Menu, Animating SVGs
James Mikrut for Payload CMS

Posted on • Originally published at payloadcms.com

Building a Professionally Designed Website Episode 3 - Header & Footer, Hamburger Menu, Animating SVGs

This is Part 3 in our deep-dive into how to develop a professionally designed, high-end NextJS + Payload CMS website from start to finish.

In this episode, we're diving deep into React. You'll learn how a design agency organizes its components and you'll start to see a lot of the CSS boilerplate that we defined in Episode 2 start being put to use. We're going to build and animate the Header, Footer, and Mega Menuβ€”all in React and TypeScript.

Table of Contents

  • 0:00​ - Intro
  • 3:33 - The logo - an SVG React component
  • 12:02- Animating the hamburger button
  • 25:13​ - Retrieving menu global data from Payload
  • 32:27- Building the main menu
  • 38:48- Building a CMSLink component
  • 48:25- The animated "Let's Talk" SVG call to action
  • 55:35- Building the Footer
  • 1:14:06- Outro

Use Payload for free

Check out Payload for free, forever. The Personal License gives you everything Payload does, all for free. We think you'll find Payload's developer experience second to none. It just feels right to build sites and apps with it.

Feedback welcome

As always, let us know what you think about the video - and about Payload!

Top comments (1)

Collapse
 
marcellahaller profile image
marcellahaller

Hi, it's great that you share your knowledge and experience, thanks! there is also a good post about footer design and its components gapsystudio.com/blog/website-foote... highly recommended reading.