How to make a basic collapsable side bar

Styling in React is made a lot easier with the ‘react-bootstrap’ library of components and styles that are easily available. Doing something like making a nav bar at the top of your app takes only a few lines of code…but for some truly unfortunate reason, moving that nav bar to the side of the app( a SIDEBAR?) isn’t quite as easy. In this brief code along, we’ll make a sidebar that looks like this:

Image for post
Image for post

To keep things concise, I’m going to gloss over installing and importing Bootstrap and all the routing components for React. I’m also going to assume that you’re already familiar with how to use both, so check out those links if something isn’t clear along the way (their documentation is amazing).

Do yourself a favor — let this never be a problem again

Have you ever wanted a message to only show up for a few quick seconds, rather than stick around and ruin the aesthetic of your app with its bright red font? Or only give a user a certain amount of time to complete some action? Luckily for you, vanilla JavaScript has you covered with the built-in setTimeout and setInterval functions. UN-luckily for you, implementing them in React can be a challenge initially. Your first go round, you’re almost certain to either break the timer or break your app via an infinite rendering loop. …

Teach me how to use Github Projects

~One day on Zoom~

You: Hey Ben, ready to get working on Navigator? You seemed really excited about it literally last week…

Me: Wow thanks so much for just coming right in here and reminding me! Let me drop everything and do that with you.

Me: Ok, now what?

You: ….well I mean, it’s your project right? What do you want to do?

Me: Well, I guess we should probably start by programming.

You: I….I do agree, but maybe let’s take a step back first and think about this. …

- A simple way to build complex narratives.

Part I — Modeling the concept

Thanks so much for reading. I’ll be updating this project regularly, follow this GitHub link if you’d like to have a look or make any contributions.

Like many people, when I first started programming I wanted to make a text game. This is no easy task for a beginner — not only must they write a program to play a story, but they must also write said story. I’ve read and written my entire life, but bringing it together with programming proved challenging to say the least. Ultimately I never finished it, and it’s something that’s bothered me ever since.

I’ve come a long way as a programmer and a developer since then, and have decided to finally come back and finish what I started. …

Image for post
Image for post

My module 1 project could’ve gone way better folks.
I started out pretty strong. I knew what I had to do, and I knew how to do it. But my window was short; I had less than 2 days to do the entire project. As the deadline rapidly approached I began to panic, and my work became messier and messier. With only a few hours left, I realized I would only have a half finished project. Or at least, to me it was a half finished project. …


Ben Looper

Technology. Software. Space. LOTR.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store