[Vuejs]-How to use a curved menu approach with a q-card as the body

by

1👍

✅

Make a margin top/bottom or a padding top/bottom in left menu to not display too high or to low, those paddings will be your safe spaces to not show your items menu

2nd option: if the selected option is the first, the border-top-left-radius of the right container shoud be less, and the same at the bottom. If the option item is the last, then the border-bottom-right-radius should be less

Edit: demo:

const container = document.querySelector(".container");
const items = document.querySelectorAll(".menu .item");
const itemsLength = items.length;

for (let x = 0; x < itemsLength; x++) {
    items[x].addEventListener("click", () => {
    container.className = "container";
        items.forEach(item => item.className = "item"); //reset classes
        items[x].classList.add("selected");
    if (x === 0) {
        container.classList.add("first-item");
    }
    if (x + 1 === itemsLength) {
        container.classList.add("last-item");
    }
    if (x > 0) {
        items[x - 1].classList.add("selected-before");
    }
    if (x + 1 < itemsLength) {
        items[x + 1].classList.add("selected-after");
    }
    
  });
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  border: 10px solid black;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  background-color: black;
}

.menu {
  width: 60px;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 49%, rgba(221, 221, 221, 1) 50%);
}

.menu .item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  color: white;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  background-color: black;
}

.menu .item.selected {
  background-color: #ddd;
  color: black;
}

.menu .item.selected-before {
  border-bottom-right-radius: 5px;
}

.menu .item.selected-after {
  border-top-right-radius: 5px;
}

.content {
  width: 100%;
  display: flex;
  padding: 20px;
  border-radius: 5px;
  background-color: #ddd;
}

.container.first-item .content {
  border-top-left-radius: 0;
}

.container.last-item .content {
  border-bottom-left-radius: 0;
}
<div class="container">
  <div class="menu">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
    <div class="item">E</div>
  </div>
  <div class="content">
    demo content
  </div>
</div>
👤Cristóbal Díaz Álvarez

Leave a comment