Week 8

Goals

Here are the goals for this week:

Build a reusable <Navbar /> component.
Build a responsive, toggleable <Sidebar /> component.
Connect them with React state to create a modern app layout.

Recap and a Quick Note...

I know a lot of people couldn't finish implementing state during last week's session, and that is ok! The concept of state is non-trivial and much harder to implement on your own than tasks from prior weeks.

Which brings me to my note...

If you have free time, go watch a YouTube video and go back in to try again! Even better, read the documentation!

I hate to admit it, but reading documentation is something I only really started doing a few months ago, and I realize now that it is extremely useful and a high ROI for your skills as a programmer/student/human imo.

Try it out!

Now for the objective...

Your Objective

Right now, our Kudos Board is just a form and some cards on a blank page. "Real" apps have navigation, a persistent header, and a consistent layout. When you click a menu button on a mobile site, you naturally expect a sidebar to behave and feel a certain way.

Let's build this.

Your goal this week is to build that static app layout. You'll create a <Navbar /> (top bar) and a static <Sidebar /> (side menu) using TypeScript, and use CSS to make them work together.

Motivation

You might be thinking, "Why are we making all these tiny Navbar and Sidebar files? Couldn't I just dump all the HTML into App.tsx?"

Welllll yes, you couldddd, BUT you'd be setting yourself up for a massive headache later.

This idea of breaking your UI into small, self-contained pieces is one of the most important concepts in React (and web dev).

Here's some reasons why:

DRY (Don't Repeat Yourself): This is a core programming principle. If you find yourself copying and pasting the same chunk of HTML/CSS/JS, you should probably make it a component. Why? Because if you need to change it, you only have to change it in one file, not 10.
It's just easier 🫣...
- Easier to Fix (Maintainability): If your navbar has a bug, you know exactly where to look: Navbar.tsx. You don't have to hunt through a giant 1000-line App.tsx file to find the broken <div>.
- Easier to Read (Readability): When someone else (or you, 6 months from now) looks at your App.tsx, they won't see a wall of code. They'll see <Navbar />, <Sidebar />, and <KudosBoard />. You instantly know what the page is made of.
- Easier to Grow (Scalability): Need another navbar on a different page down the line? Just import <Navbar />. A slightly different navbar? You can pass it a prop to change its behavior. This makes building new features way faster.

By building a clean <Navbar /> component today, you're building a something that you can trust, understand, and reuse anywhere, which is key to building large, complex projects.

Task Outline

Implement a responsive navigation layout. This will involve creating a <Navbar /> and <Sidebar /> component.

Your Checklist

To get this done, you'll need to:

Create two new component files (and two corresponding CSS files): Navbar.tsx (with Navbar.css) and Sidebar.tsx (with Sidebar.css).
Build the <Navbar />. It should just be a simple bar at the top of the page.
- Give it a title (e.g., "Kudos Board").
Build the <Sidebar />.
- It should be a vertical bar positioned on the left side of the screen.
- Add a few placeholder links inside like "Home," "Give Kudos," and "Profile." (don't worry about them not going anywhere yet!)
Style with CSS: Now, go into your .css files and make it look good!
- In Navbar.css, style the .navbar class to be a bar across the top. You might use position: fixed; or sticky; to keep it in view.
- In Sidebar.css, style the .sidebar class to be a vertical bar that's always visible on the left.
Assemble the Layout: In your main App.tsx (or a Layout.tsx component), arrange your components. You'll likely have the <Navbar /> at the top, and then the <Sidebar /> and your main content (the Kudos board) sitting side-by-side.

Some Hints...

CSS Layout: This is the new challenge! How do you make the main content flow around the static sidebar?
- Flexbox Method: You could wrap your sidebar and main content in a parent div with display: flex;.
- Padding Method: If you use position: fixed; for the sidebar, you must add padding-left to your main content container (and padding-top for the fixed navbar) to create space and prevent your content from being hidden underneath.

I'm done... what's next!?

Nice! You've got a fully functional layout.

This is a huge step. Next week, we'll look into how to make those sidebar links actually go to different pages by introducing React Router!