This blog I want to talk about CSS breakpoint and hamburger menu.
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.
- The height of sidebar is not the same as the height of the entire page. (solved)
- 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.