Как изменить css свойство в зависимости от ширины дочернего компонента?

Question

[Intelix]

Здравствуйте!
У меня есть компонент aside шириной 200px, он position: fixed
Есть main главный компонент, в который подключается aside
Как сделать так чтобы при изменении ширины aside (добавляется класс в компоненте aside ) менялся отступ (margin-left) у компонента main?

Т.е. хочу сворачивать и разворачивать aside, при этом чтобы менялся отступ у main.
Пробовал завести computed свойство которое вычисляло ширину aside и устанавливала маргин для main, но "TypeError: Cannot read properties of null vue"

Подозреваю что это нужно делать через props и $emit.
Может есть другие способы, например миксины в sass?

Хотелось бы пример или просто объяснение возможных путей.

Comments

[Антон Антон]

Проще сделать через флексы без фиксированных значений в двух компонентах. Менять ширину только одного из них.

Answer 1

[Сергей delphinpro]

Задать в кастомном свойстве ширину сайдбара

:root {
  --aside-width: 200px; /* По умолчанию */
}

.aside {
  width: var(--aside-width);
}

.main {
  margin-right: var(--aside-width);
}

В скрипте просто менять это свойство

document.documentElement.style.setProperty('--aside-width', '200px'); // show
document.documentElement.style.setProperty('--aside-width', '0'); // hide

Comments

[Intelix]

Класс, то что надо, спасибо!
Просто интересно, есть ли какая-то альтернатива с помощью sass?