<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 220px;
  position: fixed;
  z-index: 1;
  top: 50px;
  left: 0;
  background-color: #333333;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 15px;
  text-decoration: none;
  font-size: 15px;
  color: white;
  display: block;
  transition: 0.3s;
  text-align: left;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
.sidenav *{color: #bfbfbf;}
.sidenav a{color: #b3b3b3;}

.navbar-brand {width: 220px;}
</style>
</head>
<body>


	
<div id="mySidenav" class="sidenav" style="padding-top: 0px;" >
	
  <a href="javascript:void(0)" class="closebtn" style="top: 0px;" onclick="closeNav()">&times;</a>
  <br><br><br>
  <div style="text-align: left; padding: 5px; padding-left: 10px; font-size: 14px; color: #808080;">Dashboard</div>
  <div id="list_pag" style="position: relative;"> 
		
  </div>
	 
		
	
</div>

<!--<span style="font-size:16px;cursor:pointer; position: fixed; top: 65px; left: 5px;" onclick="openNav()">&#9776; páginas</span>
-->
<script>
$("body").css("background","RGB(247, 248, 251)");
$("#list_pag").load("<?php echo $dominio;?>src/controller/Bi_paginaControllerUser.php?mod=lista_paginas&carragar_formulario_seletor=modal_conteudobi_pagina");

originalCssConteudo = null;
$( document ).ready(function() {
    openNav();
});

function openNav() {

  document.getElementById("mySidenav").style.width = "220px";
  //document.getElementById("main").style.marginLeft = "220px";
  originalCssConteudo = document.getElementById("conteudo").style;
  document.getElementById("conteudo").style.marginLeft = "220px";
  $("#conteudo").css("width", "calc(100% - 220px)");
  document.getElementById("menuSobreporAnav").style.position = "fixed"; 	
  // document.getElementById("menuSobreporAnav").style.display = "block"; 	
}

function closeNav() {
  //document.getElementById("menuSobreporAnav").style.display = "none"; 		
  document.getElementById("mySidenav").style.width = "0";
  //document.getElementById("main").style.marginLeft= "0";
  document.getElementById("conteudo").style.marginLeft = "0";
  document.getElementById("conteudo").style = originalCssConteudo;
  document.getElementById("menuSobreporAnav").style.position = "absolute"; 
 // $("#conteudo").css("width", "100%");
  //$("#conteudo").css("max-width", "900px");
}
</script>
   
</body>
</html> 
