fallus

Тут как бы ::after участвует. Но он наследуется от первого. Так что всё честно!

100% высота на обычных элементах (которые position: static или relative) работает только если у их родителя фиксированная высота.
Например height: 400px

Если вы ничего не поместили в этот элемент(кроме тэга с классом nav), то я так понимаю, что вы ожидаете, что .header должен быть растянут на всё свободное пространство.

Для этого советую задать такой стиль:

.main-container {
  display: flex;
  flex-direction: column; /* направление по вертикали (row — по горизонтали) */
  margin: 0 auto; /* блок располагается по центру (по горизонтали) */
  width: 100%;
  max-width: 1600px; /* Максимальная ширина */
  min-height: 100vh; /* минимальная высота - высота экрана */
}

.main-container > *{
  width: 100% /* иногда у потомков блоках с display: flex, ширина не 100%, поэтому на всяк стоит её выставить вручную */
}

.header {
  flex-grow: 1 /* Если flex-direction: column, то элемент растянется на всю свободную высоту; если flex-direction: row — ширину*/
}

.main {
  flex-grow: 1 /* Если flex-direction: column, то элемент растянется на всю свободную высоту; если flex-direction: row — ширину*/
}

В общем, всё дело в MainLayout.vue

В нём вы импортируете это:

import Navbar from '@/components/app/Navbar'
import Sidebar from '@/components/app/Sidebar'

В этих двух компонентах есть разметка.
Но она не обёрнута в тэг <template>.

Оберните и всё норм будет.

Вероятно в Вашем коде стоит заменить document.querySelector('.show') на item

Ну, если вверх по дереву, относительно кликнутой ссылки, не выходя за рамки .nav, то так:

$('.link').on('click', function(e){
	e.preventDefault();
	$(this).parentsUntil('.nav', 'li').find('a').css('color', 'red')
})

Просто анимация уже запущена со значением переменной в 360deg. И не перезапускается.
Можно, в принципе, так сделать:

const rotateFunc = () => {
  let block = document.querySelector('.block')
  document.documentElement.style.setProperty("--rotate", "1080deg");

  block.style['animation-play-state'] = 'paused'
  setTimeout(() => {
    block.style['animation-play-state'] = ''
  }, 0)
}

* setTimeout — хак для того чтобы изменения были не моментальными, а через условный промежуток времени. Иначе не сработает сброс анимации. В Хроме, как минимум.

Я ничего не понял.
Но если нужно чтобы после клика по блоку, показывался блок, который внутри него(.col-xs-6.col-sm-12.dop-info), то вот.

И если уж вы использовали jQuery, то я переписал всё на jQuery.

$('.dop-info').hide()

$('.btn-collapse.transition.collapsed').on('click', function (){
  $(this).find(".col-xs-6.col-sm-12.dop-info").show() // или toggle(), вместо show(), чтоб показать\скрыть
});

Если это 1 аудиоплеер, то:

Если бы я использовал подобные библиотеки, то импортировал бы всё, кроме дефолтного CSS. Его бы, как максимум, скопировал в свой *.css\scss-файл.

Если он(css) импортируется в придачу с js-функционалом, то взял бы эту библиотеку из node_modules и использовал её не как часть vendor'а, а как часть своего проекта(удалив потом из package.json).

И потом уже имея все стили на руках, без их переопределения, кастомизировал бы их.
Или вовсе бы удалил и писал с нуля.

$('a[href^="#"]')

Выборка всех <a>, href которых начинается с #

Если ссылка именно что в формата site.com/url.html#id, то можно так:
$('a[href*=".html#"]')

.descr {
	display: inline;
}

.csrambl:not(.descr),
.popup_info {
	display: inline-block;
}