From 565e058dbe1be7893851228dd6d0939814da9ebe Mon Sep 17 00:00:00 2001
From: harshitmodi <hmodi9365@gmail.com>
Date: Sep 26 2018 22:29:08 +0000
Subject: adding hamburger menu for top navigation links


---

diff --git a/assets/css/custom.css b/assets/css/custom.css
index d2ef280..e14ae20 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -200,3 +200,100 @@ blockquote {
 .google:hover{
     background-color: #b72213;
 }
+
+.sidebar {
+    position: relative;
+}
+
+.sidebar .slide-modal {
+    display: block;
+    position: static;
+    opacity: 1;
+    overflow: auto;
+}
+
+.sidebar .slide-modal .close {
+    display: none;
+}
+
+.sidebar .toggle-btn {
+    text-decoration: none;
+    display: none;
+    position: absolute;
+    left: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.sidebar .toggle-btn img {
+    max-width: 20px;
+    max-height: 25px;
+}
+
+@media (max-width: 767px) {
+    .sidebar .toggle-btn {
+        display: inline;
+    }
+
+    aside {
+        margin: 0;
+    }
+
+    aside .sidebar {
+        padding: 15px;
+    }
+
+    aside .sidebar .logo {
+        max-height: 50px;
+        margin: 0;
+    } 
+
+    .sidebar .slide-modal {
+        animation: slideout .3s forwards;
+        background: white;
+        padding-top: 30px;
+        overflow-y: scroll;
+        position: fixed;
+        display: block;
+        opacity: 0;
+        z-index: -1;
+    }
+
+    .sidebar .slide-modal .close {
+        display: inline;
+        position: absolute;
+        right: 15px;
+        top: 10px;
+        font-family: sans-serif;
+        font-size: 26px;
+        font-weight: 200;
+    }
+
+    .sidebar .slide-modal.in {
+        opacity: 1;
+        z-index: 1050;
+        animation: slidein .3s forwards;
+    }
+
+    .sidebar .slide-modal a {
+        color: black;
+    }
+}
+
+@keyframes slidein {
+    0% {
+        left: -100%;
+    }
+    100% {
+        left: 0;
+    }
+}
+
+@keyframes slideout {
+    0% {
+        left: 0%;
+    }
+    100% {
+        left: -100%;
+    }
+}
diff --git a/assets/images/menu.svg b/assets/images/menu.svg
new file mode 100644
index 0000000..ee5ea18
--- /dev/null
+++ b/assets/images/menu.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px">
+<g>
+	<g>
+		<path d="M491.318,235.318H20.682C9.26,235.318,0,244.577,0,256s9.26,20.682,20.682,20.682h470.636    c11.423,0,20.682-9.259,20.682-20.682C512,244.578,502.741,235.318,491.318,235.318z" fill="#FFFFFF"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M491.318,78.439H20.682C9.26,78.439,0,87.699,0,99.121c0,11.422,9.26,20.682,20.682,20.682h470.636    c11.423,0,20.682-9.26,20.682-20.682C512,87.699,502.741,78.439,491.318,78.439z" fill="#FFFFFF"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M491.318,392.197H20.682C9.26,392.197,0,401.456,0,412.879s9.26,20.682,20.682,20.682h470.636    c11.423,0,20.682-9.259,20.682-20.682S502.741,392.197,491.318,392.197z" fill="#FFFFFF"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/templates/base.html b/templates/base.html
index 5f97d8e..96cec47 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -5,7 +5,7 @@
     <title>Open-source Happiness Packets</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
     <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
     <link href="{% static 'css/all.css' %}" rel="stylesheet">
     <link href="{% static 'css/datepicker.css' %}" rel="stylesheet">
@@ -24,8 +24,12 @@
     <aside>
         <div class="sidebar">
             {% url 'messaging:start' as url %}
+            <a data-toggle="modal" href="#mobile_slide_menu" class="toggle-btn">
+                <img src="{% static 'images/menu.svg' %}" alt="">
+            </a>
             <a href="{{ url }}"><img src="{% static 'images/logo.png' %}" alt="Open-Source Happiness Packets" class="logo"/></a>
-            <ul class="nav nav-stacked">
+            <ul class="nav nav-stacked modal slide-modal" id="mobile_slide_menu">
+                <button type="button" class="close" data-dismiss="modal">x</button>
                 {% url 'messaging:send' as url %}
                 <li role="presentation" {% if url in request.path %}class="active"{% endif %}><a href="{{ url }}">Send some happiness!</a></li>
                 {% url 'messaging:start' as url %}
@@ -89,5 +93,9 @@
             </small></footer>
         </div>
     </main>
+
+    <script type="text/javascript" src="{% static 'js/vendor/jquery-1.10.1.min.js' %}"></script>
+
+    <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.js' %}"></script>
 </body>
 </html>