Рефакторинг демки

doka-guide · Aug 6, 2024 · 01bd300 · 01bd300
1 parent c8989b4
commit 01bd300
Showing 1 changed file with 11 additions and 12 deletions.
diff --git a/css/mobile-first-vs-desktop-first/demos/adaptive-navbar/index.html b/css/mobile-first-vs-desktop-first/demos/adaptive-navbar/index.html
@@ -2,7 +2,7 @@
 <html lang="ru">
 
 <head>
-  <title>Адаптивная верстка - Mobile-first vs Desktop-first - Дока</title>
+  <title>Адаптивная вёрстка - Mobile-first vs Desktop-first - Дока</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -51,11 +51,11 @@
       padding: 8px;
     }
 
-    .toggle-icon {
+    .burger-icon {
       cursor: pointer;
     }
 
-    .toggle-icon:hover,
+    .burger-icon:hover,
     a:hover {
       opacity: .5;
       transition: opacity 100ms ease-in-out;
@@ -95,12 +95,12 @@
 
     #flex-direction,
     #current-screen-width,
-    #toggle-icon {
+    #burger-icon {
       text-decoration: underline;
     }
 
     @media (width >=640px) {
-      .toggle-icon {
+      .burger-icon {
         display: none;
       }
 
@@ -115,7 +115,7 @@
 <body>
   <header>
     <nav class="navbar">
-      <i class="fa fa-bars toggle-icon" onclick="handleClick(this)"></i>
+      <i class="fa fa-bars burger-icon" onclick="handleClick(this)"></i>
       <ul class="navbar__links_list">
         <li>
           <a href="#" class="link_active">Интересные факты</a>
@@ -154,20 +154,19 @@ <h3>Текущая ширина экрана:
 
       <br />
 
-      <div>.toggle-icon {</div>
+      <div>.burger-icon {</div>
       <div>&nbsp;&nbsp; display:
-        <span id="toggle-icon"></span>;
+        <span id="burger-icon"></span>;
       </div>
       <div>}</div>
     </div>
   </main>
 
   <script>
-    const toggleIcon = document.querySelector('i');
     const linksList = document.querySelector('ul');
     const flexDirection = document.getElementById('flex-direction');
     const screenWidth = document.getElementById('current-screen-width');
-    const toggleIconStyle = document.getElementById('toggle-icon')
+    const burgerIconStyle = document.getElementById('burger-icon')
 
     let isOpen = false;
 
@@ -182,11 +181,11 @@ <h3>Текущая ширина экрана:
         linksList.classList.remove('navbar__links_list_hidden')
         linksList.classList.add('navbar__links_list_showed')
         flexDirection.innerText = 'row'
-        toggleIconStyle.innerText = 'none'
+        burgerIconStyle.innerText = 'none'
 
       } else {
         flexDirection.innerText = 'column'
-        toggleIconStyle.innerText = 'inherit'
+        burgerIconStyle.innerText = 'initial'
 
         if (!isOpen) {
           linksList.classList.remove('navbar__links_list_showed')