<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> Responsive Sidebar Menu | Code4education </title>
<link rel="stylesheet" href="style.css">
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="sidebar">
<div class="logo_content">
<div class="logo">
<div class="logo_name">Code4education</div>
</div>
<i class='bx bx-menu' id="btn"></i>
</div>
<ul class="nav_list">
<li>
<i class='bx bx-search'></i>
<input type="text" placeholder="Search...">
<span class="tooltip">Search</span>
</li>
<li>
<a href="#">
<i class='bx bx-grid-alt'></i>
<span class="links_name">Dashboard</span>
</a>
<span class="tooltip">Dashboard</span>
</li>
<li>
<a href="#">
<i class='bx bx-user'></i>
<span class="links_name">User</span>
</a>
<span class="tooltip">User</span>
</li>
<li>
<a href="#">
<i class='bx bx-chat'></i>
<span class="links_name">Messages</span>
</a>
<span class="tooltip">Messages</span>
</li>
<li>
<a href="#">
<i class='bx bx-pie-chart-alt-2'></i>
<span class="links_name">Analytics</span>
</a>
<span class="tooltip">Analytics</span>
</li>
<li>
<a href="#">
<i class='bx bx-folder'></i>
<span class="links_name">File Manager</span>
</a>
<span class="tooltip">File Manager</span>
</li>
<li>
<a href="#">
<i class='bx bx-cart-alt'></i>
<span class="links_name">Order</span>
</a>
<span class="tooltip">Order</span>
</li>
<li>
<a href="#">
<i class='bx bx-heart'></i>
<span class="links_name">Saved</span>
</a>
<span class="tooltip">Saved</span>
</li>
<li>
<a href="#">
<i class='bx bx-cog'></i>
<span class="links_name">Setting</span>
</a>
<span class="tooltip">Setting</span>
</li>
</ul>
<div class="content">
<div class="user">
<div class="user_details">
<img src="images/profile.jpg" alt="">
<div class="name_job">
<div class="name">Bhaskar Gupta</div>
<div class="job">Web Designer</div>
</div>
</div>
<i class='bx bx-log-out' id="log_out"></i>
</div>
</div>
</div>
<div class="home_content">
<div class="text">Dashboard</div>
<p>Nullam vulputate ultrices tellus et bibendum. Integer iaculis pharetra ligula, eget condimentum nunc malesuada nec. Nullam eu lorem sed tellus condimentum aliquam in in eros. Maecenas sagittis, justo quis blandit aliquet, sem felis interdum elit, ac dictum purus mauris nec mauris. In hac habitasse platea dictumst. Morbi placerat nec lorem in feugiat. In tristique laoreet diam, vel vulputate mi placerat id. Vivamus at quam rutrum, finibus tortor laoreet, venenatis sem. Nam vitae libero ultrices, tristique ligula non, sagittis elit. Vestibulum sed turpis nec eros convallis viverra. Maecenas nunc arcu, pharetra bibendum feugiat ut, consequat quis massa. Vivamus aliquet eros a efficitur fringilla. Aenean auctor ut mi ut vestibulum. Suspendisse a turpis id nisi faucibus efficitur. Sed ipsum urna, ultricies eget justo vitae, hendrerit malesuada mauris. Donec a turpis malesuada, euismod massa id, ultrices ex.
</p>
<p>Nullam vulputate ultrices tellus et bibendum. Integer iaculis pharetra ligula, eget condimentum nunc malesuada nec. Nullam eu lorem sed tellus condimentum aliquam in in eros. Maecenas sagittis, justo quis blandit aliquet, sem felis interdum elit, ac dictum purus mauris nec mauris. In hac habitasse platea dictumst. Morbi placerat nec lorem in feugiat. In tristique laoreet diam, vel vulputate mi placerat id. Vivamus at quam rutrum, finibus tortor laoreet, venenatis sem. Nam vitae libero ultrices, tristique ligula non, sagittis elit. Vestibulum sed turpis nec eros convallis viverra. Maecenas nunc arcu, pharetra bibendum feugiat ut, consequat quis massa. Vivamus aliquet eros a efficitur fringilla. Aenean auctor ut mi ut vestibulum. Suspendisse a turpis id nisi faucibus efficitur. Sed ipsum urna, ultricies eget justo vitae, hendrerit malesuada mauris. Donec a turpis malesuada, euismod massa id, ultrices ex.
</p>
<p>Nullam vulputate ultrices tellus et bibendum. Integer iaculis pharetra ligula, eget condimentum nunc malesuada nec. Nullam eu lorem sed tellus condimentum aliquam in in eros. Maecenas sagittis, justo quis blandit aliquet, sem felis interdum elit, ac dictum purus mauris nec mauris. In hac habitasse platea dictumst. Morbi placerat nec lorem in feugiat. In tristique laoreet diam, vel vulputate mi placerat id. Vivamus at quam rutrum, finibus tortor laoreet, venenatis sem. Nam vitae libero ultrices, tristique ligula non, sagittis elit. Vestibulum sed turpis nec eros convallis viverra. Maecenas nunc arcu, pharetra bibendum feugiat ut, consequat quis massa. Vivamus aliquet eros a efficitur fringilla. Aenean auctor ut mi ut vestibulum. Suspendisse a turpis id nisi faucibus efficitur. Sed ipsum urna, ultricies eget justo vitae, hendrerit malesuada mauris. Donec a turpis malesuada, euismod massa id, ultrices ex.
</p>
<p>Nullam vulputate ultrices tellus et bibendum. Integer iaculis pharetra ligula, eget condimentum nunc malesuada nec. Nullam eu lorem sed tellus condimentum aliquam in in eros. Maecenas sagittis, justo quis blandit aliquet, sem felis interdum elit, ac dictum purus mauris nec mauris. In hac habitasse platea dictumst. Morbi placerat nec lorem in feugiat. In tristique laoreet diam, vel vulputate mi placerat id. Vivamus at quam rutrum, finibus tortor laoreet, venenatis sem. Nam vitae libero ultrices, tristique ligula non, sagittis elit. Vestibulum sed turpis nec eros convallis viverra. Maecenas nunc arcu, pharetra bibendum feugiat ut, consequat quis massa. Vivamus aliquet eros a efficitur fringilla. Aenean auctor ut mi ut vestibulum. Suspendisse a turpis id nisi faucibus efficitur. Sed ipsum urna, ultricies eget justo vitae, hendrerit malesuada mauris. Donec a turpis malesuada, euismod massa id, ultrices ex.
</p>
</div>
<script src="main.js"></script>
</body>
</html>
/* Google Font CDN Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
:root{
--black-color:#11101d;
--white-color:#fff;
--sky-color:#E4E9F7;
--light-black:#1d1b31;
}
body{
position: relative;
min-height: 100vh;
width: 100%;
overflow: hidden;
}
::selection{
color:var(--white-color);
background: var(--black-color);
}
.sidebar{
position:fixed;
top:0;
left:0;
height:100%;
width:78px;
background:var(--black-color);
padding:6px 14px;
z-index:99;
transition:all 0.5s ease;
}
.sidebar.active{
width:240px;
}
.sidebar .logo_content .logo{
color:var(--white-color);
display: flex;
height:50px;
width:100%;
align-items: center;
opacity: 0;
pointer-events: none;
transition:all 0.5s ease;
}
.sidebar.active .logo_content .logo{
opacity:1;
pointer-events: none;
}
.logo_content .logo .logo_name{
font-size: 20px;
font-weight: 400;
}
.sidebar #btn{
position:absolute;
color:var(--white-color);
top:6px;
left:50%;
font-size: 22px;
height:50px;
width:50px;
text-align: center;
line-height: 50px;
transform: translateX(-50%);
cursor: pointer;
}
.sidebar.active #btn{
left:90%;
}
.sidebar ul{
margin-top:20px;
}
.sidebar ul li{
position:relative;
height:50px;
width:100%;
margin:5px 0;
list-style: none;
line-height: 50px;
}
.sidebar ul li .tooltip{
position:absolute;
left:125px;
top:0;
transform:translate(-50%, -50%);
border-radius: 6px;
height:35px;
width:120px;
background: var(--white-color);
line-height: 35px;
text-align: center;
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
transition:0s;
opacity:0;
pointer-events: none;
display:block;
}
.sidebar ul li .tooltip::before{
content:'';
width:0;
height:0;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
border-right:10px solid var(--white-color);
position:absolute;
left:-8px;
top:7px;
}
.sidebar.active ul li .tooltip{
display:none;
}
.sidebar ul li:hover .tooltip{
transition:all 0.5s ease;
opacity:1;
top:50%;
}
.sidebar ul li input{
position:absolute;
height:100%;
width:100%;
left:0;
top:0;
border-radius: 12px;
outline:none;
border:none;
background: #1d1b31;
padding-left:50px;
font-size: 18px;
color:var(--white-color);
}
.sidebar ul li .bx-search{
position:relative;
z-index: 99;
color:var(--white-color);
font-size: 22px;
transition:all 0.5s ease;
}
.sidebar ul li .bx-search:hover{
background:var(--white-color);
color:#1d1b31;
}
.sidebar ul li a{
color:var(--white-color);
display:flex;
align-items:center;
text-decoration: none;
border-radius: 12px;
white-space: nowrap;
transition:all 0.4s ease;
}
.sidebar ul li a:hover{
color:var(--black-color);
background:var(--white-color);
}
.sidebar ul li i{
font-size: 18px;
font-weight: 400;
height:50px;
min-width: 50px;
border-radius: 12px;
line-height: 50px;
text-align: center;
}
.sidebar .links_name{
font-size: 15px;
font-weight: 400;
opacity:0;
pointer-events: none;
transition:all 0.3s ease;
}
.sidebar.active .links_name{
transition:0s;
opacity:1;
pointer-events: auto;
}
.sidebar .content{
position:absolute;
color:var(--white-color);
bottom:0;
left:0;
width:100%;
}
.sidebar .content .user{
position:relative;
padding:10px 6px;
height:60px;
background: none;
transition:all 0.4s ease;
}
.sidebar.active .content .user{
background:var(--light-black);
}
.content .user .user_details{
display:flex;
align-items:center;
opacity:0;
pointer-events: none;
white-space: nowrap;
transition:all 0.4s ease;
}
.sidebar.active .user .user_details{
opacity:1;
pointer-events: auto;
}
.content .user .user_details img{
height:45px;
width:45px;
object-fit: cover;
border-radius: 12px;
}
.name_job{
margin-left:10px;
}
.user_details .name{
font-size: 15px;
font-weight: 400;
}
.user_details .job{
font-size: 12px;
}
#log_out{
position:absolute;
bottom:5px;
left:50%;
transform:translateX(-50%);
min-width: 50px;
line-height: 50px;
font-size: 20px;
border-radius: 12px;
text-align: center;
transition:all 0.4s ease;
}
.sidebar.active .user #log_out{
left:80%;
background:none;
}
.home_content{
position:absolute;
height:100%;
width:calc(100% - 78px);
left:78px;
background:var(--sky-color);
padding:20px;
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
transition:all 0.5s ease;
}
.sidebar.active ~ .home_content{
z-index:100;
width:calc(100% - 240px);
left:240px;
}
.home_content .text{
font-size: 25px;
font-weight: 600;
color:var(--light-black);
margin-bottom:15px;
}
.home_content p{
margin-bottom:15px;
}
let btn = document.querySelector("#btn");
let sidebar = document.querySelector(".sidebar");
let searchBtn = document.querySelector(".bx-search");
btn.onclick = function(){
sidebar.classList.toggle("active");
}
searchBtn.onclick = function(){
sidebar.classList.toggle("active");
}
