Add active class to footer buttons

This commit is contained in:
Pavel Djundik 2019-10-16 17:02:57 +03:00
parent 5c4b402341
commit 4f6565c24a

View File

@ -18,45 +18,50 @@
<footer id="footer"> <footer id="footer">
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign in" <span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign in"
><button ><button
class="icon sign-in" :class="['icon', 'sign-in', {active: $store.state.activeWindow === 'SignIn'}]"
data-target="#sign-in" data-target="#sign-in"
data-component="SignIn" data-component="SignIn"
aria-label="Sign in" aria-label="Sign in"
role="tab" role="tab"
aria-controls="sign-in" aria-controls="sign-in"
aria-selected="false" :aria-selected="$store.state.activeWindow === 'SignIn'"
/></span> /></span>
<span <span
class="tooltipped tooltipped-n tooltipped-no-touch" class="tooltipped tooltipped-n tooltipped-no-touch"
aria-label="Connect to network" aria-label="Connect to network"
><button ><button
class="icon connect" :class="['icon', 'connect', {active: $store.state.activeWindow === 'Connect'}]"
data-target="#connect" data-target="#connect"
data-component="Connect" data-component="Connect"
aria-label="Connect to network" aria-label="Connect to network"
role="tab" role="tab"
aria-controls="connect" aria-controls="connect"
aria-selected="false" :aria-selected="$store.state.activeWindow === 'Connect'"
/></span> /></span>
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Settings" <span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Settings"
><button ><button
:class="[
'icon',
'settings',
{active: $store.state.activeWindow === 'Settings'},
]"
class="icon settings" class="icon settings"
data-target="#settings" data-target="#settings"
data-component="Settings" data-component="Settings"
aria-label="Settings" aria-label="Settings"
role="tab" role="tab"
aria-controls="settings" aria-controls="settings"
aria-selected="false" :aria-selected="$store.state.activeWindow === 'Settings'"
/></span> /></span>
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Help" <span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Help"
><button ><button
class="icon help" :class="['icon', 'help', {active: $store.state.activeWindow === 'Help'}]"
data-target="#help" data-target="#help"
data-component="Help" data-component="Help"
aria-label="Help" aria-label="Help"
role="tab" role="tab"
aria-controls="help" aria-controls="help"
aria-selected="false" :aria-selected="$store.state.activeWindow === 'Help'"
/></span> /></span>
</footer> </footer>
</aside> </aside>