103 lines
4.8 KiB
JavaScript
103 lines
4.8 KiB
JavaScript
const addHeader = (
|
|
{ document },
|
|
title = 'Awesome Design Tools',
|
|
logo,
|
|
nav,
|
|
isTool = false,
|
|
isPlugin = false,
|
|
isKit = false
|
|
) => {
|
|
const header = document.querySelector('.header-top');
|
|
header.classList.add('header-top--hide-banner');
|
|
const { loop } = nav;
|
|
|
|
const defineProductName = () =>
|
|
(isTool && `Awesome Design Tools`) ||
|
|
(isPlugin && `Awesome Design Plugins`) ||
|
|
(isKit && `Awesome Design Kits`);
|
|
|
|
header.innerHTML = `
|
|
<div class="banner-top banner-abstract">
|
|
<header>
|
|
<div class="abstract-logo"></div>
|
|
<a href="http://flawlessapp.io/designtools/joinsabstract" class="banner__text">
|
|
${defineProductName()} as a part of Flawless App family joins Abstract!
|
|
</a>
|
|
</header>
|
|
<footer class="banner__close-wrapper">
|
|
<button class="banner__close">Close Banner</button>
|
|
</footer>
|
|
</div>
|
|
<div class="header-inner">
|
|
<div class="logo">
|
|
<div class="logo__asset ${logo}"></div>
|
|
<div class="logo__title">${title}</div>
|
|
</div>
|
|
<nav class="header-top__nav">${loop
|
|
.map(
|
|
item => `
|
|
<a
|
|
href=${item.href}
|
|
class="header-top__nav-item ${item.className} ${
|
|
item.isActive ? '-open -active' : ''
|
|
}"
|
|
>
|
|
<span>${item.title}</span>
|
|
</a>
|
|
`
|
|
)
|
|
.join(' ')}
|
|
</nav>
|
|
${
|
|
isTool
|
|
? `
|
|
<input type="text" placeholder="Search for tool…" class="header-top__input-search js-search-input">
|
|
`
|
|
: ``
|
|
}
|
|
${
|
|
isPlugin
|
|
? `
|
|
<div class="header-top__view-setup">
|
|
<input type="text" placeholder="Search for plugin…" class="header-top__input-search js-search-input">
|
|
<button type="button" class="header-top__sort-tool-btn js-open-modal-filter -mint">Filter</button>
|
|
<div class="header-top__sort-tool-modal sort-tool-modal -hidden">
|
|
<h5 class="sort-tool-modal__title">Show plugins for:</h5>
|
|
<form class="sort-tool-modal__nav">
|
|
<button type="button" class="sort-tool-modal__btn-choose -sketch label--sketch -active" app="sketch">Sketch</button>
|
|
<button type="button" class="sort-tool-modal__btn-choose -figma label--figma -active" app="figma">Figma</button>
|
|
<button type="button" class="sort-tool-modal__btn-choose -xd label--xd -active" app="xd">Adobe XD</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
`
|
|
: ``
|
|
}
|
|
${
|
|
isKit
|
|
? `
|
|
<div class="header-top__view-setup">
|
|
<input type="text" placeholder="Search for plugin…" class="header-top__input-search js-search-input">
|
|
<button type="button" class="header-top__sort-tool-btn js-open-modal-filter -violet">Filter</button>
|
|
<div class="header-top__sort-tool-modal sort-tool-modal -hidden">
|
|
<h5 class="sort-tool-modal__title">Show plugins for:</h5>
|
|
<form class="sort-tool-modal__nav">
|
|
<button type="button" class="sort-tool-modal__btn-choose -sketch label--sketch -active" app="sketch">Sketch</button>
|
|
<button type="button" class="sort-tool-modal__btn-choose -figma label--figma -active" app="figma">Figma</button>
|
|
<button type="button" class="sort-tool-modal__btn-choose -xd label--xd -active" app="xd">Adobe XD</button>
|
|
<button type="button" class="sort-tool-modal__btn-choose -photoshop label--photoshop -active" app="photoshop">Photoshop</button>
|
|
<button type="button" class="sort-tool-modal__btn-choose -mobile label--mobile -active" app="mobile">Mobile</button>
|
|
<button type="button" class="sort-tool-modal__btn-choose -desktop label--desktop -active" app="desktop">Desktop</button>
|
|
<button type="button" class="sort-tool-modal__btn-choose -web label--web -active" app="web">Web</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
`
|
|
: ``
|
|
}
|
|
</div>
|
|
`;
|
|
};
|
|
|
|
module.exports = addHeader;
|