just like the title suggest, I’m trying to hide a content based on whether user is logged in or not, and I’m going to use this for my navbar. So when user is logged in the page will show dropdown content, and if there is no user logged in, the navbar will show “join us” link instead.
And actually I have achieved this using
{% if user.is_authenticated %}
But there is a problem.
And as you can you can see from the picture above, the content inside {% if user.is_authenticated %}
is not really hidden. So my flex css doesn’t work the way I intended it to.
And for more context, here is my code
<header>
<a class='green-border' href='/signup'>follow us</a>
<a href='/'>
<img src={% static 'img/mabu.png' %} height=45>
</a>
<a class='green-border' href='/join'>join us</a>
{% if user %}
<div class='dropdown'>
<button class='hover'>{{ user.username }}</button>
<div class='dropdown-content'>
<a href='/profile'>profile</a>
<a href='/library'>library</a>
<a href='/add-books'>add books</a>
<a href='/logout'>logout</a>
</div>
</div>
{% else %}
<a href='/login/'>join us</a>
{% endif %}
</header>
Is there a way to completely hide those content based on user login state? Or should I do the conditional on the views.py instead?
That’s all, thank you in advance