Why doesn't the class change?

Question

JavaScript

Why doesn't the class change when I change the variable?
Here I do iterate over the array and make the menu. The mixin itself is 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 so I call it with a different value in another file, but the variable does not change anything in this

div.top-panel
        +main-menu
            - var active = 'Gallery'

And this is the compiled html -

<div class="top-panel">
            <nav class="header__nav">
              <ul class="header__nav item__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