Fractal Starter
Project version : 0.1.2

Transparent header 

<header class="main-header header--transparent">
    <div class="container">
        <div class="header__brand">
            <a href="/">
            <img src="../../images/brand/brand-white.svg" alt="" class="XXL Organisation brand" />
         </a>
        </div>

        <div class="header__nav js-nav-inside">
            <!--
          * The primary subnav can have two different states:
          *
          * 1) By default, the subnav appear on hover from the trigger link.
          *
          * 2) With the 'js-dropdown--onclick' on the ul.primary-nav,
          *		the subnav appear on click from the trigger link.
          *
         -->

            <nav class="main-nav">
                <ul class="nav-primary" data-ui-component="primary-main">
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="https://google.com" class="js-dropdown-link">About</a>

                        <ul class="nav-primary__sub-nav js-dropdown-menu">
                            <li><a href="#">Products</a></li>
                            <li><a href="#">Company</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                    <li>
                        <a href="#" class="js-dropdown-link">Services</a>

                        <ul class="nav-primary__sub-nav js-dropdown-menu">
                            <li><a href="#">Web</a></li>
                            <li><a href="#">Data</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>

        <div class="header__search header__tools">
            <button class="button button--search js-open-search">
            <i class="icon icon--search"></i>
            <span>Rechercher</span>
         </button>
        </div>

        <div class="header__devis header__tools">
            <a href="#" class="button button--devis">
            <i class="icon icon--devis"></i>
            <span>Finaliser mon devis</span>
         </a>

            <div class="block-cart" id="cartSummary">
                <ul class="lst__unstyled">
                    <li></li>
                    <li></li>
                    <li></li>

                    <span>et 7 autres produits...</span>
                </ul>

                <a href="#" class="button  button--rounded button--black button--full-width">Finaliser mon devis</a>

            </div>
        </div>

        <div class="header__button">
            <button class="button button--menu js-toggle-menu">
            <svg width="15" height="12" xmlns="http://www.w3.org/2000/svg" id="menu-icon">
               <defs>
                  <linearGradient x1=".615%" y1="50%" y2="50%" id="a">
                     <stop stop-color="#E3CB78" offset="0%"/>
                     <stop stop-color="#BDA450" offset="49.584%"/>
                     <stop stop-color="#A07C2A" offset="100%"/>
                  </linearGradient>
               </defs>
               
               <g fill="url(#a)" fill-rule="evenodd">
                  <rect id="bars-1" width="15" height="2" rx="1"/>
                  <rect id="bars-2" y="5" width="15" height="2" rx="1"/>
                  <rect id="bars-3" y="10" width="15" height="2" rx="1"/>
               </g>
            </svg>
            <span>Menu</span>
         </button>
        </div>
    </div>
</header>
 
