From f9781740811c113a3a1ae5c63b1b830a9e8e68c4 Mon Sep 17 00:00:00 2001
From: kirillbodnar <91017699+kirillbodnar@users.noreply.github.com>
Date: Thu, 5 May 2022 18:54:13 +0300
Subject: [PATCH] create function for header markup

Function that renders markup when you click on "Home" and minor fixes in header
---
 src/index.js                     |  1 +
 src/js/appendhomeHeaderMarkup.js | 19 +++++++++++++++++++
 src/js/homeHeaderMarkup.js       | 28 ++++++++++++++++++++++++++++
 src/partials/header.html         |  2 +-
 src/sass/_header.scss            | 15 +++++++++------
 5 files changed, 58 insertions(+), 7 deletions(-)
 create mode 100644 src/js/appendhomeHeaderMarkup.js
 create mode 100644 src/js/homeHeaderMarkup.js

diff --git a/src/index.js b/src/index.js
index 9ba0492..b56167d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1 +1,2 @@
 import './sass/main.scss';
+import appendHomeHeaderMarkup from './js/appendhomeHeaderMarkup';
diff --git a/src/js/appendhomeHeaderMarkup.js b/src/js/appendhomeHeaderMarkup.js
new file mode 100644
index 0000000..ea065cb
--- /dev/null
+++ b/src/js/appendhomeHeaderMarkup.js
@@ -0,0 +1,19 @@
+import createHomeHeaderMarkup from './homeHeaderMarkup';
+
+const refs = {
+  nav: document.querySelector('nav'),
+  header: document.querySelector('header'),
+};
+
+refs.nav.addEventListener('click', appendHomeHeaderMarkup);
+
+function appendHomeHeaderMarkup(e) {
+  console.dir(e.target);
+  if (
+    e.target.innerText.toLowerCase() === 'home' ||
+    e.target.innerText.toLowerCase() === 'filmoteka'
+  ) {
+    refs.header.innerHTML = createHomeHeaderMarkup();
+  }
+}
+console.dir(refs.nav.classList);
diff --git a/src/js/homeHeaderMarkup.js b/src/js/homeHeaderMarkup.js
new file mode 100644
index 0000000..3767649
--- /dev/null
+++ b/src/js/homeHeaderMarkup.js
@@ -0,0 +1,28 @@
+export default function createHomeHeaderMarkup(img) {
+  return `<div class="container">
+    <nav>
+      <div class="nav__wrap">
+        <div class="logo">
+          <svg width="24px" height="24px" class="logo__icon">
+            <use xlink:href="/sprite.5ec50489.svg#logo"></use>
+          </svg>
+          <p class="logo__text">Filmoteka</p>
+        </div>
+        <ul class="nav__list list">
+          <li class="nav__item nav__item--current">Home</li>
+          <li class="nav__item">My library</li>
+        </ul>
+      </div>
+      <div class="search-field">
+        <span class="search-field__wrap">
+          <input class="search-field__input" placeholder="Поиск фильмов" />
+          <div class="search-field__icon--wrap">
+            <svg width="12px" height="12px" class="search-field__icon">
+              <use href="/sprite.5ec50489.svg#search"></use>
+            </svg>
+          </div>
+        </span>
+      </div>
+    </nav>
+  </div>`;
+}
diff --git a/src/partials/header.html b/src/partials/header.html
index dbc6085..c00b7d5 100644
--- a/src/partials/header.html
+++ b/src/partials/header.html
@@ -6,7 +6,7 @@
           <svg width="24px" height="24px" class="logo__icon">
             <use href="/images/sprite.svg#logo"></use>
           </svg>
-          <a href="index.html" class="logo__text link">Filmoteka</a>
+          <p href="index.html" class="logo__text">Filmoteka</p>
         </div>
         <ul class="nav__list list">
           <li class="nav__item nav__item--current">Home</li>
diff --git a/src/sass/_header.scss b/src/sass/_header.scss
index af4d942..7221b2a 100644
--- a/src/sass/_header.scss
+++ b/src/sass/_header.scss
@@ -2,7 +2,7 @@ header {
   background-image: linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)),
     url(../images/header-background.jpg);
 
-  height: 230px;
+  height: 216px;
   width: 100%;
   min-width: 320px;
 
@@ -31,7 +31,10 @@ header {
   letter-spacing: 0em;
   text-align: center;
 
-  color: white;
+  margin: 0;
+  padding: 0;
+
+  color: $primary-white-color;
   @media screen and (min-width: 768px) {
     display: inline-block;
   }
@@ -43,7 +46,7 @@ header {
   margin-top: 39px;
   align-items: center;
 
-  color: white;
+  color: $primary-white-color;
 }
 
 .nav__wrap {
@@ -74,7 +77,7 @@ header {
   width: 100%;
   height: 3px;
   position: absolute;
-  background-color: #ff6b08;
+  background-color: $accent-color;
 }
 
 .search-field {
@@ -91,7 +94,7 @@ header {
   line-height: 16px;
   letter-spacing: 0em;
   text-align: left;
-  color: white;
+  color: $primary-white-color;
 
   height: 20px;
   width: 280px;
@@ -117,7 +120,7 @@ header {
     line-height: 16px;
     letter-spacing: 0em;
     text-align: left;
-    color: white;
+    color: $primary-white-color;
   }
 }
 
-- 
GitLab