From afd57af52531435ba50669f11f35c91628a2dc4b Mon Sep 17 00:00:00 2001
From: RushilSidhu <49910626+RushilSidhu@users.noreply.github.com>
Date: Fri, 3 Jul 2020 13:08:07 -0400
Subject: [PATCH] Login Sidebar

---
 css/styles.css | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html     |  7 ++++++-
 js/main.js     |  9 +++++++++
 3 files changed, 65 insertions(+), 1 deletion(-)

diff --git a/css/styles.css b/css/styles.css
index 919a3e2..7589859 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -205,3 +205,53 @@ p {
     transform: translateY(20px); } }
 
 /*# sourceMappingURL=styles.css.map */
+
+/* The side navigation menu */
+.sidenav {
+ height: 100%; /* 100% Full-height */
+ width: 0; /* 0 width - change this with JavaScript */
+ position: fixed; /* Stay in place */
+ z-index: 1; /* Stay on top */
+ top: 0; /* Stay at the top */
+ right: 0;
+ background-color: #111; /* Black*/
+ overflow-x: hidden; /* Disable horizontal scroll */
+ padding-top: 60px; /* Place content 60px from the top */
+ transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
+}
+
+/* The navigation menu links */
+.sidenav a {
+ padding: 8px 8px 8px 32px;
+ text-decoration: none;
+ font-size: 25px;
+ color: #818181;
+ display: block;
+ transition: 0.3s;
+}
+
+/* When you mouse over the navigation links, change their color */
+.sidenav a:hover {
+ color: #f1f1f1;
+}
+
+/* Position and style the close button (top right corner) */
+.sidenav .closebtn {
+ position: absolute;
+ top: 0;
+ right: 25px;
+ font-size: 36px;
+ margin-left: 50px;
+}
+
+/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
+#main {
+ transition: margin-left .5s;
+ padding: 20px;
+}
+
+/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
+@media screen and (max-height: 450px) {
+ .sidenav {padding-top: 15px;}
+ .sidenav a {font-size: 18px;}
+}
diff --git a/index.html b/index.html
index 313ee0a..69dcdb1 100644
--- a/index.html
+++ b/index.html
@@ -38,7 +38,12 @@
           <li><a href="company.html">Companies</a></li>
           <li><a href="influencer.html">Influencers</a></li>
           <li><a href=".sec01">Get Started</a></li>
-          <li><a href="login.html">Log In</a></li>
+          <div id="mySidenav" class="sidenav">
+           <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
+         </div>
+
+         <!-- Use any element to open the sidenav -->
+         <li><a span onclick="openNav()">Login</a span><li>
         </ul>
       </nav>
     </div>
diff --git a/js/main.js b/js/main.js
index 82464ba..f9c91cb 100644
--- a/js/main.js
+++ b/js/main.js
@@ -28,3 +28,12 @@ $(document).ready(function() {
       event.preventDefault();
   });
 });
+/* Set the width of the side navigation to 250px */
+function openNav() {
+  document.getElementById("mySidenav").style.width = "20%";
+}
+
+/* Set the width of the side navigation to 0 */
+function closeNav() {
+  document.getElementById("mySidenav").style.width = "0";
+}