<header class="main-header{{#if header_white}} header--white{{/if}}{{#if header_transparent}} header--transparent{{/if}}">
   <div class="container">
      <div class="header__brand">
         <a href="/">
         {{#if header_white}}
            <img src="{{path '/images/brand/brand-black.svg'}}" alt="{{brand.alt}}" class="XXL Organisation brand" />
         {{else}}
            <img src="{{path '/images/brand/brand-white.svg'}}" alt="{{brand.alt}}" class="XXL Organisation brand" />
         {{/if}}
         </a>
      </div>

      <div class="header__nav js-nav-inside">
         {{> @nav }}
      </div>

      <div class="header__search header__tools">
         <button class="button button--search js-open-search">
            <i class="icon icon--search"></i>
            <span>Rechercher</span>
         </button>
      </div>

      <div class="header__devis header__tools">
         <a href="#" class="button button--devis">
            <i class="icon icon--devis"></i>
            <span>Finaliser mon devis</span>
         </a>

         {{> @block-cart }}
         
      </div>

      <div class="header__button">
         <button class="button button--menu js-toggle-menu">
            <svg width="15" height="12" xmlns="http://www.w3.org/2000/svg" id="menu-icon">
               <defs>
                  <linearGradient x1=".615%" y1="50%" y2="50%" id="a">
                     <stop stop-color="#E3CB78" offset="0%"/>
                     <stop stop-color="#BDA450" offset="49.584%"/>
                     <stop stop-color="#A07C2A" offset="100%"/>
                  </linearGradient>
               </defs>
               
               <g fill="url(#a)" fill-rule="evenodd">
                  <rect id="bars-1" width="15" height="2" rx="1"/>
                  <rect id="bars-2" y="5" width="15" height="2" rx="1"/>
                  <rect id="bars-3" y="10" width="15" height="2" rx="1"/>
               </g>
            </svg>
            <span>Menu</span>
         </button>
      </div>
   </div>
</header>
 
{
  "header_transparent": true
}
  • Content: 
    header {
   position: relative;
   background: $c-background-dark;
   padding-bottom: $margin-s;
   padding-top: $margin-s;
   z-index: 40;
   
   @include mediaWQuery($media-query-l) {
      background: $c-background-gradient-dark;
   }

   // Fallback for unsupported grid browser
   & > .container > *[class^="header__"] {
      display: inline-block;
      vertical-align: middle;
   }

   // Grid layout
   .container {
      @supports (display: grid) {
         display: grid;

         align-items: center;

         grid-template-columns: auto 1fr auto;
         grid-template-rows: repeat(3, auto);
         grid-template-areas: 'brand search button'
                              'nav nav nav'
                              'devis devis devis';

         @include mediaWQuery($media-query-s) {

            grid-template-columns: 1fr auto auto auto;
            grid-template-rows: auto auto;
            grid-template-areas:  'brand search devis button'
                                  'nav nav nav nav';
         }

         @include mediaWQuery($media-query-m) {
            align-items: initial;

            grid-template-columns: auto 1fr auto;
            grid-template-rows: auto auto auto;
            grid-template-areas:  'brand search devis'
                                  'brand button button'
                                  'nav nav nav';
         }

         @include mediaWQuery($media-query-l) {
            grid-template-columns: auto 1fr auto auto;
            grid-template-rows: 1fr 2fr;
            grid-template-areas:  'brand . search devis'
                                  'brand nav nav nav';

            .header__button { display: none }
         }

         .header__brand { grid-area: brand }
         .header__nav { grid-area: nav }
         .header__search { grid-area: search }
         .header__devis { grid-area: devis }
         .header__button { grid-area: button }
      }
   }

   // Brand modifier
   .header__brand {
      font-size: 0;

      img {
         width: 100%;
         max-width: 110px;
         height: auto;

         @include mediaWQuery($media-query-m) { max-width: 150px }
         @include mediaWQuery($media-query-xl) { max-width: 180px }
      }
   }

   // Nav modifier
   .header__nav {
      nav {
         display: none;
         li a { color: $c-white; }

         @include mediaWQuery($media-query-l) {
            display: block;
            .nav-primary__sub-nav a { color: $c-black }
         }
      }

      @include mediaWQuery($media-query-l) {
         justify-self: flex-end;
         align-self: center;
      }
   }

   .header__tools {
      span {
         text-transform: uppercase;
         font-size: rem(18);
      }

      i { margin: -3px 5px 0 0; }
   }

   // Search modifier
   .header__search {
      justify-self: flex-end;
      @include mediaWQuery($media-query-m) {
         .button {
            padding-bottom: 0;
            padding-top: 0;
         }
      }

      @include mediaWQuery($media-query-l) {
         justify-self: center;
      }
   }

   // Devis modifier
   .header__devis {
      position: relative;
      .button--devis, .button--search {
         display: none;
         margin-top: $margin-m;

         @include mediaWQuery($media-query-m) {
            padding-bottom: 0;
            padding-top: 0;
         }
      }

      @include mediaWQuery($media-query-s) {
         padding-top: 0;

         .button {
            margin-top: 0;
            display: inline-block!important;
         }
      }

      @include mediaWQuery($media-query-m) {
         padding-bottom: 0;
         justify-self: center;
         padding: 0 0 0 $margin-l;
      }

      padding: 0;

      .block-cart {
         display: none;

         @include mediaWQuery($media-query-s) {
            position: absolute;
            min-width: 270px;
            right: 0;
            top: 80%;

            &::after {
               left: initial;
               right: 15px;
            }
         }

         @include mediaWQuery($media-query-m) {
            &::after {
               right: initial;
               left: 50%;
            }
         }
         
         @include mediaWQuery($media-query-xl) {
            right: initial;
            left: 50%;
            transform: translateX(-50%);
         }
      }
   }

   .header__button {
      justify-self: flex-end;
   }
   

   // Button modifier
   .button {
      font-family: $font-primary;
      font-size: 16px;
      padding: $margin-m $margin-s;

      &--search, &--devis {
         color: $c-button-header-black;
      }

      &--search {
         span { display: none }


         @include mediaWQuery($media-query-m) {
            span {
               display: inline-block;
            }
         }
      }

      &--menu {
         color: $c-white;
         font-size: 20px;
         text-transform: uppercase;
         line-height: 1;

         #menu-icon {

            #bars-1, #bars-3 {
               transform-origin: top left;
               -moz-transform-origin: top left;
               transition: .3s ease;
            }

            #bars-2 {
               transition: .3s ease;
            }

         }

         &.active {
            #bars-1 { transform: rotate(45deg) translate(2px, -2px) }
            #bars-2 { opacity: 0; transition: .3s ease; }
            #bars-3 { transform: rotate(-45deg) translate(-7px, -2px) }
         }

         i { margin-top: -4px }
      }

      &--devis {
         display: block;
         background: $c-button-gradient;
         color: $c-black;
         border-radius: $border-radius-s;
         background-size: auto 200%;

         @include mediaWQuery($media-query-s) {
            background: transparent;
            color: $c-button-header-black;
            span { display: none;}
         }

         @include mediaWQuery($media-query-m) {
            span { display: inline-block }
         }
      }
   }

   &.header--transparent {
      background: transparent;
      nav ul li a,
      .button--menu { color: $c-white }
   }

   &.header--white {
      background: transparent;

      .button--search { color: $c-button-header-white }
      nav ul li a,
      .button--menu { color: $c-black }
      @include mediaWQuery($media-query-s) {
         .button--devis { color: $c-button-header-white }
      }

      .icon--search {
         background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='far' data-icon='search' class='svg-inline--fa fa-search fa-w-16' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23A07C2A' d='M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z'/%3E%3C/svg%3E");
      }
   
      .icon--devis {
         background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fal' data-icon='question-circle' class='svg-inline--fa fa-question-circle fa-w-16' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23A07C2A' d='M256 340a28 28 0 100 56 28 28 0 000-56zm7.7-24h-16a12 12 0 01-12-12v-.4c0-70.3 77.4-63.6 77.4-107.4 0-20-17.8-40.2-57.4-40.2-29.2 0-44.3 9.6-59.2 28.7-4 5-11 6-16.3 2.4l-13.1-9.2a12 12 0 01-2.7-17.2c21.3-27.2 46.4-44.7 91.3-44.7 52.3 0 97.4 29.8 97.4 80.2 0 67.4-77.4 63.9-77.4 107.4v.4a12 12 0 01-12 12zM256 40a216 216 0 110 432 216 216 0 010-432m0-32a248 248 0 100 496 248 248 0 000-496z'/%3E%3C/svg%3E");
      }

      .icon--pencil {
         background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fal' data-icon='pen-alt' class='svg-inline--fa fa-pen-alt fa-w-16' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23A07C2A' d='M493.25 56.26l-37.51-37.51C443.24 6.25 426.86 0 410.49 0c-16.38 0-32.76 6.25-45.25 18.74l-67.88 67.88L274.74 64c-12.5-12.5-32.76-12.5-45.25 0L99.37 194.12c-3.12 3.12-3.12 8.19 0 11.31l11.31 11.31c3.12 3.12 8.19 3.12 11.31 0L252.1 86.63l22.62 22.62L93.95 290.03A327.038 327.038 0 0 0 .17 485.12l-.03.23C-1.45 499.72 9.88 512 23.95 512c5.73 0 111.06-6.99 198.03-93.95l271.28-271.28c24.99-25 24.99-65.52-.01-90.51zm-293.9 339.16c-45 45-103.93 74.41-166.1 83.39 9.13-62.64 38.5-121.32 83.34-166.16l180.77-180.77.01.01.01-.01 82.76 82.76-180.79 180.78zm271.28-271.28l-67.88 67.88-82.77-82.77 67.88-67.88c12.5-12.5 32.74-12.51 45.25 0l37.51 37.51c12.51 12.5 12.52 32.74.01 45.26z'/%3E%3C/svg%3E");
      }

      .js-dropdown-link::after {
         background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='chevron-down' class='svg-inline--fa fa-chevron-down fa-w-14' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E %3Cdefs%3E %3ClinearGradient id='FirstGradient' %3E %3Cstop offset='0%25'/%3E %3C/linearGradient%3E %3C/defs%3E %3Cpath fill='%23A07C2A' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'%3E%3C/path%3E %3C/svg%3E")!important;
      }
   }
}
  • URL: /components/raw/header/header.scss
  • Filesystem Path: components/06-components/20-header/header.scss
  • Size: 9.5 KB
  • Content: 
    const toggleThis = (el, trigger = false) => {
	var x = el;
	if (
		window.getComputedStyle(el, null).getPropertyValue("display") === "none"
	) {
		x.style.display = "block";
		if (trigger) trigger.classList.add("active");
	} else {
		x.style.display = "none";
		if (trigger) trigger.classList.remove("active");
	}
};

