A Pen by Chireen Javier on CodePen.
Created
July 5, 2022 21:22
-
-
Save ahmhesham/b6a157345f413ac5a700eefc691bf819 to your computer and use it in GitHub Desktop.
Dashboard SideBar and Navbar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Use any element to open the sidenav --> | |
<div class="navigatioon"> | |
<nav class="navbar"> | |
<ul class="nav navbar-nav pull-left"> | |
<li class="sidebar-toggle pull-left boom" onclick="openNav()"><a href="javascript: void(0)"><i class="fa fa-align-justify"></i></a> </li> | |
<li class="sidebar-toggle pull-left boomy hidden" onclick="closeNav()"><a href="javascript: void(0)"><i class="fa fa-close"></i></a> </li> | |
</ul> | |
<ul class="nav navbar-nav pull-right"> | |
<li class="nav-item active "> | |
<a class="nav-link" href="#" data-toggle="tooltip" data-placement="bottom" title="Notifications"> | |
<i class="fa fa-bell notif"></i> | |
<span class="number-notif">10</span> | |
<span class="tipText-bot">Notification</span> | |
</a> | |
</li> | |
<li class="nav-item "> | |
<a class="nav-link" href="javascript:void(0);"> | |
<i class="fa fa-envelope mail"></i> | |
<span class="number-mail">45</span> | |
<span class="tipText-bot">Mail</span> | |
</a> | |
</li> | |
<li class="nav-item"> | |
<a class="nav-link" href="javascript:void(0);"> | |
<i class="fa fa-sign-out"></i> | |
<span class="tipText-bot">Logout</span> | |
</a> | |
</li> | |
</ul> | |
</nav> | |
</div> | |
<div class="sidebar"> | |
<div class="col-sm-12 text-center profile hidden"> | |
<div class="text-center"> | |
<i class="fa fa-user text-center fa-4x"></i> | |
</div> | |
<span class="text-center">John A. Doe</span> | |
</div> | |
<ul class="main-navigation"> | |
<li> | |
<a href="#toroUrl('/dashboard')" class="current"><i class="fa fa-dashboard"></i><span>Dashboard</span></a> | |
<span class="tipText-right">Dashboard</span> | |
</li> | |
<li> | |
<a data-toggle="collapse" href="#uiFeatures"><i class="fa fa-laptop"></i><span>UI Features</span></a> | |
<span class="tipText-right">UI Features</span> | |
<div id="uiFeatures" class="panel-collapse collapse"> | |
<ul class="list-group"> | |
<li class="list-group-item indent"> | |
<a href="#toroUrl('/panels')"><i class="fa fa-columns"></i><span>Panels</span></a> | |
<span class="tipText-right">Panels</span> | |
</li> | |
<li class="list-group-item indent"> | |
<a href="#toroUrl('/modals')"><i class="fa fa-newspaper-o"></i><span>Modals</span></a> | |
<span class="tipText-right">Modals</span> | |
</li> | |
<li class="list-group-item indent"> | |
<a href="#toroUrl('/buttons')"><i class="fa fa-delicious"></i><span>Buttons</span></a> | |
<span class="tipText-right">Buttons</span> | |
</li> | |
<li class="list-group-item indent"> | |
<a href="#toroUrl('/tabs')"><i class="fa fa-th-large"></i><span>Tabs</span></a> | |
<span class="tipText-right">Tabs</span> | |
</li> | |
<li class="list-group-item indent"> | |
<a href="#toroUrl('/accordions')"><i class="fa fa-th-list"></i><span>Accordion</span></a> | |
<span class="tipText-right">Accordion</span> | |
</li> | |
<li class="list-group-item indent"> | |
<a href="#toroUrl('/progress')"><i class="fa fa-align-left"></i><span>Progress Bar</span></a> | |
<span class="tipText-right">Progress Bar</span> | |
</li> | |
</ul> | |
</div> | |
</li> | |
<li> | |
<a href="#toroUrl('/forms')"><i class="fa fa-edit"></i><span>Forms</span></a> | |
<span class="tipText-right">Forms</span> | |
</li> | |
<li> | |
<a href="#toroUrl('/tables')"><i class="fa fa-table"></i><span>Tables</span></a> | |
<span class="tipText-right">Tables</span> | |
</li> | |
<li> | |
<a href="#toroUrl('/signupDash')" target="_blank"><i class="fa fa-file"></i><span>Pages</span></a> | |
<span class="tipText-right">Pages</span> | |
</li> | |
</ul> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var move = "250px"; | |
// Sidebar function | |
function openNav(){ | |
$('.sidebar').addClass('active').css({"box-shadow": "inset -5px -3px 10px #000"}); | |
$(this).addClass('active'); | |
$('.boomy').removeClass('hidden'); | |
$('.boom').addClass('hidden'); | |
$('.tipText-right').addClass('hidden'); | |
$(".sidebar").children().css({"opacity": 1, "transition": "all .3s ease-in-out"}); | |
$(".indent").find("a").css({"margin-left": "20px"}); | |
// setTimeout(function() { | |
// $('.profile').delay(300)removeClass('hidden'); | |
$('.profile').fadeIn(400, function(){ | |
$(this).removeClass('hidden'); | |
}); | |
// }, 300); | |
if ($(window).width() < 512) { | |
$("#main").animate({"margin-left": "60px"}, 10); | |
// $(".boom").animate({"margin-left": move},500); | |
} | |
else{ | |
$("#main").animate({"margin-left": move}, 10); | |
} | |
} | |
function closeNav() { | |
$('.sidebar').removeClass('active').css({"box-shadow": "none"}); | |
$(this).removeClass('active'); | |
$('.boom').removeClass('hidden'); | |
$('.boomy').addClass('hidden'); | |
$(this).attr( "onClick", "openNav();" ); | |
$('.tipText-right').removeClass('hidden'); | |
$(".sidebar").children().closest('span').css({"opacity": 0, "transition": "all .3s ease-in-out"}); | |
$(".indent").find("a").css({"margin-left": "-5px"}); | |
$('.profile').fadeOut(300, function(){ | |
$(this).addClass('hidden'); | |
}); | |
//prevent increase of margin when clicked multiple times | |
if ($(window).width() < 512) { | |
if($("main").css("margin-left") === "60px") | |
$("#main").animate({"margin-left": "-=" + move}, 10); | |
else | |
$("#main").animate({"margin-left": 0}, 10); | |
} | |
else{ | |
if($("main").css("margin-left") === 0) | |
$("#main").animate({"margin-left": "-=" + move}, 10); | |
else | |
$("#main").animate({"margin-left": "60px"}, 10); | |
} | |
// $(".boom").animate({"margin-left": "-=" + move}, 500); | |
} | |
// $('#droppy').on('click', function(){ | |
// $('.fa-chevron-down').addClass('rotate'); | |
// $('.dropydown').attr('id','uppy'); | |
// }); | |
// $('#uppy').on('click', function(){ | |
// $('.fa-chevron-down').addClass('rotate'); | |
// $('.dropydown').attr('id','droppy'); | |
// }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// $dark: #211a1d; | |
// $medium-dark: #5c5552; | |
// $normal: #8f857d; | |
// $light: #decbb7; | |
// $lighter: #f7f0f5; | |
$nav-dark: #131e25; | |
$nav-light: #1c2b36; | |
$default: #4c5f70; | |
$primary: #7266ba; | |
$info: #23b7e5; | |
$success: #2baab1; | |
$warning: #edbc6c; | |
$danger: #e36159; | |
@mixin color($color){ | |
opacity: 0; | |
position: absolute; | |
top: 2px; | |
left: 25px; | |
background: $color; | |
padding: 0 5px; | |
font-size: 8px; | |
border-radius: 15px; | |
animation: .5s pop forwards; | |
} | |
.boom, .boomy{ | |
margin-left: -10px; | |
@media (max-width: 512px){ | |
margin-left: 0; | |
} | |
&:hover{ | |
color: lighten($nav-light, 40%); | |
} | |
} | |
.navigatioon{ | |
nav{ | |
position: fixed; | |
padding-left: 20px; | |
padding-right: 40px; | |
width: 100%; | |
z-index: 9999; | |
background: $nav-dark; | |
border-radius: 0; | |
box-shadow: -1px 5px 5px #000; | |
.tipText-bot { | |
opacity: 0; | |
background-color: $nav-dark; | |
box-shadow: 0px 3px 5px #000; | |
color: #fff; | |
padding: 5px; | |
position: absolute; | |
z-index: 6; | |
font-size: 10px; | |
top: 80%; | |
left: 60%; | |
margin-left: -30px; | |
transition: all .2s ease-in-out; | |
} | |
li{ | |
display: inline-block; | |
transition: all .2s ease-in-out; | |
a{ | |
color: #fff; | |
transition: all .2s ease-in-out; | |
&:hover, &:active, &:focus{ | |
background: transparent; | |
color: lighten($nav-light, 40%); | |
.tipText-bot{ | |
opacity: 1; | |
} | |
.number-notif, .number-mail{ | |
color: #fff; | |
} | |
.notif{ | |
color: $danger; | |
} | |
.mail{ | |
color: $info; | |
} | |
} | |
.number-notif{ | |
@include color($danger); | |
animation-delay: 1.5s; | |
} | |
.number-mail{ | |
@include color($info); | |
animation-delay: 1.7s; | |
} | |
} | |
} | |
} | |
} | |
#main { | |
// opacity: 0; | |
padding-top: 80px; | |
transition: all .5s ease-in-out; | |
margin-left: 60px; | |
@media (max-width: 512px){ | |
margin-left: 0; | |
} | |
} | |
@keyframes pop{ | |
0%{ | |
opacity: 0; | |
transform: scale(0); | |
} | |
100%{ | |
opacity: 1; | |
transform: scale(1); | |
} | |
} | |
.sidebar { | |
position: fixed; | |
z-index: 9998; | |
left: 0; | |
top: 0; | |
height: 100%; | |
width: 60px; | |
background: $nav-dark; | |
color: #fff; | |
text-align: center; | |
transition: all .5s ease-in-out; | |
.fa{ | |
text-shadow: 0px 2px 5px darken($nav-dark, 40%); | |
} | |
@media (max-width: 768px){ | |
width: 0; | |
} | |
.hidden{ | |
transition: all .5s ease-in-out; | |
} | |
.profile{ | |
font-family: 'Dancing Script', cursive; | |
padding: 10px; | |
transition: all .5s ease-in-out; | |
top: 14px; | |
margin-top: 20px; | |
margin-bottom: 20px; | |
span{ | |
font-size: 30px; | |
} | |
.fa-user{ | |
width: 100px; | |
height: 100px; | |
border-radius: 50%; | |
text-align: center; | |
// line-height: 100px; | |
vertical-align: middle; | |
padding: 25px; | |
background: lighten($nav-light, 20%); | |
} | |
div{ | |
padding: 20px; | |
} | |
} | |
&.active { | |
width: 250px; | |
transition: all .5s ease-in-out; | |
} | |
ul { | |
list-style-type: none; | |
padding: 0; | |
margin: 0; | |
li { | |
display: block; | |
&:first-child{ | |
margin-top: 55px; | |
} | |
a { | |
display: block; | |
position: relative; | |
white-space: nowrap; | |
overflow: hidden; | |
border-bottom: 1px solid rgba(33,26,29,.3); | |
border-left: 5px solid transparent; | |
color: #fff; | |
text-align: left; | |
transition: all .3s ease-in-out; | |
i { | |
display: inline-block; | |
width: 60px; | |
height: 60px; | |
line-height: 60px; | |
text-align: center; | |
animation-duration: .7s; | |
animation-fill-mode: both; | |
} | |
span { | |
display: inline-block; | |
height: 60px; | |
line-height: 60px; | |
} | |
&:hover { | |
background-color: $nav-light; | |
border-left: 5px solid lighten($nav-light, 10%); | |
& ~ .tipText-right{ | |
opacity: 1; | |
} | |
i { | |
animation: swing .45s forwards; | |
} | |
} | |
} | |
} | |
.indent{ | |
background: darken($nav-dark, 5%); | |
border-left: 5px solid transparent; | |
transition: all .3s ease-in-out; | |
a{ | |
margin-left: -5px; | |
border-left: 5px solid transparent; | |
transition: all .3s ease-in-out; | |
&:hover { | |
background-color: $nav-dark; | |
border-left: 5px solid transparent; | |
& ~ .tipText-right{ | |
opacity: 1; | |
} | |
i { | |
animation: swing .45s forwards; | |
} | |
} | |
} | |
&:first-child{ | |
border-radius: 0; | |
} | |
&:hover { | |
background: $nav-dark; | |
border-left: 5px solid $nav-light; | |
} | |
} | |
} | |
.tipText-right { | |
opacity: 0; | |
background-color: $nav-dark; | |
box-shadow: 0px 3px 5px #000; | |
color: #fff; | |
padding: 10px; | |
position: absolute; | |
z-index: 6; | |
font-size: 10px; | |
left: 63px; | |
margin-top: -40px; | |
transition: all .2s ease-in-out; | |
} | |
} | |
.rotate{ | |
transition: all .3s forwards; | |
} | |
#uiFeatures{ | |
margin-top: -60px; | |
} | |
.list-group-item{ | |
background: $nav-light; | |
border: none; | |
padding: 0; | |
&:first-child{ | |
border-radius: 0; | |
} | |
&:hover { | |
background: $nav-dark; | |
} | |
} | |
@keyframes rotate{ | |
100%{ | |
transform: rotate (90deg); | |
} | |
} | |
@keyframes swing{ | |
20% { | |
transform: translate(0,2px) | |
} | |
40% { | |
transform: translate(0,4px) | |
} | |
60% { | |
transform: translate(0,2px) | |
} | |
80% { | |
transform: translate(0,0px) | |
} | |
100% { | |
transform: translate(0,2px) | |
} | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> | |
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment