<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>
  • Content:
    /*
     * 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;
    	}
    }
    
  • URL: /components/raw/o-header/_o-header.scss
  • Filesystem Path: src/components/organisms/o-header/_o-header.scss
  • Size: 4.3 KB
  • Content:
    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();
    	}
    }
    
  • URL: /components/raw/o-header/o-header.js
  • Filesystem Path: src/components/organisms/o-header/o-header.js
  • Size: 890 Bytes
{
  "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"
        }
      }
    ]
  }
}

CHANGELOG


v1.0.0 - 12/06/2018

  • Add attribute data-header for JS hook for Sticky IE polyfill #ab63fd73

v0.9.0 - 03/05/2018

  • Make search bar optional in header #39053877