1
What I want is that there is no overlapping of the side menu on top of my main content, but that this is pushed to the side when the menu is opened.
I know how to do this with images, using Section, backgound-size and backgound-size, but I couldn’t repeat with a full component.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<link href="https://fonts.googleapis.com/css2?family=Kanit&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/b11e7f19fc.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="exemplo.css">
</head>
<body>
<input type="checkbox" id="check" />
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<h6 class="username">Olá, {{ username }}</h6>
<div class="sidebar">
<header>BI</header>
<ul>
<li>
<a href="#">
<i class="fas fa-chart-pie"></i>
Produção
</a>
</li>
<li>
<a href="#">
<i class="fas fa-money-bill"></i>
Vendas
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chart-line"></i>
Pedidos
</a>
</li>
<li>
<a href="#">
<i class="fas fa-receipt"></i>
Cadastro de Categoria
</a>
</li>
</ul>
</div>
</div>
<div class="content">
<VendasItems></VendasItems>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.sidebar {
position: fixed;
left: -250px;
width: 250px;
height: 100%;
background: #062a40;
transition: all .5s ease;
}
.sidebar header {
font-size: 20px;
color: white;
text-align: center;
line-height: 50px;
user-select: none;
}
.sidebar ul a {
display: block;
height: 100%;
width: 100%;
line-height: 60px;
color: white;
padding-left: 30px;
transition: 0.3s;
}
.sidebar a:hover {
color: #b3b1b1;
padding-left: 40px;
}
.sidebar ul a i {
margin-right: 15px;
}
#check {
display: none;
}
label #btn,
label #cancel {
position: absolute;
cursor: pointer;
background: #062a40;
border-radius: 3px;
}
label #btn {
left: 40px;
top: 15px;
font-size: 30px;
color: white;
padding: 4px 8px;
transition: all .5s;
}
label #cancel {
z-index: 1111;
left: -195px;
top: 20px;
font-size: 20px;
color: white;
padding: 4px 9px;
transition: all .6s ease;
}
#check:checked~.sidebar {
left: 0;
}
#check:checked~label #btn {
left: 270px;
pointer-events: none;
}
#check:checked~label #cancel {
left: 195px;
}
#check:checked~.content {
margin-left: 250px;
}
.topnav {
padding-right: 30px;
background-color: #062a40;
overflow: hidden;
height: 80px;
}
.username {
color: #b3b3b3;
float: right;
padding-top: 25px;
}
#content {
background-position: center;
background-size: contain;
height: 100vh;
transition: all .5s;
}
I’m using Vuejs, and my component is very simple:
<template>
<div>
<div>
<div class="container">
<h3 id="title">Vendas</h3>
<div class="row">
<div class="col-md-6" v-for="title in titles" v-bind:key="title.indicatorTitle">
<div class="card">
{{ title.indicatorTitle }}
<div class="card-body" v-for="value in values" v-bind:key="value.indicatorValue">
<ul>
<li class="groupCategory">{{ value.indicatorValue }}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
You can wrap the component with a div and do as you do with images etc. Ps.: [mcve]
– Valdeir Psr
Position Fixed in this side menu
– hugocsl
I edited the question, in case it gets clearer @Valdeirpsr. I’m sorry, I’m still new here. If you have any editing suggestions, I’ll be glad to accept.
– ketts