<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin Chat Panel</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="icon" type="img/ico" href='img/favicon-icon.png'>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap-hover-dropdown.min.js"></script>
<script src="js/admin.js"></script>
<script src="https://use.fontawesome.com/10a964325b.js"></script>
</head>
<body>
<!--////////////////TOP NAVBAR FIXED NAVBAR////////////////-->
<div class="main-container">
<nav class="navbar navbar-fixed-top admin-navbar">
<div class="container-fluid">
<div class="navbar-header" style="display: inline-block;">
<button id="menu_icon"><i class="fa fa-bars" aria-hidden="true"></i></button>
<a href="index.html" class="admin-chat-logo"><img src="https://lh3.googleusercontent.com/-N4NB2F966TU/WM7V1KYusRI/AAAAAAAADtA/fPvGVNzOkCo7ZMqLI6pPITE9ZF7NONmawCJoC/w185-h40-p-rw/logo.png"></a>
</div>
<div class="dropdown pull-right">
<button class="notification-btn dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">
<i class="fa fa-bell-o" aria-hidden="true"></i><span class="badge">5</span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<h4 class="card-title-text">Notifications <a href="#" class="notifications_title pull-right">3 new Notifications</a></h4>
<li class="list-group-item unread">
<a href="javascript:void(0)">
<div class="media">
<div class="media-left avatar-img40x40">
<img src="https://lh3.googleusercontent.com/-uwagl9sPHag/WM7WQa00ynI/AAAAAAAADso/ZGTVC0LVk1cFReheTbZzpGa2aawWyV8QACL0B/w140-d-h148-p-rw/profile-pic.jpg" class="media-object" style="width: 45px;margin-top: 2px;">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum...</p>
</div>
</div>
</a>
</li>
<li class="list-group-item unread">
<a href="javascript:void(0)">
<div class="media">
<div class="media-left avatar-img40x40">
<img src="https://lh3.googleusercontent.com/-uwagl9sPHag/WM7WQa00ynI/AAAAAAAADso/ZGTVC0LVk1cFReheTbZzpGa2aawWyV8QACL0B/w140-d-h148-p-rw/profile-pic.jpg" class="media-object" style="width: 45px;margin-top: 2px;">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum...</p>
</div>
</div>
</a>
</li>
<li class="list-group-item unread">
<a href="javascript:void(0)">
<div class="media">
<div class="media-left avatar-img40x40">
<img src="https://lh3.googleusercontent.com/-uwagl9sPHag/WM7WQa00ynI/AAAAAAAADso/ZGTVC0LVk1cFReheTbZzpGa2aawWyV8QACL0B/w140-d-h148-p-rw/profile-pic.jpg" class="media-object" style="width: 45px;margin-top: 2px;">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum...</p>
</div>
</div>
</a>
</li>
<li class="list-group-item unread">
<a href="javascript:void(0)">
<div class="media">
<div class="media-left avatar-img40x40">
<img src="https://lh3.googleusercontent.com/-uwagl9sPHag/WM7WQa00ynI/AAAAAAAADso/ZGTVC0LVk1cFReheTbZzpGa2aawWyV8QACL0B/w140-d-h148-p-rw/profile-pic.jpg" class="media-object" style="width: 45px;margin-top: 2px;">
</div>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Lorem ipsum...</p>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</nav>
<aside class="hit_sidebar open_sidbar sidebar-slide-push">
<ul>
<li><a href="#">
<span class="nav-icon"><i class="fa fa-user-circle" aria-hidden="true"></i></span>
<span class="remove_text">Admin</span></a></li>
<li><a href="#" class="activ">
<span class="nav-icon"><i class="fa fa-tachometer" aria-hidden="true"></i></span>
<span class="remove_text">Dashboard</span></a></li>
<li><a href="#">
<span class="nav-icon"><i class="fa fa-inbox" aria-hidden="true"></i></span>
<span class="remove_text"> Inbox</span></a></li>
<li><a href="#">
<span class="nav-icon"><i class="fa fa-bell-o" aria-hidden="true"></i></span>
<span class="remove_text"> Notification</span></a></li>
<li><a href="#">
<span class="nav-icon"><i class="fa fa-trash-o" aria-hidden="true"></i></span>
<span class="remove_text"> Spam</span></a></li>
<li><a href="#">
<span class="nav-icon"><i class="fa fa-cogs" aria-hidden="true"></i></span>
<span class="remove_text">Seting</span> </a></li>
<li><a href="#">
<span class="nav-icon"><i class="fa fa-power-off" aria-hidden="true"></i></span>
<span class="remove_text">Logout</span> </a></li>
</ul>
</aside>
<section id="content_body">
<div class="container">
<div class="row">
<div class="col-md-4"><h1>OUR BUSINESS ENGAGEMENTS</h1></div>
<div class="col-md-4"><h1>OUR BUSINESS ENGAGEMENTS</h1></div>
<div class="col-md-4"><h1>OUR BUSINESS ENGAGEMENTS</h1></div>
</div>
</div>
</section>
</div>
</body>
</html>
@font-face {
font-family: 'TitilliumWeb';
src: url(../font-style/TitilliumWeb-Light.ttf) format('truetype');
}
body{
font-family: 'TitilliumWeb';
}
::selection {
color: #fff;
background: #8956cf;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
display:none;
}
::-webkit-scrollbar {
width: 6px;
background-color: #F5F5F5;
display:none;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #8956cf;
display:none;
}
.main-container{
position: relative;
display:block;
width:100%;
}
#content_body {
width: 100%;
display: block;
margin-left: 190px;
transition: all .3s cubic-bezier(.55,0,.1,1);
}
.margin_left{
margin-left:0px!important;
transition: all .3s cubic-bezier(.55,0,.1,1);
}
/*===================TOP NAVBAR FIXED NAVBAR===================*/
.admin-navbar {
background-color: rgb(66, 133, 244);
border-color: rgb(66, 133, 244);
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}
.navbar {
position: relative;
min-height: 64px;
margin-bottom: 20px;
border: 1px solid transparent;
}
.navbar-herader {
display: inline-block;
}
.navbar button:focus {
outline: none;
}
.navbar button {
border: none;
width: 50px;
cursor: pointer;
height: 50px;
color: white;
padding: 11px 15px;
font-size: 21px;
border-radius: 100%;
background: #4284f4;
margin-top: 5px;
position: relative;
}
/* Ripple magic */
.navbar button{
position: relative;
overflow: hidden;
}
.navbar button:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(255, 255, 255, .5);
opacity: 0;
border-radius: 100%;
transform: scale(1, 1) translate(-50%);
transform-origin: 50% 50%;
}
@keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
20% {
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(40, 40);
}
}
.navbar button:focus:not(:active)::after {
animation: ripple 1s ease-out;
}
.admin-chat-logo img{
width:50%;
}
.notification-btn {
color: #fff;
background-color: transparent;
border-color: transparent;
font-size: 21px;
margin-top: 10px;
}
.btn:hover, .btn:focus, .btn.focus {
color: #fff;
text-decoration: none;
}
.btn:active, .btn.active {
box-shadow: none;
}
.notification-btn .badge {
color: #010101;
background-color: #fff;
}
button .badge {
position: relative;
top: -40px;
right: -10px;
}
@media (min-width: 768px){
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
margin-right: 0;
margin-left: -10px;
}
}
/*********notification*********/
.pull-right > .dropdown-menu {
right: 0;
left: auto;
top: 60px;
}
.dropdown-menu {
position: absolute;
top: 107%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 280px;
padding: 0px;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: none;
border: 0px solid;
border-radius: 0px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.dropdown-menu:after {
border-bottom: 6px solid #ffffff;
border-left: 6px solid rgba(0, 0, 0, 0);
border-right: 6px solid rgba(0, 0, 0, 0);
content: "";
display: inline-block;
right: 24px;
position: absolute;
top: -6px;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: transparent;
}
.card-title-text{
padding-left:15px;
}
.list-group-item {
position: relative;
display: block;
padding: 5px 0px;
margin-bottom: 0px;
background-color: #fff;
border: solid 0px;
border-bottom: 1px solid #ddd;
}
.media-object {
display: block;
border-radius: 50%;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 15px;}
.notifications_title {
font-size: 15px;
color: #4CAF50;
text-align: right;
padding: 3px;
padding-right: 10px;
}
/*******************TOP NAVBAR FIXED NAVBAR END*******************/
/*=======================SIDEBAR NAV START=======================*/
.hit_sidebar{
position: relative;
display: block;
min-height: 100%;
overflow-y: auto;
overflow-x: hidden;
overflow: hidden;
border: none;
transition: all .3s cubic-bezier(.55,0,.1,1);
padding-top: 64px;
background: #fff;
width: 280px;
background-color: #1f2f46;
/* transform: translate3d(-280px,0,0);*/
}
.small_sidebar{
width: 80px;
min-width: 64px;
transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
}
.sidebar-open {
min-width: 274px;
width: 274px;
transform: translate3d(0,0,0);
}
.sidebar-slide-push {
position: fixed;
top: 0;
bottom: 0;
z-index: 999;
left: -15px;
}
/************************SIDEBAR NAV START END************************/
aside ul{
margin:0px;
padding:0px;
}
aside ul li{
list-style-type: none;
}
aside ul li a{
font-family: 'TitilliumWeb';
display:block;
text-decoration:none;
text-align:left;
color: #c8c8c8;
background-color: transparent;
font-size: 16px;
padding: 18px 20px 16px;
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
aside ul li a:hover{
background-color:#1A293F;
color:#fff;
text-decoration: none;
}
a:focus {
outline: none;
outline-offset: none;
}
aside a:hover, a:focus {
color: #fff;
text-decoration: none;
background-color:#1A293F;
}
aside ul li a .nav-icon{
margin-right:15px;
font-size:20px!important;
}
.remove_text{
transition-delay: 2s;
}
.text_hide{
display:none;
transition-delay: 2s;
}
aside ul li a span{
display: table-cell;
padding-left:15px;
}
$(document).ready(function(){
$("#menu_icon").click(function(){
$(".open_sidbar").toggleClass("small_sidebar");
$('.remove_text').toggleClass('text_hide');
$('#content_body').toggleClass('margin_left');
});
});
