Simple responsive admin dashboard

Simple responsive admin dashboard

by Adi Jaya

HTML

<!-- HTML structure
<div class="admin-dashboard" id="app-dashboard">
  <div class="admin-dashboard-bar" id="app-dashboard-bar">
    top bar
  </div>
  <div class="admin-dashboard-main" id="app-dashboard-main">
    <div class="admin-dashboard-rows">
      <div class="admin-dashboard-cell" id="app-sidebar">
        sidebar
      </div>
      <div class="admin-dashboard-cell" id="app-content">
        content
      </div>
    </div>
  </div>
</div>
-->


<div class="admin-dashboard" id="app-dashboard">


  <div class="admin-dashboard-bar" id="app-dashboard-bar">
  
   <!-- example top bar open -->
    <div class="admin-dashboard-bar-rows">
      <div class="admin-dashboard-bar-cell">
        <h1 class="admin-dashboard-bar-title">Hai user</h1>
      </div>
      <div class="admin-dashboard-bar-cell text-right display-mobile">
        <button id="button-toggle-sidebar">
          <span class="line"></span>
          <span class="line"></span>
          <span class="line"></span>
        </button>
      </div>
    </div>
   <!-- example top bar close -->
   
  </div>
  
  
  <div class="admin-dashboard-main" id="app-dashboard-main">
    <div class="admin-dashboard-rows">
    
    
      <div class="admin-dashboard-cell" id="app-sidebar">
        
        <!-- example menu sidebar open -->
        <h2 class="admin-dashboard-title">Navigation</h2>
        <ul class="menu-dashboard">
          <li><a class="item" href="#">Dashboard</a></li>
          <li>
            <span class="item dropdown-click active">Posts</span>
            <ul class="sub-menu-dashboard open">
              <li><a class="item" href="#">All</a></li>
              <li><a class="item" href="#">Draft</a></li>
              <li><a class="item" href="#">Published</a></li>
            </ul>
          </li>
          <li>
            <span class="item dropdown-click">Pages</span>
            <ul class="sub-menu-dashboard">
              <li><a class="item" href="#">All</a></li>
              <li><a...

CSS

/* body */
 body {
     margin: 0;
}

 .text-right {
     text-align: right;
}

 .admin-dashboard {
     font-family: "Open Sans",sans-serif;
     font-size: 16px;
     font-weight: 400;
     line-height: 1.5;
     background-attachment: fixed;
}

/* top bar */
 .admin-dashboard-bar {
     background: #3a475f;
     color: #fff;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     display: table;
     width: 100%;
     z-index: 100;
}

 .admin-dashboard-bar-rows {
     display: table-row-group;
}

 .admin-dashboard-bar-cell {
     display: table-cell;
     background: transparent;
     vertical-align: middle;
     padding: 5px 10px;
}

 .admin-dashboard-bar-title {
     color: #fff;
     font-size: 14px;
     margin: 2px 0;
}

 #button-toggle-sidebar {
     background: transparent;
     border: 1px solid white;
     padding: 5px;
     cursor: pointer;
     border-radius: 4px;
     vertical-align: top;
}
 #button-toggle-sidebar .line {
     display: block;
     height: 2px;
     background: white;
     width: 25px;
     margin: 4px 0;
}

/* main */
 .admin-dashboard-main {
     display: table;
     width: 100%;
     border: 0;
     border-collapse: collapse;
     height: 100%;
     margin-top: 44px;
}

 .admin-dashboard-rows {
     display: table-row-group;
}

 .admin-dashboard-cell {
     display: table-cell;
     background: transparent;
     vertical-align: top;
     padding: 15px;
}

/* sidebar */
 #app-sidebar {
     padding: 0;
     color: #fff;
     background: #404E67;
     width: 185px;
     line-height: 1;
     font-size: 13px;
     overflow: auto;
     display: none;
}

 .menu-dashboard {
     margin: 0;
     list-style: none;
     padding: 0;
     display: block;
}

 #app-sidebar li, #app-sidebar .list-container {
     display: block;
     list-style: none;
}

 .sub-menu-dashboard {
     padding-left: 20px;
     list-style: none;
     display: none;
     background: #383d56;
}

 .sub-menu-dashboard.open {
     display: block;
}

...

JavaScript

function controlPosition(){
	var $bar		= $( "#app-dashboard-bar");
	var $target		= $( "#app-dashboard-main");
	var $barHeight	= $bar.outerHeight();
	$target.css({
		"margin-top" : $barHeight+"px"
	});
}

$( document ).ready(function(){
	controlPosition();
});


//show hide sidebar
$( "#button-toggle-sidebar" ).on("click", function(){
	var $sidebar = $( "#app-sidebar" );
	if( $sidebar.css("display") == "none" ){
		$sidebar.css("display", "table-cell");
	} else {
		$sidebar.css("display", "none");
	}
  controlPosition();
});

//control
$( window ).on("resize", function(){
	controlPosition();
	$( "#app-sidebar" ).css({
		"display" : ""
	});
});


//show hide sub menu in sidebar
$( document ).on("click", ".dropdown-click", function(){
	var $next = $( this ).next( ".sub-menu-dashboard" );
  var $subMenu = $( ".sub-menu-dashboard" );
  $( ".dropdown-click" ).removeClass("active");
  $subMenu.hide();
  
  $next.show();
  $( this ).addClass( "active" );
});


/* optional */
$( document ).on("click", "#app-sidebar a", function( event ){
		var $href = $( this ).attr( "href" );
    if ( $href == "#" ){
    		alert( "This for demo only" );
        event.preventDefault();
    }
});