header added

olgazh565 · Oct 23, 2023 · 678bcf5 · 678bcf5
1 parent f715732
commit 678bcf5
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 3 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -9,7 +9,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Мебельный маркет Koff</title>
 
-  <script type="module" crossorigin src="/assets/index-1217434a.js"></script>
+  <script type="module" crossorigin src="/assets/index-a30a51b7.js"></script>
   <link rel="stylesheet" href="/assets/index-ce13b653.css">
   <script type="module">import.meta.url;import("_").catch(()=>1);async function* g(){};if(location.protocol!="file:"){window.__vite_is_modern_browser=true}</script>
   <script type="module">!function(){if(window.__vite_is_modern_browser)return;console.warn("vite: loading legacy chunks, syntax error above and the same error below should be ignored");var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");n.src=e.src,n.onload=function(){System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))},document.body.appendChild(n)}();</script>
@@ -18,6 +18,6 @@
 
   <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
   <script nomodule crossorigin id="vite-legacy-polyfill" src="/assets/polyfills-legacy-d2ea4ff5.js"></script>
-  <script nomodule crossorigin id="vite-legacy-entry" data-src="/assets/index-legacy-bdddd8fb.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+  <script nomodule crossorigin id="vite-legacy-entry" data-src="/assets/index-legacy-4eb6cc90.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
 </body>
 </html>
diff --git a/features/likeSvg/likeSvg.js b/features/likeSvg/likeSvg.js
@@ -2,7 +2,7 @@ let like = null;
 
 export const likeSvg = async () => {
 	if (!like) {
-		const response = await fetch('/img/like.svg');
+		const response = await fetch('./img/like.svg');
 		const svg = await response.text();
 
 		like = new DOMParser()

diff --git a/modules/Header/Header.js b/modules/Header/Header.js
@@ -0,0 +1,117 @@
+import {Logo} from '../../features/Logo/Logo';
+import {likeSvg} from '../../features/likeSvg/likeSvg';
+import {router} from '../../main';
+import {addContainer} from '../addContainer';
+
+export class Header {
+	static instance = null;
+
+	constructor() {
+		if (!Header.instance) {
+			Header.instance = this;
+
+			this.element = document.createElement('header');
+			this.element.classList.add('header');
+			this.containerElement = addContainer(this.element, 'header__container');
+			this.isMounted = false;
+		}
+		return Header.instance;
+	}
+
+	mount() {
+		if (this.isMounted) return;
+
+		const logo = new Logo('header').create();
+		const searchForm = this.getSearchForm();
+		const navigation = this.getNavigation();
+		this.changeCount();
+
+		this.containerElement.append(logo, searchForm, navigation);
+
+		document.body.append(this.element);
+		this.isMounted = true;
+	}
+
+	unmount() {
+		this.element.remove();
+		this.isMounted = false;
+	}
+
+	getSearchForm() {
+		const searchForm = document.createElement('form');
+		searchForm.classList.add('header__search');
+		searchForm.method = 'get';
+
+		searchForm.innerHTML = `
+      <input type="search" class="header__input" placeholder="Введите запрос"
+				name="search">
+      <button type="submit" class="header__btn">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M7.66665 13.9999C11.1644 13.9999 14 11.1644 14 7.66659C14 4.16878 11.1644 1.33325 7.66665 1.33325C4.16884 1.33325 1.33331 4.16878 1.33331 7.66659C1.33331 11.1644 4.16884 13.9999 7.66665 13.9999Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+              <path d="M14.6666 14.6666L13.3333 13.3333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+      </button>
+    `;
+
+		searchForm.addEventListener('submit', (e) => {
+			e.preventDefault();
+			const search = searchForm.search.value.trim();
+			if (!search) return;
+			searchForm.reset();
+			router.navigate(`/search?q=${search}`);
+		});
+
+		return searchForm;
+	}
+
+	getNavigation() {
+		const navigation = document.createElement('nav');
+		navigation.classList.add('header__control');
+
+		const favoriteLink = document.createElement('a');
+		favoriteLink.classList.add('header__link');
+		favoriteLink.href = '/favorite';
+
+		const favoriteText = document.createElement('p');
+		favoriteText.classList.add('header__link-text');
+		favoriteText.textContent = 'Избранное';
+
+		favoriteLink.prepend(favoriteText);
+
+		likeSvg().then(svg => {
+			favoriteLink.append(svg);
+		});
+
+		const cartLink = document.createElement('a');
+		cartLink.classList.add('header__link');
+		cartLink.href = '/cart';
+
+		const cartText = document.createElement('span');
+		cartText.classList.add('header__link-text');
+		cartText.textContent = 'Корзина';
+
+		const countElement = document.createElement('span');
+		countElement.classList.add('header__count');
+		countElement.textContent = '(0)';
+
+		cartLink.append(cartText, countElement);
+		cartLink.insertAdjacentHTML('beforeend', `
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M5.87336 1.33325L3.46002 3.75325" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M10.1266 1.33325L12.54 3.75325" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+          <path d="M1.33331 5.23324C1.33331 3.9999 1.99331 3.8999 2.81331 3.8999H13.1866C14.0066 3.8999 14.6666 3.9999 14.6666 5.23324C14.6666 6.66657 14.0066 6.56657 13.1866 6.56657H2.81331C1.99331 6.56657 1.33331 6.66657 1.33331 5.23324Z" stroke="currentColor"/>
+          <path class="svg-white" d="M6.50665 9.33325V11.6999" stroke="currentColor" stroke-linecap="round"/>
+          <path class="svg-white" d="M9.5733 9.33325V11.6999" stroke="currentColor" stroke-linecap="round"/>
+          <path d="M2.33331 6.66675L3.27331 12.4267C3.48665 13.7201 3.99998 14.6667 5.90665 14.6667H9.92665C12 14.6667 12.3066 13.7601 12.5466 12.5067L13.6666 6.66675" stroke="currentColor" stroke-linecap="round"/>
+      </svg>
+		`);
+		navigation.append(favoriteLink, cartLink);
+
+		this.countElement = countElement;
+		return navigation;
+	}
+
+	changeCount(count) {
+		this.countElement.textContent = count ? `(${count})` : '(0)';
+	}
+}