<body class="header-fixed sidebar-fixed sidebar-dark header-light" id="body">
<div class="wrapper">
<!-- left-sidebar -->
<aside class="left-sidebar bg-sidebar">
<div id="sidebar" class="sidebar sidebar-with-footer">
<!-- Logo -->
<div class="app-brand">
<a href="javascript:void(0)" title="Sleek Dashboard">
<svg class="brand-icon" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="30" height="33" viewBox="0 0 30 33"><g fill="none" fill-rule="evenodd"><path class="logo-fill-blue" fill="#7DBCFF" d="M0 4v25l8 4V0zM22 4v25l8 4V0z"/><path class="logo-fill-white" fill="#FFF" d="M11 4v25l8 4V0z"/></g></svg>
<span class="brand-name text-truncate">Sleek Dashboard</span>
</a>
</div>
<!-- begin sidebar scrollbar -->
<div class="sidebar-scrollbar">
<!-- sidebar menu -->
<ul class="nav sidebar-inner" id="sidebar-menu">
<li class="has-sub active expand" >
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#dashboard" aria-expanded="false" aria-controls="dashboard">
<i class="mdi mdi-view-dashboard-outline"></i>
<span class="nav-text">Nav 1</span> <b class="caret"></b>
</a>
<ul class="collapse show" id="dashboard" data-parent="#sidebar-menu">
<div class="sub-menu">
<li class="active">
<a class="sidenav-item-link" href="javascript:void(0)"><span class="nav-text">Sub nav 1</span></a>
</li>
<li>
<a class="sidenav-item-link" href="javascript:void(0)"><span class="nav-text">Sub nav 2</span><span class="badge badge-success">new</span></a>
</li>
</div>
</ul>
</li>
<li class="has-sub">
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#app" aria-expanded="false" aria-controls="app">
<i class="mdi mdi-pencil-box-multiple"></i>
<span class="nav-text">Nav 2</span> <b class="caret"></b>
</a>
<ul class="collapse" id="app" data-parent="#sidebar-menu">
<div class="sub-menu">
<li>
<a class="sidenav-item-link" href="javascript:void(0)"><span class="nav-text">Sub nav 1</span></a>
</li>
<li>
<a class="sidenav-item-link" href="javascript:void(0)"><span class="nav-text">Sub nav 2</span></a>
</li>
</div>
</ul>
</li>
<li class="has-sub">
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#tables" aria-expanded="false" aria-controls="tables">
<i class="mdi mdi-table"></i>
<span class="nav-text">Nav 3</span> <b class="caret"></b>
</a>
<ul class="collapse" id="tables" data-parent="#sidebar-menu">
<div class="sub-menu">
<li>
<a class="sidenav-item-link" href="javascript:void(0)"><span class="nav-text">Sub nav 1</span></a>
</li>
<li class="has-sub">
<a class="sidenav-item-link" href="javascript:void(0)" data-toggle="collapse" data-target="#data-tables" aria-expanded="false" aria-controls="data-tables">
<span class="nav-text">Sub nav 2</span> <b class="caret"></b>
</a>
<ul class="collapse" id="data-tables">
<div class="sub-menu">
<li>
<a href="javascript:void(0)">Child Sub nav 1</a>
</li>
<li>
<a href="javascript:void(0)">Child Sub nav 2</a>
</li>
</div>
</ul>
</li>
</div>
</ul>
</li>
</ul>
</div>
</div>
</aside>
<div class="page-wrapper">
<!-- Header -->
<header class="main-header " id="header">
<nav class="navbar navbar-static-top navbar-expand-lg pr-0">
<!-- Sidebar toggle button -->
<button id="sidebar-toggler" class="sidebar-toggle">
<span class="sr-only">Toggle navigation</span>
</button>
<!-- search form -->
<div class="search-form d-none d-lg-inline-block">
<div class="input-group">
<button type="button" name="search" id="search-btn" class="btn btn-flat">
<i class="mdi mdi-magnify"></i>
</button>
<input type="text" name="query" id="search-input" class="form-control" placeholder="'button', 'chart' etc." autofocus autocomplete="off"/>
</div>
</div>
<div class="navbar-right ">
<ul class="nav navbar-nav">
<li class="dropdown notifications-menu">
<button class="dropdown-toggle">
<i class="mdi mdi-bell-outline"></i>
</button>
</li>
<!-- User Account -->
<li class="dropdown user-menu">
<button href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
<img src="https://sleek.tafcoder.com/assets/img/user/user.png" class="user-image" alt="User Image" />
<span class="d-none d-lg-inline-block">Abdus Salam</span>
</button>
</li>
</ul>
</div>
</nav>
</header>
<div class="content-wrapper">
<div class="content">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Title</h2>
</div>
<div class="card-body">
<div class="row">
<div class="col-12">
<p class="mb-5">Now you can add more elements.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
