estoy teniendo problemas, mejor dicho, no tengo idea de cómo agregar un efecto de transición cuando se oculta/muestra el sidebar ya que se ve muy rápido y no es agradable visualmente, se encuentra ubicado en la parte derecha del monitor.
Para ocultar / mostrar el menu (boton sidebar) lo estoy haciendo mediante css grid y una variable booleana, si está abierto aplicale la clase ".opened" a div principal
Por favor ejecutar el Código en pantalla completa. Creo que el problema se encuentra en el display none pero no sé, ya no sé qué hacer.
abierto( con sidebar ) div pricipal
<div class="container" :class="{ opened: isOpen }">
...
codigo html
...
</div>
codigo css:
.container {
max-width: 1920px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr) 260px;
grid-template-rows: repeat(3, auto);
grid-template-areas:
"header header sidebar"
"content content sidebar"
"footer footer sidebar";
}
abierto( sin sidebar)
.opened {
grid-template-areas:
"header header header"
"content content content"
"footer footer footer";
aside {
display: none;
}
}
const application = Vue.createApp({
data() {
return {
isOpen: false,
}
},
template: `
<div class="container" :class="{ opened: isOpen }">
<header>
<div class="top-navbar">
<div class="titles">
<button @click="isOpen = !isOpen">
<i class="fas fa-bars">sidebar</i>
</button>
</div>
<nav>
<ul id="items">
<li>
<a href="#" class="btn"><i class="fas fa-bell"></i></a>
</li>
<li><a href="#" class="btn">Home</a></li>
<li><a href="#" class="btn">About</a></li>
<li><a href="#" class="btn">About</a></li>
<li><a href="#" class="btn">About</a></li>
<li>
<button class="btn"><i class="fas fa-exchange-alt"></i></button>
</li>
</ul>
</nav>
</div>
<div class="navigation">
<a href="" class="CompanyName"><i class="fas fa-home"></i> Company Name Here</a> >
</div>
</header>
<main>
<ul>
<li>
<div class="box">
<div class="box-title">
<h1>Log de sessiones</h1>
</div>
<div class="box-content">
Hola @nombreDeusuario
<br />
<table id="customers">
<tr>
<th>Direccion IP</th>
<th>Ingreso de sesion</th>
<th>hora</th>
</tr>
<tr>
<td>200.43.455.24</td>
<td>15/01/2021</td>
<td>11:45 a.m.</td>
</tr>
<tr>
<td>200.43.455.2</td>
<td>14/01/2021</td>
<td>01:45 a.m.</td>
</tr>
<tr>
<td>200.43.455.2</td>
<td>13/01/2021</td>
<td>08:25 a.m.</td>
</tr>
<tr>
<td>200.43.455.2</td>
<td>12/01/2021</td>
<td>7:22 a.m.</td>
</tr>
<tr>
<td>200.43.455.2</td>
<td>11/01/2021</td>
<td>09:16d a.m.</td>
</tr>
</table>
<div class="buttons-right">
<button class="btn">Ver</button>
</div>
</div>
</div>
</li>
<li>
<div class="box">
<div class="box-title">
<h1>Contenido</h1>
</div>
<div class="box-content"></div>
</div>
</li>
</ul>
</main>
<aside>
<div class="navbar">
<div class="avatar">
<img src="https://via.placeholder.com/60" alt="" srcset="" />
</div>
<div class="name">
<p>Lic. Maria G</p>
</div>
<div class="buttons">
<button>Link 1</button>
<button>Link x</button>
</div>
<ul>
<li>
<a href="" class="link"><i class="fas fa-home space-i">Home</i></a>
</li>
<li>
<a href="" class="link"><i class="fas fa-users space-i">Employees</i></a>
</li>
</ul>
<ul>
<li><a href="" class="link">Accounts</a></li>
</ul>
<ul>
<li><a href="" class="link">Employees</a></li>
</ul>
</div>
</aside>
<footer>
<h3>© 2019 Company Name. All rights reserved.</h3>
</footer>
</div>
`,
});
application.mount("#app");
* {
margin: 0;
padding: 0;
}
body {
color: #000;
font-family: "Roboto", sans-serif;
text-align: center;
-ms-flex-line-pack: center;
align-content: center;
background-color: whitesmoke;
}
.container {
max-width: 1920px;
margin: 0 auto;
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[2] 260px;
grid-template-columns: repeat(2, 1fr) 260px;
-ms-grid-rows: (auto)[3];
grid-template-rows: repeat(3, auto);
grid-template-areas: "header header sidebar"
"content content sidebar"
"footer footer sidebar";
}
.opened {
grid-template-areas: "header header header"
"content content content"
"footer footer footer";
}
.opened aside {
display: none;
}
header {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
grid-area: header;
}
main {
-ms-grid-row: 2;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
grid-area: content;
margin-left: 20px;
margin-right: 20px;
text-align: justify;
}
main ul {
list-style: none;
padding: 0;
}
.box {
background-color: white;
border-radius: 4px;
padding: 20px;
margin-bottom: 50px;
}
.box .box-title {
border-bottom: 1px solid rgba(26, 54, 126, 0.125);
padding-bottom: 10px;
}
.box .box-content {
margin-top: 15px;
}
aside {
background-color: white;
-ms-grid-row: 1;
-ms-grid-row-span: 3;
-ms-grid-column: 3;
grid-area: sidebar;
-webkit-transition: width 2s;
transition: width 2s;
}
footer {
background-color: grey;
-ms-grid-row: 3;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
grid-area: footer;
height: 150px;
}
.top-navbar {
font-weight: 800;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0053ac), to(#0053ac));
background-image: linear-gradient(#0053ac, #0053ac);
-webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
height: 55px;
padding: 5px 20px 5px 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.top-navbar nav ul {
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.top-navbar nav ul li {
margin: 6px;
}
.navigation {
margin-left: 40px;
margin-top: 20px;
text-align: left;
}
.navigation .CompanyName {
color: black;
}
.navbar {
-webkit-transition: margin-right 2s ease-in-out;
transition: margin-right 2s ease-in-out;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0053ac), to(#0053ac));
background-image: linear-gradient(#0053ac, #0053ac);
}
.navbar ul {
list-style-type: none;
text-align: left;
padding: 10px;
}
.navbar ul li {
opacity: 0.8;
margin: 5px;
border: black solid 3px;
border-radius: 5px;
margin-top: 5px;
}
.navbar ul li a {
-webkit-transition: 0.2s;
transition: 0.2s;
}
.navbar ul li i {
margin: 0px;
padding: 0px;
}
.space-i::before {
margin-right: 10px;
margin-left: 5px;
}
/* unvisited link */
a:link {
color: white;
text-decoration: none;
}
/* visited link */
a:visited {
color: white;
}
/* mouse over link */
a:hover {
color: white;
}
/* selected link */
a:active {
color: white;
}
#customers {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td,
#customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even) {
background-color: #f2f2f2;
}
#customers tr:hover {
background-color: #ddd;
}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0053ac), to(#0053ac));
background-image: linear-gradient(#0053ac, #0053ac);
color: white;
}
.buttons-right {
margin: 15px 0px 0px 0px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.btn {
border-radius: 5px;
border: 3px solid white;
color: black;
border: none;
padding: 5px 10px;
}
.btn:hover {
background-color: #01438a;
}
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CDN en Vue 3</title>
<link rel="stylesheet" href="./style.css" />
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<Layout />
</div>
<script src="./app.js"></script>
</body>
</html>