Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Drop Down Feature #1776

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DonnieBLT merged 10 commits into from
Feb 15, 2024
Merged

Drop Down Feature #1776

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
747896e
django_share_socail
HanilJain Feb 12, 2024
48b471e
Merge branch 'main' of https://github.com/HanilJain/BLT
HanilJain Feb 13, 2024
89dae99
pyproject.toml version
HanilJain Feb 13, 2024
ba05d15
Merge branch 'OWASP:main' into main
HanilJain Feb 13, 2024
07e2002
Revert "pyproject.toml version"
HanilJain Feb 13, 2024
f0eda17
Revert "django_share_socail"
HanilJain Feb 13, 2024
e22c94b
Merge branch 'main' of https://github.com/HanilJain/BLT
HanilJain Feb 13, 2024
b16c854
feature added
HanilJain Feb 14, 2024
fc0d1f3
drop down feature
HanilJain Feb 14, 2024
59653f2
Merge branch 'issue-1774' of https://github.com/HanilJain/BLT into is…
HanilJain Feb 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion poetry.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

134 changes: 107 additions & 27 deletions website/templates/includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,38 @@
color: black;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const desktopDropdownButton = document.getElementById('dropdownButton');
const desktopDropdownMenu = document.getElementById('dropdownMenu');

<nav class="fixed top-0 z-50 w-full bg-white border-b border-[#F7F7F7] border-b-2 px-4">
if (desktopDropdownButton && desktopDropdownMenu) {
desktopDropdownButton.addEventListener('click', () => {
desktopDropdownMenu.classList.toggle('hidden');
});
document.addEventListener('click', (e) => {
if (!desktopDropdownButton.contains(e.target) && !desktopDropdownMenu.contains(e.target)) {
desktopDropdownMenu.classList.add('hidden');
}
});
}

const mobileDropdownButton = document.getElementById('dropdown-toggle-mobile');
const mobileDropdownMenu = document.getElementById('dropdown-mobile');
if (mobileDropdownButton && mobileDropdownMenu) {
mobileDropdownButton.addEventListener('click', () => {
mobileDropdownMenu.classList.toggle('hidden');
});
document.addEventListener('click', (e) => {
if (!mobileDropdownButton.contains(e.target) && !mobileDropdownMenu.contains(e.target)) {
mobileDropdownMenu.classList.add('hidden');
}
});
}
});
</script>

<nav class="fixed top-0 z-50 w-full bg-white border-b border-[#F7F7F7] border-b-2 px-4" style="height: 10%;">
<div class="px-3 py-3 lg:px-5 lg:pl-3">
<div class="flex items-center justify-between">
<div class="flex items-center justify-start rtl:justify-end">
Expand Down Expand Up @@ -48,39 +78,89 @@
</a>
</div>

