Why not change class?

Why not change the class when I change the variable?

Then I do iterate through the array and make a menu. The mixins in a separate file -
-var active = 'home'; //default

-var menu = { 'home' : 'google.com', 'Gallery' : 'instagram.com', 'Travel' : 'vk.com', 'About me' : 'www.youtube.com', 'Contacts' : 'toster.ru', };

 mixin main-menu
nav.header__nav
ul.header__nav.item__list
 each val, key in menu
li.list__item
 if active === key
 a.list__link active.list__link(href=val, title=key)= key
else
 a.list__link(href=val, title=key)= key


And call it with another value in another file, but the variable this does not change anything
div.top-panel
+main-menu
 - var active = 'Gallery'


And this is the compiled html

<nav class="header__nav"> <ul class="header__item nav__list"> <li class="list__item"><a class="list__link-active list__link" href="google.com" title="Home">Home</a> </li> <li class="list__item"><a class="list__link" href="instagram.com" title="Gallery">Gallery</a> </li> <li class="list__item"><a class="list__link" href="vk.com" title="Travel">Travel</a> </li> <li class="list__item"><a class="list__link" href="www.youtube.com" title="About me">About me</a> </li> <li class="list__item"><a class="list__link" href="toster.ru" title="Contacts">Contacts</a> </li> </ul> </nav>
Here is a screenshot - prntscr.com/gt4g87
June 14th 19 at 20:15

Find more questions by tags HTMLPugJavaScript