document.addEventListener("DOMContentLoaded", (LetsGO) => {
	let toggleMenu = document.getElementsByClassName("js-toggle-menu")[0];
	if (toggleMenu) {
		toggleMenu.addEventListener("click", (event) => {
			event.preventDefault();
			let menu = document.querySelector(".js-nav-inside > nav");

			if (menu) toggleThis(menu, toggleMenu);

			if (window.innerWidth < 480) {
				let buttonDevis = document.querySelector(".button--devis");
				if (buttonDevis) {
					toggleThis(buttonDevis);
				}
			}
		});
	}

	// Cart button
	if (window.innerWidth > 480) {
		var myCardProduct = JSON.parse(localStorage.getItem("myCart"));
		let toggleBlockCart = document.querySelector(".button--devis");

		if (toggleBlockCart) {
			toggleBlockCart.onclick = (event) => {
				if (myCardProduct && myCardProduct.productCount > 0) {
					event.preventDefault();
					let blockCart = document.querySelector(".block-cart");
					jQuery(blockCart).fadeToggle();
				}
			};
		}
	}

	const openModal = (el) => {
		let searchInput = el.querySelector('input[type="search"]');

		const targetElement = document.querySelector("body");
		// bodyScrollLock.disableBodyScroll(targetElement);

		console.log("openModal", el);

		modalSearch.style.opacity = "0";
		modalSearch.style.display = "block";
		modalSearch.style.transition = ".3s ease";
		setTimeout(() => {
			modalSearch.style.opacity = "1";
			searchInput.focus();
			searchInput.select();
		}, 10);
	};

	const closeModal = (el) => {
		modalSearch.style.opacity = "0";

		const targetElement = document.querySelector("body");
		// bodyScrollLock.enableBodyScroll(targetElement);

		setTimeout(() => (el.style.display = "none"), 310);
	};

	// Search trigger
	let searchTrigger = document.querySelectorAll(".js-open-search");
	let searchClose = document.querySelectorAll(".js-close-search");
	let modalSearch = document.querySelector("#modal-block-search");

	searchTrigger.forEach((trigger) => {
		trigger.addEventListener("click", (event) => {
			event.preventDefault();
			openModal(modalSearch);
		});
	});

	searchClose.forEach((trigger) => {
		trigger.addEventListener("click", (event) => {
			event.preventDefault();
			closeModal(modalSearch);
		});
	});

	document.addEventListener("keydown", (event) => {
		if (event.keyCode == 27) {
			closeModal(modalSearch);
		}
	});
});

// Si il existe des produits dans le panier, on mets à jour l'intitulé du bouton 'Demander un devis'
var myCardProduct = JSON.parse(localStorage.getItem("myCart"));

document.addEventListener("DOMContentLoaded", () => {
	let headerButtonDevis = document.querySelector(
			".main-header .button--devis"
		),
		buttonDevisIcon = headerButtonDevis.querySelector(".icon"),
		buttonDevisLabel = headerButtonDevis.querySelector("span"),
		cartSummary = document.querySelector("#cartTooltipSummary .button");

	if (myCardProduct && myCardProduct.productCount > 0) {
		buttonDevisIcon.classList.remove("icon--devis");
		buttonDevisIcon.classList.add("icon--pencil");

		buttonDevisLabel.innerHTML = "Finaliser mon devis";
		cartSummary.innerHTML = "Finaliser mon devis";
	}
});
  • URL: /components/raw/header/header.js
  • Filesystem Path: components/06-components/20-header/header.js
  • Size: 3.4 KB

There are no notes for this item.