Added Hamburger menu for Mobile views

3 files changed, 60 insertions, 21 deletions

diff --git a/static/css/main.css b/static/css/main.css
index cf534be3..a524db34 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -149,6 +149,10 @@ nav > ul > li {
     margin-top: 0;
 }
 
+.hamburger {
+    display: none;
+}
+
 /* Optimize for phones */
 @media only screen and (max-width: 480px) {
     body {
@@ -158,4 +162,28 @@ nav > ul > li {
     .account {
         flex-direction: column;
     }
+
+    .sidebar {
+        min-width: calc(100vw - 42px)
+    }
+
+    .hamburger {
+        display: block;
+        position: absolute;
+        right: 20px;
+    }
+    .title > img {
+        position: relative;
+        left: -5.9rem;
+        top: -3px;
+    }
+
+    .lgn-area {
+        display: none;
+    }
+
+    .lgn-area-open {
+        display: block;
+    }
+
 }
diff --git a/static/images/icons/notepad_file-2.png b/static/images/icons/notepad_file-2.png
new file mode 100644
index 00000000..6e8cb4d7
--- /dev/null
+++ b/static/images/icons/notepad_file-2.png
diff --git a/templates/blog/partials/sidebar.html b/templates/blog/partials/sidebar.html
index 82a0b62f..faa846bf 100644
--- a/templates/blog/partials/sidebar.html
+++ b/templates/blog/partials/sidebar.html
@@ -1,9 +1,13 @@
 {% load static %}
 <div class="sidebar">
+    {% comment %} Hamburger Icon {% endcomment %}
+    <img class="hamburger" src="{% static 'images/icons/notepad_file-2.png' %}" alt="Hamburger Icon" class="hamburger-icon">
+
     <a href="/" class="title">
         <img src="{% static 'images/logo.png' %}" alt="That Computer Scientist Logo" width="10rem" height="3.23rem">
     <!-- Login Box -->
     </a>
+    <div class="lgn-area">
         {% if user.is_authenticated %}
         <div class="login-box">
             <p>Welcome, {{ user.username }}!</p>
@@ -36,27 +40,28 @@
             {% endfor %}
         </fieldset>
         {% endif %}
-    <br>
-    <fieldset>
-        <legend>Navigation</legend>
-        <nav>
-            <ul>
-                <li><a href="/">Home</a></li>
-                <li><a href="/about">About</a></li>
-                <li><a href="/contact">Contact</a></li>
-                <li><a href="/blog">Blog</a></li>
-                {% if user.is_authenticated %}
-                    <li><a href="{% url 'account' %}">My Account</a></li>
-                    {% comment %} <li><a href="{% url 'homepage' %}">My Homepage<a></li> {% endcomment %}
-                {% else %}
-                    <li><a href="/register">Register</a></li>
-                {% endif %}
-                {% if user.is_superuser %}
-                <li><a href="/admin">Administration</a></li>
-                {% endif %}
-            </ul>
-        </nav>
-    </fieldset>
+        <br>
+        <fieldset>
+            <legend>Navigation</legend>
+            <nav>
+                <ul>
+                    <li><a href="/">Home</a></li>
+                    <li><a href="/about">About</a></li>
+                    <li><a href="/contact">Contact</a></li>
+                    <li><a href="/blog">Blog</a></li>
+                    {% if user.is_authenticated %}
+                        <li><a href="{% url 'account' %}">My Account</a></li>
+                        {% comment %} <li><a href="{% url 'homepage' %}">My Homepage<a></li> {% endcomment %}
+                    {% else %}
+                        <li><a href="/register">Register</a></li>
+                    {% endif %}
+                    {% if user.is_superuser %}
+                    <li><a href="/admin">Administration</a></li>
+                    {% endif %}
+                </ul>
+            </nav>
+        </fieldset>
+    </div>
 </div>
 
 <script>
@@ -68,4 +73,10 @@
             input.value = username;
         });
     }
+
+    const hamburger = document.querySelector('.hamburger');
+    hamburger.addEventListener('click', function() {
+        const lgn_area = document.querySelector('.lgn-area');
+        lgn_area.classList.toggle('lgn-area-open');
+    });
 </script>