update header to be responsive

assets/js/darkmode.js

@@ -6,24 +6,32 @@ if (currentTheme) {
 }
 
 const switchTheme = (e) => {
-  if (e.target.checked) {
+  if (e.checked) {
     document.documentElement.setAttribute('saved-theme', 'dark')
     localStorage.setItem('theme', 'dark')
+    document.querySelector('#darkmode-icon').setAttribute('class', 'fa fa-moon-o')
   }
   else {
     document.documentElement.setAttribute('saved-theme', 'light')
     localStorage.setItem('theme', 'light')
+    document.querySelector('#darkmode-icon').setAttribute('class', 'fa fa-sun-o')
   }
 }
 
 window.addEventListener('DOMContentLoaded', () => {
   // Darkmode toggle
   const toggleSwitch = document.querySelector('#darkmode-toggle')
+  const dmSwitch = document.querySelector('#darkmode-switch')
 
   // listen for toggle
-  toggleSwitch.addEventListener('change', switchTheme, false)
+  dmSwitch.addEventListener('click', (e) => {
+    toggleSwitch.checked = !toggleSwitch.checked;
+    switchTheme(toggleSwitch);
+  }, false);
+
 
   if (currentTheme === 'dark') {
     toggleSwitch.checked = true
+    document.querySelector('#darkmode-icon').setAttribute('class', 'fa fa-moon-o')
   }
 })

assets/styles/darkmode.scss

@@ -1,8 +1,8 @@
 .darkmode {
-  float: right;
+  // float: right;
   padding: 1em;
   min-width: 30px;
-  position: relative;
+  // position: relative;
 
   @media all and (max-width: 450px) {
     padding: 1em;

assets/styles/header.scss

@@ -0,0 +1,53 @@
+.header {
+    overflow: hidden;
+    width: 100%;
+  }
+  
+  /* Style the header links */
+  .header a {
+    float: left;
+    text-align: center;
+    padding: 12px;
+    text-decoration: none;
+    font-size: 14px;
+    line-height: 25px;
+    border-radius: 4px;
+  }
+  
+  /* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
+  .header a.logo {
+    font-size: 2em;
+    font-weight: bold;
+    padding-left: 0px;
+    padding-right: 0px;
+    // padding: 0px;
+  }
+  
+  /* Change the background color on mouse-over */
+  .header a:hover {
+    background-color: #ddd;
+    color: black;
+  }
+  
+  /* Style the active/current link*/
+  .header a.active {
+    background-color: dodgerblue;
+    color: white;
+  }
+  
+  /* Float the link section to the right */
+  .header-right {
+    float: right;
+  }
+  
+  /* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
+  @media screen and (max-width: 600px) {
+    .header a {
+      float: none;
+      display: block;
+      text-align: left;
+    }
+    .header-right {
+      float: none;
+    }
+  }

layouts/partials/header.html

@@ -1,11 +1,17 @@
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <header>
-    <h2 id="page-title" display="inline"><a href="/">Fleeting Notes</a></h2>
-    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-    <h3 id="page-title" display="inline"><a href="/download" style="font-weight: normal;">Download</a></h3>
-    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-    <h3 id="page-title" display="inline"><a href="/posts" style="font-weight: normal;">Blog</a></h3>
-    &nbsp;&nbsp;&nbsp;
-    <svg tabindex="0" id="search-icon" aria-labelledby="title desc" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"><title id="title">Search Icon</title><desc id="desc">Icon to open search</desc><g class="search-path" fill="none"><path stroke-linecap="square" d="M18.5 18.3l-5.4-5.4"/><circle cx="8" cy="8" r="7"/></g></svg>
-    <div class="spacer"></div>
-    {{partial "darkmode.html" .}}
+    <div class="header">
+        <a href="/" class="logo">Fleeting Notes</a>
+        <div class="header-right">
+        <a href="/download">Downloads</a>
+        <a href="/">Pricing</a>
+        <a href="/posts">Blog</a>
+        <a href="javascript:void(0);" id="search-icon">
+            <i class="fa fa-search"></i>
+        </a>
+        <a href="javascript:void(0);" id="darkmode-switch">
+            <input class='toggle' id='darkmode-toggle' type='checkbox' tabindex="-1" hidden>
+            <i class="fa fa-sun-o" id="darkmode-icon" for="darkmode-toggle" tabindex="-1"></i>
+        </a>
+    </div>
 </header>