<! doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="C:/xampp/htdocs/DONE/static/fontawesome-all.css" rel="stylesheet">
<style type="text/css">
* {
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
#sidebar ul {
list-style: none;
margin: 0;
}
#sidebar {
position: fixed;
width: 200px;
height: 100%;
background: #151719;
left: 0px;
transition: all 500ms linear;
}
#sidebar.active {
left: -200px;
}
#sidebar ul li {
list-style: none;
position: relative;
padding: 15px;
width: 170px;
border-top: 1px solid rgba(100, 100, 100, 0.3);
}
#sidebar .toggle-btn {
position: absolute;
left: 210px;
top: 0px;
}
#sidebar .toggle-btn span {
position: relative;
display: block;
width: 30px;
height: 5px;
background: #151719;
margin: 5px 0px;
}
#sidebar ul ul {
transition: all 0.3s;
position: absolute;
background: #151719;
opacity: 0;
visibility: hidden;
height: 100%;
left: 100%;
top: -2%;
}
#sidebar ul li:hover>ul {
opacity: 1;
visibility: visible;
}
#sidebar ul li a {
color: white;
padding: 0px;
margin: 0 0;
text-decoration: none;
}
span {
margin-right: 15px;
}
#sidebar ul li:hover {
background-color: grey;
}
.ul2 {
background-color: #151719;
color: white;
}
</style>
</head>
<body>
<div id="sidebar">
<div class="toggle-btn" onclick="toggleSidebar()">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li><a href=""><span class="fa fa-home"></span>Home</a></li>
<li><a href=""><span class="fa fa-database"></span>Database Items</a>
<ul class="ul2">
<li class="ul2"><a href=""><span class="fa fa-plus"></span>Add</a></li>
<li class="ul2"><a href=""><span class="fa fa-edit"></span>Edit</a></li>
<li class="ul2"><a href=""><span class="fa fa-trash"></span>Delete</a></li>
</ul>
<li><a href=""><span class="fa fa-desktop"></span>Reports</a></li>
<ul>
<li><a href=""><span class="fa fa-plus"></span>Stock Reports</a></li>
<li><a href=""><span class="fa fa-plus"></span>Equipment Reports</a></li>
<li><a href=""><span class="fa fa-plus"></span>Financial Reports</a></li>
</ul>
<li><a href=""><span class="fa fa-database"></span>Document Warehouse</a></li>
<li><a href=""><span class="fa fa-home"></span>Contact Us</a></li>
</ul>
</div>
<script>
function toggleSidebar() {
document.getElementById("sidebar").classList.toggle('active');
}
</script>
</body>
</html>
