Creating Sliding Menu With Styled Components
Lately I’ve been working in revamping a website I had hastily thrown together for my father for a band that he runs, the Penn Central Wind Band. The original page had little thought going into it, other than “How can I get this up as fast as possible? It’s the day before Father’s Day and I think it would be nice to have this ready by brunch tomorrow.” The site did actually utilize a nice little bootstrap top menu, however as I was considering revamping the site, I had goal in mind to model it after my portfolio site, which I had put together with the help of a fantastic template from the site HTML5up. My portfolio site has one of those sliding menus, that is hidden until a button fixed to the top of the page is clicked, and then the menu slides out from the side. Then clicking again slides the menu back into its hiding place off to the side of the screen.
I am using the React Router library to create multiple pages for the site, and as such, one of the the first things to contend with is how to get the navigation bar component to show up on each page. It would certainly be an option to import the nav bar on each individual page, and then render it at the top before any of the content on the page. However, ultimately this will result in a lot of repetition, and could even result in more serious complications down the road — for example if you change the file structure of the project, you will need to be sure that all of the imports are adjusted accordingly. I suggest then, that it is going to be better in the long run to import the nav bar in the app.js file, and render it just above the switch statement that is required by React Router.
In the above example, the Nav component is included on line three, and by placing it there, it will be included on every route that’s been declared right at the very top of the DOM. Although the ultimate goal is to have the bar hidden off to the side when not in use, given its prominence and importance to the functionality of the page, it is ideal to have it listed first. The one thing that doing things this way seems to foul up a little bit is the NavLink component that comes with React Router. The NavLink component allows to style the links within the nav bar differently depending on whether or not the current url matches with a particular link. Although including the navbar outside of the switch statement in app.js seems to remove this functionality, I do have a workaround that seems suitable.
It may be an oversimplification, but from here on out with the proper overarching setup complete, to create the rest of the sliding menu effect is actually a pretty straightforward endeavor. The next post will go into further detail about the actual code behind the menu itself.