fixes

some fixes

src/js/theme-switcher.js

@@ -4,6 +4,9 @@ const body = document.querySelector('body');
 const footer = document.querySelector('footer');
 const footerText = document.querySelector('.footer_text');
 const filmInfo = document.querySelector('.film-info__overlay');
+const switcher = document.querySelector('.switcher');
+const navLib = document.getElementById('library');
+const home = document.getElementById('home');
 
 checkbox.addEventListener('change', onDarkTheme);
 
@@ -12,4 +15,16 @@ function onDarkTheme() {
   footer.classList.toggle('dark');
   footerText.classList.toggle('dark');
   filmInfo.classList.toggle('dark-modal');
-}
\ No newline at end of file
+}
+
+navLib.addEventListener('click', () => {
+  if (navLib) {
+    switcher.classList.add('visually-hidden');
+  }
+});
+
+home.addEventListener('click', () => {
+  if (home) {
+    switcher.classList.remove('visually-hidden');
+  }
+});

src/partials/header.html

@@ -9,22 +9,15 @@
           <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>
+          <li class="nav__item nav__item--current" id="home">Home</li>
+          <li class="nav__item" id="library">My library</li>
         </ul>
       </div>
     </nav>
     <div class="search-field" data-action="search-field">
       <form class="search-field__form">
-        <input
-          class="search-field__input"
-          placeholder="Поиск фильмов"
-          type="text"
-          name="search"
-          id="search"
-          autocomplete="off"
-          data-action="search-input"
-        />
+        <input class="search-field__input" placeholder="Поиск фильмов" type="text" name="search" id="search"
+          autocomplete="off" data-action="search-input" />
         <button class="search-field__btn" data-action="search-btn" type="submit">
           <svg width="12px" height="12px" class="search-field__icon">
             <use href="/images/sprite.svg#search"></use>
@@ -50,4 +43,4 @@
       </label>
     </div>
   </div>
-</header>
+</header>
\ No newline at end of file

src/sass/_header.scss

@@ -55,6 +55,18 @@
 
 .logo__icon {
   justify-self: middle;
+  animation: scroll 3s infinite;
+}
+@keyframes scroll {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-0.3rem);
+  }
+  100% {
+    transform: translateY(0);
+  }
 }
 
 .logo__text {

src/sass/_theme-switcher.scss

 .dark {
-    background-color: rgb(31, 33, 37);
-    color: #CDCDD2;
+  background-color: rgb(31, 33, 37);
+  color: #cdcdd2;
 
-    :link {
-        color: white;
-
-    }
+  :link {
+    color: white;
+  }
 }
 
-
 .label {
-    background-color: #555;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    position: relative;
-    padding: 5px;
-    border-radius: 50px;
-    width: 50px;
-    height: 26px;
+  background-color: #555;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  padding: 5px;
+  border-radius: 50px;
+  width: 50px;
+  height: 26px;
 }
 
 .switcher {
-
-
-    display: flex;
-
-    flex-direction: row-reverse;
-
+  @media screen and (max-width: 420px) {
+    display: none;
+  }
+  display: flex;
+  flex-direction: row-reverse;
 }
 
 .checkbox {
-    opacity: 0;
-    position: absolute;
+  opacity: 0;
+  position: absolute;
 }
 
-
-
 .ball {
-    width: 22px;
-    height: 22px;
-    background-color: #fff;
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    border-radius: 50%;
-    transition: transform 0.2s linear;
+  width: 22px;
+  height: 22px;
+  background-color: #fff;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  border-radius: 50%;
+  transition: transform 0.2s linear;
 }
 
-.checkbox:checked+.label .ball {
-    // background-color: #f39c12;
-    transform: translateX(24px);
+.checkbox:checked + .label .ball {
+  transform: translateX(24px);
 }
 
 .fa-moon {
-    color: #f1c40f;
+  color: #f1c40f;
 }
 
 .fa-sun {
-    color: #f39c12;
-}
\ No newline at end of file
+  color: #f39c12;
+}