Part B on Release0.4

This blog I want to talk about CSS breakpoint and hamburger menu.

CSS breakpoints are points where the web page layout renders according to the device width. It’s also known as media query,  applying styles with the CSS @media.

The figure illustrates three layouts with three different screen width.

In release0.4, I set screen max-width 768px as mobile header version.

Now, I use CSS @media query to implement hamburger menu in one component Header.js. When you click the three-line menu icon, a side navigation shows up. Mobile header looks like:

Problems need to be solved.

  1. The height of sidebar is not the same as the height of the entire page. (solved)
  2. Click anywhere to close the sidebar. (solved)

You can find this part of solution here. I will keep addressing the problems.

Updated on Dec.12, all issues are fixed. The final PR is here.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s