Skip to content

Commit

Permalink
Compact Sidebar (#1843)
Browse files Browse the repository at this point in the history
  • Loading branch information
@HanilJain
HanilJain authored Feb 28, 2024
1 parent 84cad21 commit b368ebd
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 46 deletions.
2 changes: 1 addition & 1 deletion website/templates/includes/header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
});
</script>
<nav class="fixed top-0 z-50 w-full bg-white border-b border-[#F7F7F7] border-b-2 px-4 ">
<div class="px-3 py-3 lg:px-5 lg:pl-3">
<div class="px-3 py-1 lg:px-5 lg:pl-3">
<div class="flex items-center justify-between">
<div class="flex items-center justify-start rtl:justify-end">
<!-- Ham Menu -->
Expand Down
71 changes: 26 additions & 45 deletions website/templates/includes/sidenav.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<aside id="sidebar"
class="tracking-tight fixed top-0 left-0 z-40 w-[230px] h-screen pt-[70px] transition-transform -translate-x-full bg-white lg:translate-x-0 no-scrollbar"
class="tracking-tight fixed top-0 left-0 z-40 w-[210px] h-screen pt-[70px] transition-transform -translate-x-full bg-white lg:translate-x-0 no-scrollbar"
aria-label="Sidebar">
<style>
.no-scrollbar::-webkit-scrollbar {
Expand All @@ -24,133 +24,116 @@
}

