Implement responsive design - convert sidebar to top navbar below 700px screen width

[samgqroberts]

This PR is a companion to my blog post Responsively converting a sidebar to a navbar with React and CSS.

Relevant state of codebase and design up until this point

Before this PR, there are only two types of pages in the site:

Home (lists posts)	Post

Both pages share the left-hand sidebar, which contains a headshot that links to the Home page, and three links for other places to find me on the web.

These are the existing React components that factor into the page-level design:

...
pages/
  ...
  index.tsx      # Home page component
  posts/
    [slug].tsx   # Post page component (matches a post based on url "slug")
scripts/
  ...
  Menu.tsx       # The left hand sidebar component
  Content.tsx    # Container for whatever goes in the right hand column of the page

Commit 1: Prefactor

The first commit makes a simple but important change to prepare the codebase for an overhaul to page-level styling. Before this PR, the overall page layout logic (compose together a Menu and Content) was duplicated between index and [slug]. This commit puts that composition, which represents a page, into a new component that index and [slug] both now use: scripts/Page.tsx. All of the styling changes here affect that new component and Menu.tsx, which only it uses.

Commit 2: Mobile-first top navbar

The second commit removes almost all of the existing styles and implements a top navbar friendly to small screens. The Menu component now:

• shows as a top navbar instead of as a left sidebar
• nests the headshot image and link in another div, for better positioning
• hides the twitter, github, and linkedin links within an expandable nav menu.
  • a new MenuIcon is added to the top navbar to expand / collapse this nav menu
• tracks whether the user has clicked outside of the expanded nav menu and collapses the menu if so
• shows a "Home" link in the expanded nav menu (which duplicates the functionality of the headshot link)

The main mechanism that leads to the mobile-friendly design is the expandable nav menu. The top nav has a clickable icon (sometimes called the "Hamburger icon") that will update React state when clicked, controlling the presence or absence of a css class .menuOpen on the nav menu container. Without .menuOpen the max-height of the nav menu is 0 (so it won't show up). With .menuOpen the max-height is set to be larger than the contents are expected. Along with the transition style in the CSS this will animate the opening and closing of the nav menu. The styles in general.module.css have been carefully annotated to explain how they achieve the top navbar design.

Result on an iPhone X screen size (375 x 812)

Before Commit	After Commit

Commit 3: Bring back large-screen-appropriate styles

The third commit makes the site look like it did before this PR for large screens (the second commit removed all large-screen specific styling considerations). It accomplishes this primarily with the use of the @media query in general.module.css, ensuring that the large-screen styles only get applied if the screen is detected to be wider than 700 pixels. Again, the styles have been carefully annotated.

Result on larger screen size (980px wide)

Before Commit	After Commit

Commit 4: Refactor and Document

The fourth commit captures our newfound understanding of the navbar, nav menu, and responsive design in names and comments in the codebase.

• Menu.tsx -> NavBar.tsx
• relevant parts of page and navbar styles moved from general.module.css to page.module.css
  • (this is most of the styles)
• page-level styles and components moved into new package together
  • scripts/NavBar.tsx (formerly Menu.tsx) -> scripts/page/NavBar.tsx
  • scripts/Page.tsx -> scripts/page/Page.tsx
  • new file scripts/page/page.module.css
• settled on naming scheme: the left sidebar / top navbar is called a "NavBar", the navigation link container (expandable for small screens, within sidebar for large screens) is called a "nav menu."

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/samgqroberts/samgqroberts-dot-com/697jvkc9l
✅ Preview: https://samgqroberts-dot-com-git-responsive.samgqroberts.vercel.app