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.
The thought of simply using another template from that site was enticing to me, and it turned out to be easy enough to integrate the templated HTML files with an ExpressJS server in order to deploy my portfolio page with routes to different pages, but with some larger goals in mind, I felt it might be beneficial to use React to re-do the site. I also wanted to utilize the Styled Components library while creating the site. Anything you can do with Styled Components you can also do with a CSS stylesheet, but I felt to be able to use JavaScript when writing actual CSS declarations, rather than using scripting to change class names, would make things a little bit easier for me as I attempted to replicate styles and animations from a different site.
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.
