CSS side menu: VUE component content pushed right

Asked

Viewed 56 times

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>
html css menu

  • You can wrap the component with a div and do as you do with images etc. Ps.: [mcve]

  • Position Fixed in this side menu

  • 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.

1 answer

1


In the end, I managed to solve my problem. I’ll leave the functions I used here, in case I ever help someone.

I added a checkbox v-on:click activating a function to check whether checked is true:

<input type="checkbox" id="check" @click="isChecked()" />

Then all you had to do was add methods:

methods: {
    isChecked() {
      var checked = document.getElementById("check").checked;
      if (checked) {
        document.getElementById("componentSale").style.paddingLeft = "250px";
      } else {
        document.getElementById("componentSale").style.paddingLeft = "0px";
      }
    }
  }

Browser other questions tagged html css menu

You are not signed in. Login or sign up in order to post.