Creating My First Website

Part I: The Sidebar

Now that I had finished the Software Engineering program at Flatiron School and officially started my job search before Christmas, I need to have a project to work on in order to show off my skills. It’s a bit as intimidating as when I started my final project, and sometimes wonder if I’ll be able to pull this off. But to be honest, there’s no better way to tackle a project than to tackle said project.

My first obstacle is creating a Sidebar for my portfolio website. I want users who visit my site to be able to navigate between my main page and the page with all my projects. Only problem was, I could not understand Semantic UI React’s docs on how to create a sidebar. Thankfully, a tutorial (https://www.youtube.com/watch?v=lt9x2-0Vnr4), helped clear things up enough for me to implement a sidebar how I want it to.

First thing’s first: Create a Sidebar component in your files.

Place the Sidebar file in your component folder.

Then, in that file we’re going to import the Sidebar components from Semantic UI React. If you haven’t already, install Semantic UI React with npm install semantic-ui-react semantic-ui-css

Next, create a function component that will have props passed into it, more on that later. Then simply create a Sidebar component from Semantic UI Reacts docs with the following attributes and Menu Items:

Then go back and type out the variables and functions that’ll be passed into both the NavBar and Sidebar component we’ll be using.

Now for the explanation as to how this is all working.

Line 8 creates a variable “toggle,” and a function called “setToggle,” to change it’s value, which in this case is established as “false.”

In line 10 we create a function called “handleToggleMenu,” that’ll call the setToggle function and pass that into the NavBar component on line 16 in the prop “onToggleMenu.”

In the NavBar component, we attach the “onToggleMenu,” which holds the “handleToggleMenu,” function to an onClick handler so that whenever the Menu span is clicked, the function will run.

Now whenever toggle is changed, we’ll need to pass that value down to to sidebar so that it shows when we want it to show.

So we pass that variable into the “toggleMenu,” props which will be placed within the “visible” attribute of Sidebar.

Now when all is said and done, our sidebar should look like this once Menu is clicked:

And this once Menu is clicked again:

This is by no means a perfect way, but it is a start. And hopefully once I practice with it some more and continue to expand my site, I’ll refine it and get it working in a way that is common on other sites.