Add active class to footer buttons
This commit is contained in:
parent
5c4b402341
commit
4f6565c24a
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user