<nav class="nav-footer nav-footer--social">
<h6 class="alt--font">Suivez-nous</h6>
<ul>
<li><a href="" title="Suivez-nous sur Facebook"><i class="icon icon--facebook"></i></a></li>
<li><a href="" title="Suivez-nous sur Instagram"><i class="icon icon--instagram"></i></a></li>
<li><a href="" title="Suivez-nous sur YouTube"><i class="icon icon--youtube"></i></a></li>
</ul>
</nav>
<nav class="nav-footer{{#if social }} nav-footer--social{{/if}}">
{{#unless social }}<button>{{nav_footer.title}}</button>{{/unless}}
<h6 class="alt--font">{{nav_footer.title}}</h6>
<ul>
{{#if social }}
<li><a href="{{facebook_link}}" title="Suivez-nous sur Facebook"><i class="icon icon--facebook"></i></a></li>
<li><a href="{{instagram_link}}" title="Suivez-nous sur Instagram"><i class="icon icon--instagram"></i></a></li>
<li><a href="{{youtube_link}}" title="Suivez-nous sur YouTube"><i class="icon icon--youtube"></i></a></li>
{{else}}
{{#each nav_footer.links }}
<li><a href="{{this.link}}">{{{this.title}}}</a></li>
{{/each}}
{{/if}}
</ul>
</nav>
{
"nav_footer": {
"title": "Suivez-nous",
"links": [
{
"title": "<i class=\"icon icon--facebook\"></i>",
"link": "#"
},
{
"title": "<i class=\"icon icon--instagram\"></i>",
"link": "#"
},
{
"title": "<i class=\"icon icon--youtube\"></i>",
"link": "#"
}
]
},
"social": true
}
.nav-footer {
> button {
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
width: 100%;
outline: none;
-webkit-appearance: none;
padding: 0;
margin: 0;
border: 0;
background: transparent;
&:focus {
outline: 2px dashed $c-red;
@include mediaWQuery($media-query-m) { outline: none }
}
&::after {
content: '';
display: block;
min-width: 20px;
min-height: 20px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='far' data-icon='chevron-down' class='svg-inline--fa fa-chevron-down fa-w-14' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%234C4636' d='M441.9 167.3l-19.8-19.8a12 12 0 00-17 0L224 328.2 42.9 147.5a12 12 0 00-17 0L6.1 167.3a12 12 0 000 17l209.4 209.4a12 12 0 0017 0l209.4-209.4a12 12 0 000-17z'/%3E%3C/svg%3E");
transition: .2s ease;
@include mediaWQuery($media-query-m) { display: none }
}
}
button, h6 {
margin: 0;
font-size: rem(21);
font-weight: 700;
font-family: Nunito,sans-serif;
color: $c-font-color;
}
h6 { display: none }
@include mediaWQuery($media-query-m) {
h6 { display: block }
> button { display: none }
}
> ul {
display: none;
margin-top: .5rem;
padding: 0;
@include mediaWQuery($media-query-m) {
display: block;
}
}
&--visible {
& > ul { display: block }
& > button:after { transform: rotate(180deg) }
}
> ul > li {
padding: .3rem 0;
display: block;
}
> ul > li > a {
font-size: rem(16);
padding: 0;
text-decoration: underline;
&:hover, &:focus { text-decoration-color: transparent }
}
&--social {
h6 { display: block }
> ul { display: block }
> ul > li {
display: inline-block;
& + li { margin-left: .4rem }
}
> ul > li > a {
&:hover, &:focus {
transform: scale(1.1) rotate(-3deg);
}
}
}
}
There are no notes for this item.