<header class="o-header" data-header>
<div class="o-header__side-element">
<img src="../../img/logo.svg" alt="L'illustré logo" class="o-header__logo">
</div>
<nav class="m-nav" data-nav>
<ul class="m-nav__menu">
<li class="m-nav__item is-current">
<a class="m-nav__link" href="#">
<svg class="a-icon" role="img" title="Accueil">
<use xlink:href="#home" />
</svg>
<p class="m-nav__item-title">Accueil</p>
</a>
</li>
<li class="m-nav__item">
<a class="m-nav__link" href="#">
<svg class="a-icon" role="img" title="Reportages">
<use xlink:href="#article" />
</svg>
<p class="m-nav__item-title">Reportages</p>
</a>
</li>
<li class="m-nav__item">
<a class="m-nav__link" href="#">
<svg class="a-icon" role="img" title="Portraits">
<use xlink:href="#portrait" />
</svg>
<p class="m-nav__item-title">Portraits</p>
</a>
</li>
<li class="m-nav__item">
<a class="m-nav__link" href="#">
<svg class="a-icon" role="img" title="Vidéos">
<use xlink:href="#video" />
</svg>
<p class="m-nav__item-title">Vidéos</p>
</a>
</li>
<li class="m-nav__item">
<a class="m-nav__link" href="#">
<svg class="a-icon" role="img" title="Photos">
<use xlink:href="#photo" />
</svg>
<p class="m-nav__item-title">Photos</p>
</a>
</li>
</ul>
</nav>
<div class="o-header__side-element o-header__side-element--right">
<div class="o-header__side-element_content">
<a class="o-header__subscribe" href="#">S'abonner</a>
<a href="#" class="o-header__search" rel="search">
<svg class="a-icon" role="img" title="Recherche">
<use xlink:href="#search" />
</svg>
<svg class="a-icon" role="img" title="Close">
<use xlink:href="#close" />
</svg>
</a>
</div>
</div>
<div class="o-search-bar " data-search>
<div class="o-search-bar__wrapper">
<div class="grid-wrapper">
<div class="grid-container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<form action="#" class="o-search-bar__form">
<p class="o-search-bar__form-label">Rechercher sur L’illustré</p>
<div class="o-search-bar__input-wrapper">
<input class="o-search-bar__input" id="input--search" type="text" required>
<label for="input--search" class="o-search-bar__input-label">Entrer un mot clé ou un auteur</label>
<label for="input--search" class="o-search-bar__input-label o-search-bar__input-label--mobile">Entrer un mot clé</label>
<svg class="a-icon a-icon--primary" role="img" title="search">
<use xlink:href="#search" />
</svg>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="o-search-bar__backdrop"></div>
</div>
</header>
<header class="o-header" data-header>
<div class="o-header__side-element">
<img src="{{path '/img/logo.svg' }}" alt="L'illustré logo" class="o-header__logo">
</div>
{{> '@m-nav' nav }}
<div class="o-header__side-element o-header__side-element--right">
<div class="o-header__side-element_content">
<a class="o-header__subscribe" href="#">S'abonner</a>
<a href="{{ search_url }}" class="o-header__search" rel="search">
{{> @a-icon name="search" title="Recherche" }}
{{> @a-icon name="close" title="Close" }}
</a>
</div>
</div>
{{#if search}}
{{ render '@o-search-bar' }}
{{/if}}
</header>
/*
* Size variables used throughout this file,
* grouped here for easier modification
*/
$header-side-elements-min-width: 160px;
$header-side-elements-max-width: 290px;
$header-min-height: 40px;
$header-max-height: 60px;
$header-padding-vertical-min: 7px;
$header-padding-vertical-max: 15px;
$header-search-button-min: 28px; // used for both width and height
$header-search-button-max: 34px; // used for both width and height
$header-subscribe-horizontal-margin-min: 20px;
$header-subscribe-horizontal-margin-max: 36px;
// END local variables
.o-header {
position: fixed;
top: 0;
left: 0;
width: 100vw;
max-width: 100%;
z-index: $z-index-topbar;
font-family: $font-highlight;
color: $color-gray-dark;
@include fluid-props(height, $fluid-min, $fluid-max, $header-min-height, $header-max-height);
background-color: white;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
// Litle hack to be sure the margins are white
// the the search opens
&::after {
content: " ";
position: absolute;
top: 0;
left: -8px;
width: 100vw;
height: 100%;
z-index: 0;
background-color: white;
@include media($sm-breakpoint) {
left: -16px;
}
}
box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.1);
@include media($sm-breakpoint) {
color: $color-text;
padding: 0 16px;
}
&__logo {
position: absolute;
z-index: $z-index-topbar + 2;
@include fluid-props(top, $fluid-min, $fluid-max, $header-padding-vertical-min, $header-padding-vertical-max);
@include fluid-props(width, $fluid-min, $fluid-max, 159px, 290px);
background-color: white;
@include media($sm-breakpoint) {
// padding-left: 16px;
}
}
&__side-element { // both for logo and subscribe + search
@include fluid-props(flex-basis, $fluid-min, $fluid-max, $header-side-elements-min-width, $header-side-elements-max-width);
flex-shrink: 0;
flex-grow: 1;
z-index: $z-index-topbar + 2;
background-color: white;
&--right { // subscribe + search block only
flex-shrink: 1;
display: flex;
align-items: center;
justify-content: flex-end;
position: relative;
right: 0;
@include media($sm-breakpoint) {
// padding-right: 16px;
}
}
&_content {
display: flex;
justify-content: flex-end;
align-items: center;
@include fluid-props(height, $fluid-min, $fluid-max, $header-search-button-min, $header-search-button-max);
}
}
&__subscribe {
@extend .u-t-line--30;
@include fluid-props(font-size, $sm-breakpoint, $fluid-max, 10px, 14px);
@include fluid-props(margin-right, $fluid-min, $fluid-max, $header-subscribe-horizontal-margin-min, $header-subscribe-horizontal-margin-max);
position: relative;
color: $color-text;
letter-spacing: 1px;
opacity: .87;
text-transform: uppercase;
transition: color 0.2s ease-out;
&::before { // thin light grey line, always visible
content: '';
bottom: 0;
position: absolute;
width: 100%;
border-bottom: solid 1px $color-secondary-darken;
}
&::after { // thicker red line, only visible on hover
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: block;
border-bottom: solid 2px $color-primary;
transform: scaleX(0);
transform-origin: 0% 50%;
transition: transform 150ms ease-in-out;
}
@include hover-behaviour {
&:after {
transform: scaleX(1);
}
}
}
&__search {
position: relative;
padding-top: 5px;
@include fluid-props(width height, $fluid-min, $fluid-max, $header-search-button-min, $header-search-button-max);
.a-icon {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
fill: $color-primary;
cursor: pointer;
transition:
fill $transition-fast ease-out,
opacity $transition-fast ease-out;
&:nth-of-type(1) {
opacity: 1;
transition-delay: $transition-fast;
}
&:nth-of-type(2) {
opacity: 0;
}
}
.is-search-open & {
.a-icon {
&:nth-of-type(1) {
opacity: 0;
transition-delay: 0s;
}
&:nth-of-type(2) {
opacity: 1;
transition-delay: $transition-fast;
}
}
}
@include hover-behaviour {
.a-icon {
fill: $color-primary-dark;
}
}
}
&.is-fixed {
position: fixed !important;
}
}
import BaseView from 'base-view';
const FIXED_STATE = 'is-fixed';
export default class Header extends BaseView {
bind() {
if ( !document.body.classList.contains( 'ads' ) || window.Modernizr.csspositionsticky) {
super.destroy();
return;
}
this.onScrollHandler = this.onScroll.bind( this );
window.addEventListener( 'scroll', this.onScrollHandler );
this.onScroll();
}
onScroll( ) {
const bBox = this.element.getBoundingClientRect();
if (this.element.parentElement.getBoundingClientRect().top <= 0 ) {
this.addClass( FIXED_STATE );
this.element.nextElementSibling.style.marginTop = `${bBox.height}px`;
}
else {
this.removeClass( FIXED_STATE );
this.element.nextElementSibling.style.marginTop = '';
}
}
destroy() {
if ( this.onScrollHandler ) {
window.removeEventListener( 'scroll', this.onScrollHandler );
}
super.destroy();
}
}
{
"search": true,
"search_url": "#",
"nav": {
"links": [
{
"name": "Accueil",
"current": true,
"url": "#",
"icon": {
"name": "home",
"title": "Accueil"
}
},
{
"name": "Reportages",
"url": "#",
"icon": {
"name": "article",
"title": "Reportages"
}
},
{
"name": "Portraits",
"url": "#",
"icon": {
"name": "portrait",
"title": "Portraits"
}
},
{
"name": "Vidéos",
"url": "#",
"icon": {
"name": "video",
"title": "Vidéos"
}
},
{
"name": "Photos",
"url": "#",
"icon": {
"name": "photo",
"title": "Photos"
}
}
]
}
}