Skip to content

Commit

Permalink
Added icons to the Sidebar.
Browse files Browse the repository at this point in the history
  • Loading branch information
@ATHARVA-GAWAS
ATHARVA-GAWAS committed Jan 25, 2024
1 parent c961017 commit 89b0ce2
Showing 1 changed file with 67 additions and 30 deletions.
97 changes: 67 additions & 30 deletions website/templates/includes/sidenav.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
<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" aria-label="Sidebar">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>

<style>
.no-scrollbar::-webkit-scrollbar {
display: none;
Expand All @@ -8,51 +15,81 @@
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
a:link {
color: black;
background-color: transparent;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: red;
}
a:visited {
color: black;
}
.sidebar-item {
display: flex;
align-items: center;
padding: 10px;
margin: 0;
box-sizing: border-box;
}
.icon-container {
width: 30px;
margin-right: 10px;
}
.text {
white-space: nowrap;
}
#icon {
font-size: 20px;
}
.content-container {
flex-grow: 1;
}
</style>
<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>
<a href="/" class=""><span class="">Issues</span></a>
<li class="sidebar-item">
<div class="icon-container"><i class="fa fa-exclamation-circle" id="icon"></i></div><a href="/" class=""><span class="text">Issues</span></a>
</li>
<li>
<a href="/companies" class=""><span class="">Companies</span></a>
<li class="sidebar-item">
<div class="icon-container"><i class="fa fa-institution" id="icon"></i></div>
<div class="content-container"><a href="/companies" class=""><span class="text">Companies</span></a></div>
</li>
<li>
<a href="/leaderboard" class=""><span class="">Users</span></a>
<li class="sidebar-item">
<div class="icon-container"><i class="fa fa-trophy" id="icon"></i></div><a href="/leaderboard" class=""><span class="text">Users</span></a>
</li>
<li>
<a href="/teams" class=""><span class="">Teams</span></a>
<li class="sidebar-item">
<div class="icon-container"><i class="fa fa-users" id="icon"></i></div><a href="/teams" class=""><span class="text">Teams</span></a>
</li>
<li>
<a href="/hunts" class=""><span class="">Hunts</span></a>
<li class="sidebar-item">
<div class="icon-container"><i class="fa fa-bug" aria-hidden="true" id="icon"></i></div><a href="/hunts" class="text"><span class="">Hunts</span></a>
</li>
<li>
<a href="/projects" class=""><span class="">Projects</span></a>
<li class="sidebar-item">
<div class="icon-container"><i class="fa fa-cubes" id="icon"></i></div><a href="/projects" class=""><span class="text">Projects</span></a>
</li>
<li>
<a href="/apps" class=""><span class="">Apps</span></a>
<li class="sidebar-item">
<div class="icon-container"><i class="fa fa-file-code-o" id="icon"></i></div><a href="/apps" class=""><span class="text">Apps</span></a>
</li>
</ul>

<ul class="space-y-3 font-medium text-3xl mt-8 mb-0">
<li class="mb-[-6px] ms-[1px]">
<span class="font-bold text-[#AAA] text-[1.2rem] tracking-wide">EXPERIMENTAL</span>
</li>
<li>
<a href="/deletions" class=""><span class="">Deletions</span></a>
<li class="sidebar-item">
<div class="icon-container"><i class="fa fa-trash" id="icon"></i></div><a href="/deletions" class=""><span class="text">Deletions</span></a>
</li>
<li>
<a href="/trademarks" class=""><span class="">Trademarks</span></a>
<li class="sidebar-item">
<div class="icon-container"><i class="fa fa-trademark" id="icon"></i></div><a href="/trademarks" class=""><span class="text">Trademarks</span></a>
</li>
<li>
<a href="/bacon" class=""><span class="">BACON</span></a>
<li class="sidebar-item">
<div class="icon-container"><i class="fa-solid fa-bacon" id="icon"></i></div><a href="/bacon" class=""><span class="text">BACON</span></a>
</li>
<li>
<a href="/bltv" class=""><span class="">BLTV</span></a>
<li class="sidebar-item">
<div class="icon-container"><i class="fa fa-tv" id="icon"></i></div><a href="/bltv" class=""><span class="text">BLTV</span></a>
</li>
</ul>

Expand All @@ -65,17 +102,17 @@
</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>
<a href="/contributors" class=""><span class="">Contributors</span></a>
<li class="sidebar-item">
<div class="icon-container"><i class="fa fa-code" aria-hidden="true" id="icon"></i></div><a href="/contributors" class="text"><span class="">Contributors</span></a>
</li>
<li>
<a href="/about" class=""><span class="">About Us</span></a>
<li class="sidebar-item">
<div class="icon-container"><i class="fa fa-info" id="icon"></i></div><a href="/about" class=""><span class="text">About Us</span></a>
</li>
<li>
<a href="/terms" class=""><span class="">Terms</span></a>
<li class="sidebar-item">
<div class="icon-container"><i class="fa-solid fa-file-contract" id="icon"></i></div><a href="/terms" class="text"><span class="">Terms</span></a>
</li>
<li>
<a href="https://github.com/OWASP/BLT#readme" class=""><span class="">Developers</span></a>
<li class="sidebar-item">
<div class="icon-container"><i class="fa fa-code-fork" id="icon"></i></div><a href="https://github.com/OWASP/BLT#readme" class=""><span class="">Developers</span></a>
</li>
</ul>
</div>
Expand Down

0 comments on commit 89b0ce2

Please sign in to comment.