fix: remove extra padding if lightAndDarkMode is false (#230)

Remove the extra "right-padding" inside the header search icon when lightAndDarkMode is false so UI is consistent. This is done by including <li> tag inside if statement
satnaing · Jan 12, 2024 · 742314e · 742314e
1 parent f525698
commit 742314e
Showing 1 changed file with 6 additions and 6 deletions.
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -89,9 +89,9 @@ const { activeNav } = Astro.props;
               <span class="sr-only">Search</span>
             </LinkButton>
           </li>
-          <li>
-            {
-              SITE.lightAndDarkMode && (
+          {
+            SITE.lightAndDarkMode && (
+              <li>
                 <button
                   id="theme-btn"
                   class="focus-outline"
@@ -106,9 +106,9 @@ const { activeNav } = Astro.props;
                     <path d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993 6.993 9.239 6.993 12zM12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007 8.993 13.658 8.993 12 10.342 8.993 12 8.993zM10.998 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2h-3zm17 0h3v2h-3zM4.219 18.363l2.12-2.122 1.415 1.414-2.12 2.122zM16.24 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.342 7.759 4.22 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z" />
                   </svg>
                 </button>
-              )
-            }
-          </li>
+              </li>
+            )
+          }
         </ul>
       </nav>
     </div>