How to build a Responsive Navbar in 7 mins - Using React and TailwindCSS

[@YangoMangoHD]

Not one to normally comment but thank you so much! Building a hamburger menu for the first time and all other videos were upwards of 15 minutes. Thanks for making it short, concise and to the point 🙏

[@raj_talks_tech]

Thanks for the feedback !

[@tirthadeva_yoga]

Thank you very much, bro! You are really helped me.
Namaste from Russia!

[@atotamashii]

Just learning tailwind, I know what it does but i dont know how to do it :D but fortunately, saw your vid :D Thanks man keep it up!

[@mdbdrrhm]

Great Job! Thanks for sharing your code and how it is done with Tailwind CSS.

[@serxsux9170]

thank you so much! How do you make the dark mode button outside the drop-down menu in responsive mode? as it appears at the beginning of the video, I have tried to do that but it doesn't work

[@raj_talks_tech]

Oh that is a remix logic I made another video about it called "dark-mode in Remix", I think you can also use next-themes for that if you are using next.js

[@serxsux9170]

@@raj_talks_tech Thank you, can you bring this same code to Astro 4?

[@MrItzreal]

Straight to the point! No bs! No clickbait! Kept his word and wrapped everything in under 7 minutes.

[@tanoryjakaperdana1419]

Its 6 minutes and 50 seconds

[@NotWorkingChannel-dq7rn]

@@tanoryjakaperdana1419 Thats under 7 minutes

[@buhito23]

A tip if you are going to use the editor with limited width to display the browser, try to use the line wrap in the editor and reduce a little bit the typography since you make changes and it gets lost where you modify because of the width of the editor.

[@raj_talks_tech]

will do thanks

[@akankshachoudhary7903]

Hi, I wanted to know when you are clicking on the button it is opening quickly, I want that transition to be smooth like it should show from where the nav bar is opening slowing So I can get to know whether it is opening from the right side, left or from the top, currently it is not visible from where the nav bar is opening in mobile view.

[@fullstack-insights]

But how navbar is opening smoothly

[@AngelaCui-fn2tn]

Thank you so much for sharing! I've tried to reproduce this but for some reason the navbar disappears after clicking home. Then will re-appear after clicking refresh page. Any ideas?

[@raj_talks_tech]

@@AngelaCui-fn2tn Not sure about ur use-case, can you post it on my discord channel ?

[@Demmyabs]

Hi raj could you please make how to set up sass in next js project please I tried and I couldn't get it I also read the docs still same

[@rbedson8965]

is it good idea to make the duplicate of menu element which you have made for home and blog

[@olekorvald5148]

Hey, nice video. I have not used tsx so much (only jsx), so I was wondering if you have to use tsx for the navbar or if the files can be created with jsx as well ( Header.jsx instead of Header.tsx for instance)?. Is it possible that you can send the commandlines for the packages that you used in this video? :)

[@raj_talks_tech]

Everything can be found in the attached codebase in the description. You can simply change the files to jsx and remove only the types

[@baraa7869]

but there is a small bug, when isOpen is true and you expand the screen, the vertical nav links are still visible over the horizontal one

[@pablokrainuk8530]

i fixed it like that:
useEffect(() => {
function handleResize() {
setWidth(window.innerWidth);
}
window.addEventListener("resize", handleResize);
return function cleanup() {
window.removeEventListener("resize", handleResize);
};
}, []);
const isSmallScreen = width

[@Stranger-xn6kf]

@@pablokrainuk8530 i am getting width is not defined in the console

[@kaiserz3843]

Thankyou so much man! just started learning and u helped me ;D

[@Nirusvlogs]

Thanks for menu. How to fix content without moving down. Menu over lay top of content

[@ilyas_babu]

How to add animation on toggle menu

[@NotWorkingChannel-dq7rn]

When i try to follow i receive a destructure error when i try to use NavLink.
TypeError: Cannot destructure property 'future' of 'React.useContext(...)' as it is null.
The above error occurred in the component
For what reason would this error affect me when during the video, this did not happen to you?

[@KaelThresh]

in main.tsx surround your App component with BrowserRouter (from the react-router-dom)

[@Demmyabs]

thanks it was helpful and clean code structure

[@Eyuelfrew]

thanks, keep it up brotehr

[@thivatutorials4040]

super bro

[@lillyr.9139]

So good!!!

[@jalexba]

what about if you made a fullstack tutorial with remix.. maybe a MERN sack or something like that?

[@raj_talks_tech]

There is a fullstack remix tutorial that I have made btw :) check out my channel

[@s_l0th]

Thanks a lot Raj!

[@book2nez500]

Thank you
I just subscribed

[@jesusre8495]

Excelente, muchas gracias!

[@krzysztofrozbicki1776]

Ahhh i miss the part where you would be explaining the line 5 of code with activeStateCallback - that suddenly appears without any explanations. I was just searching web on how is the easiest way to implement tailwind into isActive default class for Navlink. But not here :(

[@stewartbatallasminda4024]

so useful!

[@raj_talks_tech]

Glad you found it useful !

[@sciencekesadhan1107]

bro..............goood

[@SalmanShah95]

Thanks

[@WebSpyder32]

It maybe only be in my project but i think the styles are not exactly as they should be as seen in the video

[@sciencekesadhan1107]

ghood job...

[@adrianCoding]

Nice

[@Mickeydollar_9]

Tysm

[@williangabriel6335]

THX BRO!

[@sciencekesadhan1107]

waah ji waah

[@ericksegura478]

Muchas gracias

[@sciencekesadhan1107]

Bro while typing plzzz zoom the screen plzzzzzzzzzzzzzz

[@sciencekesadhan1107]

love you...

[@sudarshanpatekar5632]

Well this was not useful, Firstly you put in the title that it is ReactJs but it was Remix not having single JS file. Secondly you did not show where to import the Header and NavLinks, the components which were made.

[@musician_new]

You should make project setup video first so that we can also start coding with you

[@sciencekesadhan1107]

hey bro ............

[@sciencekesadhan1107]

kabhi hindi me kar liya

[@mirjalol49]

didnt get a shit, sorry

[@raj_talks_tech]

Sorry for that. What could've been done better ?