<nav class="nav-subfooter">
<img src="../../img/brand-jmt.svg" alt="" class="brand" />
<span>© 2019 - JMT Alimentation Animale</span>
<ul>
<li><a href="">Politique de confidentialité</a></li>
<li><a href="">Mentions légales</a></li>
<li><a href="">Plan de site</a></li>
</ul>
</nav>
<nav class="nav-subfooter">
{{> @brand }}
<span>© {{nav_subfooter.current_year}} - {{nav_subfooter.site_name}}</span>
<ul>
{{#each nav_subfooter.links }}
<li><a href="{{this.link}}">{{{this.title}}}</a></li>
{{/each}}
</ul>
</nav>
{
"nav_subfooter": {
"current_year": 2019,
"site_name": "JMT Alimentation Animale",
"links": [
{
"title": "Politique de confidentialité",
"links": "#"
},
{
"title": "Mentions légales",
"links": "#"
},
{
"title": "Plan de site",
"links": "#"
}
]
}
}
.nav-subfooter {
text-align: center;
font-size: rem(14);
color: $c-brown;
> .brand { display: block; margin: 0 auto $margin-m }
> ul > li {
display: inline-block;
& + li {
&::before {
content: ' - ';
display: inline-block;
}
}
}
> ul > li > a {
display: inline-block;
color: $c-brown;
padding: 0 .3rem;
text-decoration: underline;
&:hover, &:focus {
text-decoration-color: transparent;
}
}
@include mediaWQuery($media-query-xl) {
> ul, > span {
vertical-align: middle;
display: inline-block;
line-height: 1;
}
> span::after {
content: ' - ';
}
}
}
if(window.innerWidth <= 780) {
const navsFooter = document.querySelectorAll('.nav-footer');
const refferedClass = 'nav-footer--visible';
[].slice.call(navsFooter).forEach(navFooter => {
navFooter.querySelector('button').addEventListener('click', () => {
if(navFooter.classList.contains(refferedClass)) {
navFooter.classList.remove(refferedClass)
} else {
if(document.querySelector(`.${refferedClass}`))
document.querySelector(`.${refferedClass}`).classList.remove(refferedClass);
navFooter.classList.add(refferedClass);
}
});
})
}
There are no notes for this item.