<!doctype html>
<html lang="en">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <link rel="stylesheet" href="css/style.css">
      <link rel="stylesheet" href="css/responsive.css">
      <title>ABC-DASHBOARD</title>
   </head>
   <body class="pushmenu-push pushmenu-push-toright">
       <nav class="admin-nav pushmenu pushmenu-left pushmenu-open" id="sidebar">
         <div class="logo"><img src="https://www.abc.org/Portals/1/abc_logo_svg.svg" alt=""></div>
         <ul>
            <li class="active"><a href="index.html"><img src="img/dashboard.png" alt=""> Dashboard</a></li>
            <li><a href="classsetting-names.html"><img src="img/tools.png" alt="">Class Settings</a></li>
            <li><a href="class-form.html"><img src="img/create.png" alt="">Create Class</a></li>
            <li><a href="admin-users.html"><img src="img/ad.png" alt="">Admin Users</a></li>
         </ul>
      </nav>
      <header>
         <div class="d-flex admin-header">
            <div class="toggle active" id="nav_list"> <img src="img/hamperger.png" alt=""></div>
            <div class="admin ml-auto d-flex">
               <span > <img src="img/admin-logo.png"> Admin</span> <span class="logout"> <img src="img/logout.png">Logout</span>
               <div class="toggle-bar"  id="nav-click" onclick="myFunction(this)">
                  <div class="bar1"></div>
                  <div class="bar2"></div>
                  <div class="bar3"></div>
               </div>
            </div>
         </div>
      </header>
      <section class="admin-content">
         <div class="container">
            <h2>Dashboard</h2>
            <div class="dashboard d-flex"> 
              <div class="col-sm-10  d-flex no-pad"> 
                  <div class="setting">
                    <h3>150</h3>
                    <h2>Class Settings</h2>
                    <a href="classsetting-names.html">View</a>

                  </div>
                  <div class="create">
                    <h3>150</h3>
                    <h2>Create Class</h2>
                    <a href="class-form.html">View</a></div>
                     <div class="create admin">
                    <h3>150</h3>
                    <h2>Admin users</h2>
                    <a href="admin-users.html">View</a></div>
                 </div>

              
            </div>
         </div>
      </section>
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
      <script type="text/javascript" src="js/push.js"></script>
      <!--    <script>
         function toggleslidebar() {
         document.getElementById("sidebar").classList.toggle("active");
         }
         </script> -->
      <script type="text/javascript">
         $(document).ready(function(){
         $("#nav_list").click(function(){
         $(".admin-content").toggleClass("main");
         $(".admin-header .admin").toggleClass("main");
         });
         
         });
      </script>
         <script>
         function myFunction(x) {
             x.classList.toggle("change");
         }
         </script>
         
      <script>
         $("#nav-click").click(function(){
                 $("#sidebar ul").slideToggle();
             });
      </script>
      <script type="text/javascript">
         $(".date-time").hide();
         $(".chk-date1").click(function() {
         if($(this).is(":checked")) {
         $("#expand1").show();
         } else {
         $("#expand1").hide();
         }
         });

         $(".chk-date2").click(function() {
         if($(this).is(":checked")) {
         $("#expand2").show();
         } else {
         $("#expand2").hide();
         }
         });

         $(".chk-date3").click(function() {
         if($(this).is(":checked")) {
         $("#expand3").show();
         } else {
         $("#expand3").hide();
         }
         });
      </script>
   </body>
</html>