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

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…

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.

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