From 831effc7811b288ba38d7dc4ad4cb44d73a6b7aa Mon Sep 17 00:00:00 2001
From: Matthew Wong <matthewwong525@gmail.com>
Date: Thu, 5 May 2022 01:03:27 -0400
Subject: [PATCH] add collapsible header in mobile view

---
 assets/styles/header.scss    | 29 +++++++++++++++++++++++++----
 layouts/partials/header.html | 21 ++++++++++++++++++---
 2 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/assets/styles/header.scss b/assets/styles/header.scss
index 8d40c2835..b706cb43d 100644
--- a/assets/styles/header.scss
+++ b/assets/styles/header.scss
@@ -22,7 +22,7 @@
     padding-right: 0px;
     // padding: 0px;
   }
-  
+
   /* Change the background color on mouse-over */
   .header a:hover {
     background-color: #ddd;
@@ -39,15 +39,36 @@
   .header-right {
     float: right;
   }
+
+  /* Hide the link that should open and close the topnav on small screens */
+.header .menu {
+  display: none;
+  font-size: 1.5em;
+}
+
+/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
+@media screen and (max-width: 600px) {
+  .header-right a {display: none;}
+  .header a.menu {
+    float: left;
+    display: block;
+  }
+}
   
   /* 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 {
+    .header.responsive {position: relative;}
+    .header.responsive a.menu {
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+    .header.responsive a {
       float: none;
       display: block;
-      text-align: left;
+      text-align: center;
     }
-    .header-right {
+    .header-right.responsive {
       float: none;
     }
   }
\ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 65dc9332b..093a6f082 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,8 +1,9 @@
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <header>
-    <div class="header">
+    <div id="myTopnav" class="header">
+        <a href="javascript:void(0);" class="menu" onclick="myFunction()"><i class="fa fa-bars"></i></a>
         <a href="/" class="logo">Fleeting Notes</a>
-        <div class="header-right">
+        <div id="headerRight" class="header-right">
         <a href="/download">Downloads</a>
         <a href="/pricing">Pricing</a>
         <a href="/posts">Blog</a>
@@ -14,4 +15,18 @@
             <i class="fa fa-sun-o" id="darkmode-icon" for="darkmode-toggle" tabindex="-1"></i>
         </a>
     </div>
-</header>
\ No newline at end of file
+</header>
+<script>
+    /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
+function myFunction() {
+    var x = document.getElementById("myTopnav");
+    var y = document.getElementById("headerRight")
+    if (x.className === "header") {
+        x.className += " responsive";
+        y.className += " responsive"
+    } else {
+        x.className = "header";
+        y.className = "header-right";
+    }
+}
+</script>
\ No newline at end of file