React + SASS Navbar Component | Fully Responsive | ReactJS Project Tutorial

In this video, I will be walking you through the build process for a fully responsive and reusable header / navbar component built with the popular JavaScript framework React and the css preprocessor SCSS.

📁 Assets

A like on this video and a subscription to the CodeFocus channel would be greatly appreciated!

⏱️ Timestamps
0:00 Initial Setup
3:45 SASS Setup & Variables
11:45 Navbar JSX & Styling
33:30 Navbar Functionality
37:00 Navbar Alt Format
38:35 Outro

👍 Thanks for watching!
Make sure to like and subscribe for more.
Comment what you'd like to see from this channel in the future!

[astroboy]

Great video, if possible please make more React + SASS components ✨👏

[erinerin]

a little tip: you can use map for mixin instead of writing it down for every variable.
$breakpoints: ("medium": "40em", "large": "64em", "xlarge": "87.5em");
@mixin breakpoint($size){
@media (max-width: map-get($breakpoints, $size)){
@content;
}
}

[Sohneg]

Thank you for the tutorial. I am new to scss, and I was wondering which part makes the responsive design. Where do you say, now you have to change to another resolution?

[kenthefley]

Node-sass has been deprecated. I wish someone would do a tutorial on how to set up dart sass in React.