Sidebar updates + fix

Zaffri · May 15, 2016 · 2128f4e · 2128f4e
1 parent 954929f
commit 2128f4e
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 152 deletions.
diff --git a/Jolt/css/sidebar.css b/Jolt/css/sidebar.css
@@ -1,7 +1,7 @@
 /* --------------------------------------------------------
-    Jolt Topbar CSS File
+    Jolt Sidebar CSS File
 
-    Version:    1.2.1
+    Version:    1.2.2
     Author:     Steven Morrison
 
     Website:    jolt.zaffri.com
@@ -36,8 +36,12 @@
     color: #fff;
 }
 
-#side-bar {
-    float: left;
+/* Mobile max WIDTH - sidebar 100% */
+@media (max-width: 375px) {
+    body #side-bar {
+        width: 100%;
+        left: -375px
+    }
 }
 
 #side-body {
@@ -54,6 +58,7 @@
     color: #a3a8a9;
     height: 100vh;
     padding-top: 100px;
+    z-index: 9999;
 }
 
 #side-bar h4 {

diff --git a/Jolt/css/sidebar.min.css b/Jolt/css/sidebar.min.css
diff --git a/Jolt/js/sidebar.js b/Jolt/js/sidebar.js
@@ -0,0 +1,24 @@
+/* --------------------------------------------------------
+    Jolt Sidebar JavaScript File
+
+    Version:    1.2.2
+    Author:     Steven Morrison
+
+    Website:    jolt.zaffri.com
+    GitHub:     github.com/Zaffri
+-------------------------------------------------------- */
+
+/* ---------------------------  [JavaScript link click - collapse menu] --------------------------- */
+if(document.querySelector(".on-nav-collapse")) {
+
+    // Get nav class
+    var nav = document.querySelector(".on-nav-collapse");
+    // Add event listener
+    nav.addEventListener("click", function(e) {
+
+        // Uncheck mobile check box
+        document.getElementById("mobile-checkbox").checked = false;
+        e.stopPropagation();
+
+    }, false);
+}
diff --git a/Jolt/js/sidebar.min.js b/Jolt/js/sidebar.min.js
diff --git a/Jolt/sidebar.css b/Jolt/sidebar.css
diff --git a/Jolt/test.html b/Jolt/test.html
diff --git a/README.md b/README.md
@@ -1,5 +1,6 @@
 # Jolt
 Front-end web development framework: HTML5 &amp; CSS3 by [*Zaffri*](http://www.zaffri.com/).
+The project is still a WIP!
 
 ---------------------------------------
 
@@ -22,18 +23,24 @@ Front-end web development framework: HTML5 &amp; CSS3 by [*Zaffri*](http://www.z
 	4.1.		Dyanmic scroll styles
     4.2.		Responsive navigation with mobile 'burger' toggle
     4.3.		JavaScript fallback for mobile toggle
+5. Sidebar component
+    5.1. Responsive Sidebar navigation with 'burger' toggle
+    5.2. JS nav collapse class
 
 ---------------------------------------
 
 ## Demos
-1.		demo-basic.html - Basic demo of vertical/horizontal alignment and Topbar component.
-2.  	demo-dropdowns.html - Basic demo of dropdown links (nested lists) within the Topbar component.
+
+1.		**Basic Topbar**: demo-basic.html - Basic demo of vertical/horizontal alignment and Topbar component.
+2.  	**Dropdowns Topbar**: demo-dropdowns.html - Basic demo of dropdown links (nested lists) within the Topbar component.
+3.      **Basic Sidebar**: demo-sidebar.html - Basic sidebar demo.
 
 ---------------------------------------
 
 ## Templates (Markup only)
-1.		"starter-template-1.html" - Basic structure for Jolt site with single level navigation using Topbar component.
-2.  	"starter-template-2.html" - Basic structure for Jolt site with dropdowns using Topbar component.
+1.		**Basic Topbar**: "starter-template-1.html" - Basic structure for Jolt site with single level navigation using Topbar component.
+2.      **Dropdowns Topbar**: "starter-template-2.html" - Basic structure for Jolt site with dropdowns using Topbar component.
+3.      **Basic Sidebar**: "starter-template-3.html" - Basic structure for Jolt sidebar component.
 
 ---------------------------------------
 

diff --git a/Release-notes.txt b/Release-notes.txt
@@ -1,4 +1,11 @@
 
+---- Jolt 1.2.2 ----
+
+    Update: Sidebar full width on small mobiles
+    Update: Sidebar collapse event handler class (on link click)
+    Fix: Sidebar Z-index added
+
+
 ---- Jolt 1.2.1 ----
 
     Fix: Sidebar now fixed position when body > viewport height.

diff --git a/demos/demo-sidebar.html b/demos/demo-sidebar.html
@@ -28,7 +28,7 @@
     <aside id="side-bar" >
             <h4>MENU</h4>
 
-            <ul id="main-nav">
+            <ul id="main-nav" class="on-nav-collapse">
                 <li><a href="#" class="active">home</a></li
                 ><li><a href="#">about</a></li
                 ><li><a href="#">work</a></li

diff --git a/skeletons/starter-template-3.html b/skeletons/starter-template-3.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Jolt Example</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+
+    <!-- Jolt CSS includes (uncomment)
+    <link rel="stylesheet" type="text/css" href="css/global.css" />
+    <link rel="stylesheet" type="text/css" href="css/sidebar.css" />
+    -->
+
+</head>
+<body>
+<!-- Burger Icon -->
+    <input type="checkbox" id="mobile-checkbox" />
+    <label for="mobile-checkbox" id="mobile-icon">
+        <div class="burger-bar"></div>
+        <div class="burger-bar"></div>
+        <div class="burger-bar"></div>
+    </label>
+<!-- Sidebar -->
+    <aside id="side-bar" >
+            <h4>MENU</h4>
+
+            <ul id="main-nav" class="on-nav-collapse">
+                <li><a href="#" class="active">home</a></li
+                ><li><a href="#">about</a></li
+                ><li><a href="#">work</a></li
+                ><li><a href="#">folio</a></li
+                ><li><a href="#">contact</a></li>
+            </ul>
+    </aside> 
+<!-- End of Sidebar -->
+
+<!-- Sidebody -->
+    <section id="side-body">
+
+
+    </section>
+<!-- End of Sidebody -->
+    <div class="clear"></div>
+
+    <!-- Sidebar script include(uncomment)
+    <script type="text/javascript" src="js/sidebar.js"></script>
+    -->
+
+</body>
+</html>