Updates

• Added RootLayout.jsx for reusing a single a navbar across all pages
• Changed react-router-dom to react-router
• Added expanding animation to the navbar when the path is “/” and shrinking animation on other paths except “/”
• Designed the course part in course page

What I wanted

Before I added the navbar inside home page but after creating the course page I realized that I would want the navbar to be reusable across all pages. Also I wanted the navbar to expand in other pages expect the home page.

Switch to react-router

I was using react-router-dom for managing routes. I tried to look up the docs to make the navbar reusable. I couldn’t find anything and saw that react-router-dom just used react-router so I thought it’s was not necessary for me to use react-router-dom so I just switch to react-router.

Navbar animation issue

Animating navbar to expand and shrink was a mess. It’s look really simple and it is simple but not for my brain. I first thought of making the width to 100% and set align items to center. The width part animated as expected but the align items didn’t. Then I thought of using position absolute and centering the nav but now the navbar wasn’t respecting the nav-container’s padding. It was frustrating so I took help of claude and centered it using y property by doing some maths.

Time flies

I also had issue with the timeline reverse not working but I think I should stop my complains here.
I am rambling here because it took too long to do too little 😭 .

Designing the course page

On the positive side the I have started working on the design of course page. I have only done a small part but it’s looking amazing. The part other part that don’t look right were the design which I made during the start of the project. Rn I am just refining that previous design of mine, that’s why the navbar looks different in figma.

Hope you have a nice day ❤️