Skip to content
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

Added icons to the Sidebar. #1694

Merged
merged 3 commits into from
Jan 26, 2024
Merged

Added icons to the Sidebar. #1694

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
89b0ce2
Added icons to the Sidebar.
ATHARVA-GAWAS Jan 25, 2024
1338e0b
Use of tailwind-CSS instead of traditional CSS
ATHARVA-GAWAS Jan 25, 2024
bf19163
Removed unwanted header files
ATHARVA-GAWAS Jan 26, 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
97 changes: 67 additions & 30 deletions website/templates/includes/sidenav.html
View file
Open in desktop
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>
ATHARVA-GAWAS marked this conversation as resolved.
Show resolved Hide resolved

<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