<div>
{ auth ?
<nav className="nav-ul navbar navbar-dark bg-zinc-800 fixed w-full top-0 z-10">
<div className="container flex sm:flex-row flex-col gap-2 justify-between items-center">
<h1 className="fs-3">
<Link to='/' className="text-white ">
<span className="hover:text-blue-600">Music Essentials</span>
</Link>
</h1>
<div className="flex items-center gap-4">
<ul className="flex items-center gap-5 text-white">
<li>
<a href="/home">Home</a>
</li>
<li>
<div className="dropdown-menu">
<Link to="/music">
Music
</Link>
<div className="menu-content">
<a className="links-hidden" href="/genre">
Pop
</a>
<a className="links-hidden" href="/Hiphop">
Hip Hop
</a>
<a className="links-hidden" href="/Rock">
Rock
</a>
<a className="links-hidden" href="/EDM">
EDM
</a>
<a className="links-hidden" href="/RandB">
R&B
</a>
<a className="links-hidden" href="/Jazz">
Jazz
</a>
</div>
</div>
</li>
<li>
<Link to="/Store">
Store
</Link>
</li>
<li>
<a href="/News">News</a>
</li>
<li>
<a href="/Contact">Contact</a>
</li>
</ul>
{/* <div></div> */}
</div>
</div>
</nav>
:
#Navbar authenication in ReactJs
cyan pond
<div className="container flex sm:flex-row flex-col gap-2 justify-between items-center">
<h1 className="fs-3">
<Link to='/' className="text-white ">
<span className="hover:text-blue-600">Music Essentials</span>
</Link>
</h1>
<div className="flex items-center gap-4">
<ul className="flex items-center gap-5 text-white">
<li>
<a href="/">Home</a>
</li>
<li>
<div className="dropdown-menu">
<Link >
Music
</Link>
<div className="menu-content">
<a className="links-hidden">
Pop
</a>
<a className="links-hidden" >
Hip Hop
</a>
<a className="links-hidden">
Rock
</a>
<a className="links-hidden" >
EDM
</a>
<a className="links-hidden">
R&B
</a>
<a className="links-hidden" >
Jazz
</a>
</div>
</div>
</li>
<li>
<Link>
Store
</Link>
</li>
<li>
<a>News</a>
</li>
<li>
<a >Contact</a>
</li>
</ul>
{/* <div></div> */}
</div>
</div>
</nav>
}
</div>
);```so I am having issue with showing the first navbar content before : character for when the user logs into the site they will be able to access the link rather than after my second : nav content. How to fix this issue?
ruby forum
so I am having issue with showing the first navbar content before : character fo...
What is currently happening? Only one showing? Can you log auth and make sure it is what you expect?
cyan pond
yes only one showing
i want the right navbar to show when the user logs in home page
i want the other one to show before the user logs in on the /signin page
ruby forum
yes only one showing
Is auth a boolean?
cyan pond
take a look at link to see my code: https://stackblitz.com/edit/react-ts-wxfcvv?file=App.tsx
cyan pond
Is `auth` a boolean?
const auth = localStorage.getItem("bredding");
ruby forum
Well auth is logging null all the time
I would try and sort out these errors first
Also not sure how to install modules here
ruby forum
Okay yeah I would get your app and router set up as those are causing issues.
You cant use Link outside of a router
ruby forum
I get these errors
I dont really see how they could work since there is no router provider
cyan pond
it does work, let me show you click on link: https://prod.liveshare.vsengsaas.visualstudio.com/join?AAC07D096F17F031997C4BD301F5270DB3DE
cyan pond
I dont really see how they could work since there is no router provider
There is check out my GitHub to run project or connect to my live share to see me launch it in front of you.
ruby forum
https://reactjs.org/docs/conditional-rendering.html Joined a few times but code owner never admitted me to the session. these docs should cover everything regarding rendering different components based on a variable.
