I've been thinking about wether I should have two different navigation bar one for mobile and for deskptop and just conditionally render one or another, Or if I should just go all the way with queries and more conditional render on the javascript itself, what would you suggest? My navigation bar also varies on wether the user is Logged in or Not. Thanks in advance.
I would suggest using media queries. If you render navigation for mobile and desktop, you will need JS logic to determine which viewport you are on. If your React application always needs to figure out which viewport it is on first on the client-side, it could result in unsightly reloading or flashing. You would need hooks like useEffect to determine which viewport you are on. However, if all your React components have server-side rendering for example, then this is not very efficient. Have a look at TailwindCss, there it is easy you use media queries. Or check your favorite websites that also have different versions of navigations to figure out their way of doing it. If you want to customize the navigation depending on whether the user is logged in or not, I would recommend usin createContext/useContext .