<!-- User Avatar -->
{% if request.user.is_authenticated %}
<a href="/accounts/logout" id="user" class="relative flex row items-center gap-3 mr-[30px] hover:no-underline inline-block">
{% if request.user.userprofile.avatar %}
<img src="{{ request.user.userprofile.avatar }}" class="h-[30px] w-[30px] rounded-full ">
{% elif request.user.socialaccount_set.all.0.get_avatar_url %}
<img src="{{ request.user.socialaccount_set.all.0.get_avatar_url }}"
class="h-[30px] w-[30px] rounded-full ">
{% else %}
{% gravatar request.user.email 30 '' 'gravatar rounded-full' %}
{% endif %}
<span
class="text-[1.6rem] font-[600]"><span
class="">{{ request.user.username }}</span> ({{ request.user|score|default:"0" }} Pts)
</span>
</a>
<li class="h-[80px] flex justify-center items-center ">
<button id="dropdownButton" class="relative flex items-center sm:gap-3 mr-[30px]" type="button">
{% if request.user.userprofile.avatar %}
<img src="{{ request.user.userprofile.avatar }}" class="h-[30px] w-[30px] rounded-full ">
{% elif request.user.socialaccount_set.all.0.get_avatar_url %}
<img src="{{ request.user.socialaccount_set.all.0.get_avatar_url }}"
class="h-[30px] w-[30px] rounded-full ">
{% else %}
{% gravatar request.user.email 30 '' 'gravatar rounded-full' %}
{% endif %}
<span
class="absolute -right-[17px] -bottom-[25px] lg:-right-[25px] lg:-bottom-[25px] sm:static whitespace-nowrap"><span
class="">{{ request.user.username }}</span> ({{ request.user|score|default:"0" }} Pts)
<i class="fa fa-caret-down text-red-500"></i>
</span>
</button>
<!-- Dropdown for User Avatar -->
<div id="dropdownMenu" class="z-50 hidden absolute bg-white top-32 right-5">
<ul class="flex flex-col gap-2 px-8 py-4 border shadow-xl rounded-lg left-auto">
<li>
<a href="/accounts/profile/">
<i class="fa fa-user fa-fw"></i> {% trans "User Profile" %}
</a>
</li>
<li>
<a href="{% env 'EXTENSION_URL' %}" target="_new">
<i class="fa fa-chrome fa-fw"></i>
{% trans "Add to chrome" %}
</a>
</li>
<li>
<a href="/start">
<i class="fa fa-play fa-fw"></i> {% trans "Start a Bug Hunt" %}
</a>
</li>
<li>
<a href="/social">
<i class="fa fa-share fa-fw"></i>
{% trans "Social" %}
</a>
</li>
<li>
<a href="/accounts/password/change/">
<i class="fa fa-gear fa-fw"></i> {% trans "Change Password" %}
</a>
</li>
<li>
<a href="/invite/">
<i class="fa fa-paper-plane fa-fw"></i> {% trans "Invite Friends" %}
</a>
</li>
<li>
<a href="{% url 'company_view' %}">
<i class="fa fa-building fa-fw"></i> {% trans "Company Dashboard" %}
</a>
</li>
<!-- divider -->
<li class="border my-4 -mx-8"></li>
<li>
<a href="/accounts/logout/">
<i class="fa fa-sign-out fa-fw"></i> {% trans "Logout" %}
</a>
</li>
</ul>
</div>
</li>
{% else %}


<!-- Sign up and Log in Buttons -->
<div class="flex column items-center gap-[8px]">
<div class="lg:!flex h-[80px] justify-center items-center">
<a href="/accounts/signup"
class="lg:!inline-block bg-red-500 hover:bg-red-600 h-[38px] py-[8px] px-[25px] whitespace-nowrap !text-2xl font-bold text-white leading-[21px] cursor-pointer hover:text-white hover:no-underline rounded-xl tracking-wide">
{% trans "Signup" %}
</a>
<a href="/accounts/login"
class="lg:!inline-block bg-red-500 hover:bg-red-600 h-[38px] py-[8px] px-[25px] whitespace-nowrap !text-2xl font-bold text-white leading-[21px] cursor-pointer hover:text-white hover:no-underline rounded-xl tracking-wide">
{% trans "Login" %}
</a>
class="h-[38px] px-[25px] py-[9px] bg-red-500 hover:bg-red-600 hover:no-underline text-white font-bold text-2xl mr-[20px] hover:text-white">
{% trans "Signup" %}</a>
<a href="/accounts/login" data-toggle="modal"
class="h-[38px] px-[25px] py-[9px] bg-red-500 hover:bg-red-600 hover:no-underline text-white font-bold text-2xl mr-[20px] hover:text-white">
{%trans "Login" %}</a>
</div>
<!-- Log in icon -->
<a href="/accounts/login" class="block sm:hidden mr-[30px]">
<i class="fa fa-user !text-5xl text-red-500"></i>
</a>
{% endif %}


</div>
</div>
</nav>