</style>
<div class="h-full px-11 overflow-y-auto bg-white flex flex-col justify-between no-scrollbar mt-6">
<div class="h-full px-11 overflow-y-auto bg-white flex flex-col justify-between no-scrollbar ">
<div>
<ul class="space-y-3 font-medium text-3xl mt-6 mb-0">
<li class="flex items-center p-4 border-b">
<ul class="space-y-3 font-medium text-2xl mt-6 mb-0">
<li class="flex items-center p-2">
<div class="w-8 mr-4">
<i class="fa fa-exclamation-circle" id="icon"></i>
</div>
<a href="{% url 'index' %}"><span class="text">Issues</span></a>
</li>
<li class="flex items-center p-4 border-b">
<li class="flex items-center p-2">
<div class="w-8 mr-4">
<i class="fa fa-institution" id="icon"></i>
</div>
<div class="content-container">
<a href="{% url 'domain_lists' %}"><span class="text">Companies</span></a>
</div>
</li>
<li class="flex items-center p-4 border-b">
<li class="flex items-center p-2">
<div class="w-8 mr-4">
<i class="fa fa-trophy" id="icon"></i>
</div>
<a href="{% url 'leaderboard_global' %}"><span class="text">Users</span></a>
</li>
<li class="flex items-center p-4 border-b">
<li class="flex items-center p-2">
<div class="w-8 mr-4">
<i class="fa fa-users" id="icon"></i>
</div>
<a href="{% url 'teams' %}"><span class="text">Teams</span></a>
</li>
<li class="flex items-center p-4 border-b">
<li class="flex items-center p-2">
<div class="w-8 mr-4">
<i class="fa fa-bug" aria-hidden="true" id="icon"></i>
</div>
<a href="{% url 'hunts' %}" class="text"><span>Hunts</span></a>
</li>
<li class="flex items-center p-4 border-b">
<li class="flex items-center p-2">
<div class="w-8 mr-4">
<i class="fa fa-cubes" id="icon"></i>
</div>
<a href="{% url 'projects' %}"><span class="text">Projects</span></a>
</li>
<li class="flex items-center p-4 border-b">
<li class="flex items-center p-2">
<div class="w-8 mr-4">
<i class="fa fa-file-code-o" id="icon"></i>
</div>
<a href="{% url 'apps' %}"><span class="text">Apps</span></a>
</li>
</ul>
<ul class="space-y-3 font-medium text-3xl mt-8 mb-0">
<ul class="space-y-2 font-medium text-2xl mt-1">
<li class="mb-[-6px] ms-[1px]">
<span class="font-bold text-[#AAA] text-[1.2rem] tracking-wide">EXPERIMENTAL</span>
</li>
<li class="flex items-center p-4 border-b">
<li class="flex items-center p-2">
<div class="w-8 mr-4">
<i class="fa fa-trash" id="icon"></i>
</div>
<a href="{% url 'deletions' %}"><span class="text">Deletions</span></a>
</li>
<li class="flex items-center p-4 border-b">
<li class="flex items-center p-2">
<div class="w-8 mr-4">
<i class="fa fa-trademark" id="icon"></i>
</div>
<a href="{% url 'trademarks' %}"><span class="text">Trademarks</span></a>
</li>
<li class="flex items-center p-4 border-b">
<li class="flex items-center p-2">
<div class="w-8 mr-4">
<i class="fa-solid fa-bacon" id="icon"></i>
</div>
<a href="{% url 'bacon' %}"><span class="text">BACON</span></a>
</li>
<li class="flex items-center p-4 border-b">
<li class="flex items-center p-2">
<div class="w-8 mr-4">
<i class="fa fa-tv" id="icon"></i>
</div>
<a href="{% url 'bltv' %}"><span class="text">BLTV</span></a>
</li>
</ul>
<button class="w-full mt-8"
onclick="(document.getElementById('menu-more-section').classList.toggle('max-h-[200px]'), document.getElementById('menu-more-dropdown').classList.toggle('rotate-[180deg]'))">
<span class="font-bold text-[#AAA] text-[1.2rem] tracking-wide flex flex-row items-center justify-between w-full">
MORE
<svg class="hs-dropdown-open:rotate-180 w-6 h-6 transition rotate-[360deg]"
id="menu-more-dropdown"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="3.5"
stroke-linecap="round"
stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</span>
</button>
<ul class="space-y-3 font-medium text-3xl mt-1 overflow-clip transition-[max-height] duration-[250ms] max-h-0"
id="menu-more-section">
<li class="flex items-center p-4 border-b">
<ul class="space-y-2 font-medium text-2xl mt-1">
<li class="mb-[-6px] ms-[1px]">
<span class="font-bold text-[#AAA] text-[1.2rem] tracking-wide">MORE</span>
</li>
<li class="flex items-center p-2">
<div class="w-8 mr-4">
<i class="fa fa-code" aria-hidden="true" id="icon"></i>
</div>
<a href="{% url 'contributors' %}" class="text"><span>Contributors</span></a>
</li>
<li class="flex items-center p-4 border-b">
<li class="flex items-center p-2">
<div class="w-8 mr-4">
<i class="fa fa-info" id="icon"></i>
</div>
<a href="{% url 'about' %}"><span class="text">About Us</span></a>
</li>
<li class="flex items-center p-4 border-b">
<li class="flex items-center p-2">
<div class="w-8 mr-4">
<i class="fa-solid fa-file-contract" id="icon"></i>
</div>
<a href="{% url 'terms' %}" class="text"><span>Terms</span></a>
</li>
<li class="flex items-center p-4 border-b">
<li class="flex items-center p-2">
<div class="w-8 mr-4">
<i class="fa fa-code-fork" id="icon"></i>
</div>
<a href="https://github.com/OWASP/BLT#readme"><span>Developers</span></a>
</li>
</ul>
</div>
<ul class="space-y-3 font-semibold text-3xl flex-end mb-[20px] mt-[30px]">
<ul class="space-y-2 flex-end mb-[5px] mt-[5px]">
<li class="opacity-90 transition hover:opacity-100">
<a class="bg-gray-100 w-full inline-flex py-3 px-5 rounded-2xl items-center transition hover:bg-gray-200 focus:outline-none cursor-pointer hover:text-black">
<a class="bg-gray-100 inline-flex py-3 px-5 rounded-2xl items-center transition hover:bg-gray-200 focus:outline-none cursor-pointer hover:text-black">
<svg xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
class="w-9 h-9"
Expand All @@ -159,14 +142,13 @@
</path>
</svg>
<span class="ml-4 flex items-start flex-col leading-none">
<span class="text-base text-gray-600 mb-[-1px]">GET IT ON</span>
<span class="title-font tracking-tight font-semibold mb-[3px]">Google Play</span>
</span>
</a>
</li>
<li class="opacity-90 transition hover:opacity-100">
<a href="https://apps.apple.com/us/app/owasp-blt/id6448071954"
class="bg-gray-100 w-full inline-flex py-3 px-5 rounded-2xl items-center transition hover:bg-gray-200 focus:outline-none cursor-pointer hover:text-black">
class="bg-gray-100 inline-flex py-3 px-5 rounded-2xl items-center transition hover:bg-gray-200 focus:outline-none cursor-pointer hover:text-black">
<svg xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
class="w-9 h-9"
Expand All @@ -177,7 +159,6 @@
</path>
</svg>
<span class="ml-4 flex items-start flex-col leading-none">
<span class="text-base text-gray-600 mb-[-1px]">Download on the</span>
<span class="title-font tracking-tight font-semibold mb-[3px]">App Store</span>
</span>
</a>
Expand Down

0 comments on commit b368ebd

Please sign in to comment.