From ae20f940baa063a0f21c32d58a9cf311c58d4c1c Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Wed, 19 Sep 2018 12:19:27 +0200
Subject: [PATCH 01/15] added analysis menu item

---
 templates/newbase.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/templates/newbase.html b/templates/newbase.html
index 8e5021cb..75ee0bde 100644
--- a/templates/newbase.html
+++ b/templates/newbase.html
@@ -56,7 +56,7 @@
     <link rel="stylesheet" type="text/css" href="/static/admin/css/widgets.css"/>
 
     <link rel="stylesheet" href="/static/css/resetnew.css" />
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-9ralMzdK1QYsk4yBY680hmsb4/hJ98xK3w0TIaJ3ll4POWpWUYaA2bRjGGujGT8w" crossorigin="anonymous">
     <link rel="stylesheet" href="/static/css/styles2.css">
     <link rel="stylesheet" href="/static/css/text2.css" />
     <link rel="stylesheet" href="/static/css/rowsandall2.css" />
@@ -149,7 +149,7 @@
           <li><p><a href="">
                 <i class="fas fa-flag-checkered"></i>&nbsp;Racing</a></p></li>
           <li><p><a href="">
-                <i class="fas fa-bullhorn"></i>&nbsp;Team</a></p></li>
+                <i class="fas fa-analytics"></i>&nbsp;Analysis</a></p></li>
         </ul>
    </nav>
    <main class="content">

From 8364506763be22052f578c393b989d28bab4184f Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Thu, 20 Sep 2018 16:04:59 +0200
Subject: [PATCH 02/15] different user icons, main nav order

---
 templates/newbase.html | 95 +++++++++++++++++++++++++++++-------------
 1 file changed, 66 insertions(+), 29 deletions(-)

diff --git a/templates/newbase.html b/templates/newbase.html
index 75ee0bde..0b097d54 100644
--- a/templates/newbase.html
+++ b/templates/newbase.html
@@ -96,6 +96,7 @@
   
   <body data-root="https://webapiv2.navionics.com/dist/webapi/images">
     <div class="wrapper">
+
       <header class="main-head">
         <ul>
           <li>
@@ -109,17 +110,26 @@
           </li>
         </ul>
       </header>
+
       <user class="main-user">
         <ul>
           <li>
             <a href="/rowers/help" title="Help">
-              <i class="fas fa-question"></i>
+              <i class="fas fa-question-circle"></i>
             </a>
           </li>
 	  {% if user.is_authenticated %}
           <li>
             <a href="/rowers/me/edit" title="Account">
+              {% if user.rower.rowerplan == 'pro' %}
+              <i class="fas fa-user-ninja"></i>
+              {% elif user.rower.rowerplan == 'coach' %}
+              <i class="fas fa-user-tie"></i>
+              {% elif user.rower.rowerplan == 'plan' %}
+              <i class="fas fa-user-crown"></i>
+              {% else %}
               <i class="fas fa-user"></i>
+              {% endif %}
             </a>
           </li>
           <li>
@@ -136,37 +146,64 @@
 	    {% endif %}
         </ul>
       </user>
+
       <nav class="main-nav">
         <ul>
-          <li><p><a href="">
-                <i class="fas fa-file-upload"></i>
-                &nbsp;Upload</a></p></li>
-          <li><p><a href="">
-                <i class="fas fa-clipboard-list"></i>
-                &nbsp;Workouts</a></p></li>
-          <li><p><a href="">
-                <i class="fas fa-calendar-alt"></i>&nbsp;Plan</a></p></li>
-          <li><p><a href="">
-                <i class="fas fa-flag-checkered"></i>&nbsp;Racing</a></p></li>
-          <li><p><a href="">
-                <i class="fas fa-analytics"></i>&nbsp;Analysis</a></p></li>
+          <li>
+            <p>
+              <a href="">
+                <i class="fas fa-clipboard-list"></i>&nbsp;Workouts
+              </a>
+            </p>
+          </li>
+          <li>
+            <p>
+              <a href="">
+                <i class="fas fa-flag-checkered"></i>&nbsp;Racing
+              </a>
+            </p>
+          </li>
+          <li>
+            <p>
+              <a href="">
+                <i class="fas fa-analytics"></i>&nbsp;Analysis
+              </a>
+            </p>
+          </li>
+          <li>
+            <p>
+              <a href="">
+                <i class="fas fa-calendar-alt"></i>&nbsp;Plan
+              </a>
+            </p>
+          </li>
+          <li>
+            <p>
+              <a href="">
+                <i class="fas fa-bullhorn"></i>&nbsp;Teams
+              </a>
+            </p>
+          </li>
         </ul>
    </nav>
-   <main class="content">
-     {% block main %}
-     {% endblock %}
-   </main>
-   <aside class="side">
-     {% block sidebar %}
-     Related links
-     {% endblock %}
-   </aside>
-   <div class="ad">
-     {% block ad %}
-     Advertising
-     {% endblock %}</div>
-   <footer class="main-footer">Footer</footer>
-   {% analytical_body_bottom %}
-   {% block body_bottom %}{% endblock %}
+
+      <main class="content">
+        {% block main %}
+        {% endblock %}
+      </main>
+      
+      <aside class="side">
+        {% block sidebar %}
+        Related links
+        {% endblock %}
+      </aside>
+      
+      <div class="ad">
+        {% block ad %}
+        Advertising
+        {% endblock %}</div>
+      <footer class="main-footer">Footer</footer>
+      {% analytical_body_bottom %}
+      {% block body_bottom %}{% endblock %}
   </body>
 </html>

From 20be828f835c5d332a1c07c37fde3e4078ebdddc Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Thu, 20 Sep 2018 16:52:23 +0200
Subject: [PATCH 03/15] user icons dark blue

---
 static/css/rowsandall2.css | 26 +++++++++++++++++++++++---
 static/css/styles2.css     | 12 ++++++++----
 static/css/text2.css       |  7 +------
 templates/newbase.html     | 23 ++++++++++++++---------
 4 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/static/css/rowsandall2.css b/static/css/rowsandall2.css
index 49634e36..d648c93f 100644
--- a/static/css/rowsandall2.css
+++ b/static/css/rowsandall2.css
@@ -292,6 +292,26 @@ th.rotate > div > span {
   text-align: center;
 }
 
+.blueicon {
+  text-decoration: none;
+  display: block;
+  /* width: 100%; */
+  color: #1c75bc;
+  padding: 0.2em 0.0em 0.2em 0.0em;
+  zoom: 1;
+
+
+
+.blueicon:hover {
+    background: #1c75bc;
+    text-decoration: none;
+}
+
+.blueicon:active {
+    position: relative;
+    top: 1px;
+}
+
 a.button { 
   color: white;
  }
@@ -871,10 +891,10 @@ a.wh:hover {
 
 .icon-link a {
     text-decoration: none;
-    color: #27aae1;
+/*    color: #27aae1; */
 }
 
 .icon-link a:hover, a:active, a:visited, a:link {
-    color: #1c75bc;
-    text-decoration: none;
+    /* color: #1c75bc; */
+    text-decoration: none; 
 }
diff --git a/static/css/styles2.css b/static/css/styles2.css
index ccdd6c09..53d71581 100644
--- a/static/css/styles2.css
+++ b/static/css/styles2.css
@@ -6,10 +6,11 @@
         font: 1.2em Helvetica, arial, sans-serif;
     }
 
+    
     .wrapper > * {
-        border: 2px solid #f08c00;
+    /*    border: 2px solid #f08c00; */
         padding: 5px;
-    }
+    } 
 
     nav ul {
         list-style: none;
@@ -38,12 +39,13 @@
         display: flex;
         justify-content: flex-end;
     }
-    
+
 .main-head {
-  grid-area: header;
+    grid-area: header;
 }
 .main-user {
     grid-area: user;
+    background: #ededed;
 }
 
 .content {
@@ -51,6 +53,7 @@
 }
 .main-nav {
     grid-area: nav;
+    background: #27aae1;
 }
 .side {
   grid-area: sidebar;
@@ -61,6 +64,7 @@
 .main-footer {
   grid-area: footer;
 }
+
 .wrapper {
   display: grid;
   grid-gap: 2px;
diff --git a/static/css/text2.css b/static/css/text2.css
index 3e6772d8..75656093 100644
--- a/static/css/text2.css
+++ b/static/css/text2.css
@@ -67,12 +67,7 @@ h3 {
   font-size: 1em;
 }
 
-h3 {
-    /*  padding-top: 20px; */
-    font-weight: normal;
-  text-align: left;
-  font-size: 1em;
-}
+
 
 
 h4 {
diff --git a/templates/newbase.html b/templates/newbase.html
index 0b097d54..a7487d43 100644
--- a/templates/newbase.html
+++ b/templates/newbase.html
@@ -114,33 +114,38 @@
       <user class="main-user">
         <ul>
           <li>
-            <a href="/rowers/help" title="Help">
-              <i class="fas fa-question-circle"></i>
+            <a class="blueicon" href="/rowers/help" title="Help">
+              <i class="fas fa-question-circle blueicon"></i>
             </a>
           </li>
 	  {% if user.is_authenticated %}
           <li>
             <a href="/rowers/me/edit" title="Account">
               {% if user.rower.rowerplan == 'pro' %}
-              <i class="fas fa-user-ninja"></i>
+              <i class="fas fa-user-ninja blueicon"></i>
               {% elif user.rower.rowerplan == 'coach' %}
-              <i class="fas fa-user-tie"></i>
+              <i class="fas fa-user-tie blueicon"></i>
               {% elif user.rower.rowerplan == 'plan' %}
-              <i class="fas fa-user-crown"></i>
+              <i class="fas fa-user-crown blueicon"></i>
               {% else %}
               <i class="fas fa-user"></i>
               {% endif %}
             </a>
           </li>
           <li>
-            <a href="{% url 'logout' %}?next=/login" title="Log Out">
-              <i class="fas fa-sign-out-alt"></i>
+            <a class="blueicon" href="{% url 'logout' %}?next=/login" title="Sign Out">
+              <i class="fas fa-sign-out-alt blueicon"></i>
             </a>
           </li>
 	  {% else %}
           <li>
-	    <a href="{% url 'login' %}" title="Log In">
-              <i class="fas fa-sign-in-alt"></i>
+            <a href="/rowers/register" title="Sign Up">
+              <i class="fas fa-user-plus blueicon"></i>
+            </a>
+          </li>
+          <li>
+	    <a href="{% url 'login' %}" title="Sign In">
+              <i class="fas fa-sign-in-alt blueicon"></i>
             </a>
           </li>
 	    {% endif %}

From 93b62dfcf249b4aa8185c29ea2fba3b6dd445875 Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Thu, 20 Sep 2018 16:54:44 +0200
Subject: [PATCH 04/15] blue icons - removed some inactive code

---
 static/css/rowsandall2.css | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/static/css/rowsandall2.css b/static/css/rowsandall2.css
index d648c93f..2cfbc286 100644
--- a/static/css/rowsandall2.css
+++ b/static/css/rowsandall2.css
@@ -302,16 +302,6 @@ th.rotate > div > span {
 
 
 
-.blueicon:hover {
-    background: #1c75bc;
-    text-decoration: none;
-}
-
-.blueicon:active {
-    position: relative;
-    top: 1px;
-}
-
 a.button { 
   color: white;
  }

From 540173f75e0de8180ae3e345622fa887fb1bf5df Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Thu, 20 Sep 2018 17:05:32 +0200
Subject: [PATCH 05/15] white icons in nav

---
 static/css/styles2.css | 22 +++++++++++++++++++---
 templates/newbase.html | 18 +++++++++---------
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/static/css/styles2.css b/static/css/styles2.css
index 53d71581..5c2ff659 100644
--- a/static/css/styles2.css
+++ b/static/css/styles2.css
@@ -10,12 +10,16 @@
     .wrapper > * {
     /*    border: 2px solid #f08c00; */
         padding: 5px;
-    } 
+    }
+
+    a {
+        text-decoration: none;
+        color: #1c75bc;
+    }
 
     nav ul {
         list-style: none;
         margin: 0;
-        padding: 0;
       display: flex;
       justify-content: space-between;
     }
@@ -35,11 +39,23 @@
     user ul {
         list-style: none;
         margin: 0;
-        padding: 0;
+        padding: 0.2em 0.0em 0.2em 0.0em;
         display: flex;
         justify-content: flex-end;
     }
 
+    user a i {
+        color: #1c75c;
+    }
+
+    nav a {
+        color: white;
+    }
+    
+    nav a i {
+        color: white;
+    }
+
 .main-head {
     grid-area: header;
 }
diff --git a/templates/newbase.html b/templates/newbase.html
index a7487d43..c8d1bb67 100644
--- a/templates/newbase.html
+++ b/templates/newbase.html
@@ -114,38 +114,38 @@
       <user class="main-user">
         <ul>
           <li>
-            <a class="blueicon" href="/rowers/help" title="Help">
-              <i class="fas fa-question-circle blueicon"></i>
+            <a class="" href="/rowers/help" title="Help">
+              <i class="fas fa-question-circle "></i>
             </a>
           </li>
 	  {% if user.is_authenticated %}
           <li>
             <a href="/rowers/me/edit" title="Account">
               {% if user.rower.rowerplan == 'pro' %}
-              <i class="fas fa-user-ninja blueicon"></i>
+              <i class="fas fa-user-ninja "></i>
               {% elif user.rower.rowerplan == 'coach' %}
-              <i class="fas fa-user-tie blueicon"></i>
+              <i class="fas fa-user-tie "></i>
               {% elif user.rower.rowerplan == 'plan' %}
-              <i class="fas fa-user-crown blueicon"></i>
+              <i class="fas fa-user-crown "></i>
               {% else %}
               <i class="fas fa-user"></i>
               {% endif %}
             </a>
           </li>
           <li>
-            <a class="blueicon" href="{% url 'logout' %}?next=/login" title="Sign Out">
-              <i class="fas fa-sign-out-alt blueicon"></i>
+            <a class="" href="{% url 'logout' %}?next=/login" title="Sign Out">
+              <i class="fas fa-sign-out-alt "></i>
             </a>
           </li>
 	  {% else %}
           <li>
             <a href="/rowers/register" title="Sign Up">
-              <i class="fas fa-user-plus blueicon"></i>
+              <i class="fas fa-user-plus "></i>
             </a>
           </li>
           <li>
 	    <a href="{% url 'login' %}" title="Sign In">
-              <i class="fas fa-sign-in-alt blueicon"></i>
+              <i class="fas fa-sign-in-alt "></i>
             </a>
           </li>
 	    {% endif %}

From 2e2b9109e9e2140118e14be8e58bea692bbcf551 Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Thu, 20 Sep 2018 17:17:10 +0200
Subject: [PATCH 06/15] removed padding around p

---
 static/css/styles2.css | 7 ++++++-
 static/css/text2.css   | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/static/css/styles2.css b/static/css/styles2.css
index 5c2ff659..d5a28849 100644
--- a/static/css/styles2.css
+++ b/static/css/styles2.css
@@ -22,6 +22,7 @@
         margin: 0;
       display: flex;
       justify-content: space-between;
+        padding: 0.2em 0.2em 0.2em 0.2em;
     }
 
     header ul {
@@ -48,6 +49,10 @@
         color: #1c75c;
     }
 
+    nav li {
+        padding: 0.2em 0.0em 0.2em 0.0em;
+    }
+
     nav a {
         color: white;
     }
@@ -69,7 +74,7 @@
 }
 .main-nav {
     grid-area: nav;
-    background: #27aae1;
+    background: #1c75bc;
 }
 .side {
   grid-area: sidebar;
diff --git a/static/css/text2.css b/static/css/text2.css
index 75656093..0bd598a9 100644
--- a/static/css/text2.css
+++ b/static/css/text2.css
@@ -98,7 +98,7 @@ li {
   margin-left: 30px;
 }
 
-p,
+/* p, */
 dl,
 hr,
 h1,

From e6a4c3f2ff287eaa0b054fbc6c7ab53a85af926e Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Thu, 20 Sep 2018 17:19:29 +0200
Subject: [PATCH 07/15] removed p in nav list

---
 static/css/text2.css   |  2 +-
 templates/newbase.html | 40 +++++++++++++++-------------------------
 2 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/static/css/text2.css b/static/css/text2.css
index 0bd598a9..a0cc72e8 100644
--- a/static/css/text2.css
+++ b/static/css/text2.css
@@ -98,7 +98,7 @@ li {
   margin-left: 30px;
 }
 
-/* p, */
+p, 
 dl,
 hr,
 h1,
diff --git a/templates/newbase.html b/templates/newbase.html
index c8d1bb67..8fd62554 100644
--- a/templates/newbase.html
+++ b/templates/newbase.html
@@ -155,39 +155,29 @@
       <nav class="main-nav">
         <ul>
           <li>
-            <p>
-              <a href="">
-                <i class="fas fa-clipboard-list"></i>&nbsp;Workouts
-              </a>
-            </p>
+            <a href="">
+              <i class="fas fa-clipboard-list"></i>&nbsp;Workouts
+            </a>
           </li>
           <li>
-            <p>
-              <a href="">
-                <i class="fas fa-flag-checkered"></i>&nbsp;Racing
-              </a>
-            </p>
+            <a href="">
+              <i class="fas fa-flag-checkered"></i>&nbsp;Racing
+            </a>
           </li>
           <li>
-            <p>
-              <a href="">
-                <i class="fas fa-analytics"></i>&nbsp;Analysis
-              </a>
-            </p>
+            <a href="">
+              <i class="fas fa-analytics"></i>&nbsp;Analysis
+            </a>
           </li>
           <li>
-            <p>
-              <a href="">
-                <i class="fas fa-calendar-alt"></i>&nbsp;Plan
-              </a>
-            </p>
+            <a href="">
+              <i class="fas fa-calendar-alt"></i>&nbsp;Plan
+            </a>
           </li>
           <li>
-            <p>
-              <a href="">
-                <i class="fas fa-bullhorn"></i>&nbsp;Teams
-              </a>
-            </p>
+            <a href="">
+              <i class="fas fa-bullhorn"></i>&nbsp;Teams
+            </a>
           </li>
         </ul>
    </nav>

From 96a105c304ed083c28b78a43fd4a88478994d7c6 Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Fri, 21 Sep 2018 07:46:28 +0200
Subject: [PATCH 08/15] fine tune

---
 templates/newbase.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/templates/newbase.html b/templates/newbase.html
index 8fd62554..965e1248 100644
--- a/templates/newbase.html
+++ b/templates/newbase.html
@@ -120,13 +120,13 @@
           </li>
 	  {% if user.is_authenticated %}
           <li>
-            <a href="/rowers/me/edit" title="Account">
+            <a href="/rowers/me/edit" title="Profile">
               {% if user.rower.rowerplan == 'pro' %}
               <i class="fas fa-user-ninja "></i>
               {% elif user.rower.rowerplan == 'coach' %}
-              <i class="fas fa-user-tie "></i>
+              <i class="fas fa-users "></i>
               {% elif user.rower.rowerplan == 'plan' %}
-              <i class="fas fa-user-crown "></i>
+              <i class="fas fa-user-tie "></i>
               {% else %}
               <i class="fas fa-user"></i>
               {% endif %}

From c4a6af500f9161569164221c4c02abcacc466c70 Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Fri, 21 Sep 2018 16:06:57 +0200
Subject: [PATCH 09/15] attempt at accordeon menu

---
 rowers/templates/redesign.html |  79 ++-
 static/css/rowsandall2.css     |  24 +
 static/css/styles2.css         | 225 ++++++++-
 static/img/cd-icons.svg        | 846 +++++++++++++++++++++++++++++++++
 4 files changed, 1172 insertions(+), 2 deletions(-)
 create mode 100644 static/img/cd-icons.svg

diff --git a/rowers/templates/redesign.html b/rowers/templates/redesign.html
index 85bf97db..f7e12569 100644
--- a/rowers/templates/redesign.html
+++ b/rowers/templates/redesign.html
@@ -9,5 +9,82 @@
 {% endblock %}
 
 {% block sidebar %}
-Context Related Links
+<ul class="cd-accordion-menu animated">
+  <li class="has-children">
+    <input type="checkbox" name ="group-1" id="group-1" checked>
+    <label for="group-1">Group 1</label>
+    
+    <ul>
+      <li class="has-children">
+      	<input type="checkbox" name ="sub-group-1" id="sub-group-1">
+	<label for="sub-group-1">Sub Group 1</label>
+
+	<ul>
+	  <li><a href="#0">Image</a></li>
+	  <li><a href="#0">Image</a></li>
+	  <li><a href="#0">Image</a></li>
+	</ul>
+      </li>
+      <li class="has-children">
+      	<input type="checkbox" name ="sub-group-2" id="sub-group-2">
+	<label for="sub-group-2">Sub Group 2</label>
+        
+	<ul>
+	  <li class="has-children">
+	    <input type="checkbox" name ="sub-group-level-3" id="sub-group-level-3">
+	    <label for="sub-group-level-3">Sub Group Level 3</label>
+            
+	    <ul>
+	      <li><a href="#0">Image</a></li>
+	      <li><a href="#0">Image</a></li>
+	    </ul>
+	  </li>
+	  <li><a href="#0">Image</a></li>
+	</ul>
+      </li>
+      <li><a href="#0">Image</a></li>
+      <li><a href="#0">Image</a></li>
+    </ul>
+  </li>
+  
+  <li class="has-children">
+    <input type="checkbox" name ="group-2" id="group-2">
+    <label for="group-2">Group 2</label>
+    
+    <ul>
+      <li><a href="#0">Image</a></li>
+      <li><a href="#0">Image</a></li>
+    </ul>
+  </li>
+  
+  <li class="has-children">
+    <input type="checkbox" name ="group-3" id="group-3">
+    <label for="group-3">Group 3</label>
+    
+    <ul>
+      <li><a href="#0">Image</a></li>
+      <li><a href="#0">Image</a></li>
+    </ul>
+  </li>
+  
+  <li class="has-children">
+    <input type="checkbox" name ="group-4" id="group-4">
+    <label for="group-4">Group 4</label>
+    
+    <ul>
+      <li class="has-children">
+	<input type="checkbox" name ="sub-group-3" id="sub-group-3">
+	<label for="sub-group-3">Sub Group 3</label>
+        
+	<ul>
+	  <li><a href="#0">Image</a></li>
+	  <li><a href="#0">Image</a></li>
+	</ul>
+      </li>
+      <li><a href="#0">Image</a></li>
+      <li><a href="#0">Image</a></li>
+    </ul>
+  </li>
+</ul> <!-- cd-accordion-menu -->
+
 {% endblock %}
diff --git a/static/css/rowsandall2.css b/static/css/rowsandall2.css
index 2cfbc286..719d573f 100644
--- a/static/css/rowsandall2.css
+++ b/static/css/rowsandall2.css
@@ -888,3 +888,27 @@ a.wh:hover {
     /* color: #1c75bc; */
     text-decoration: none; 
 }
+
+
+.cd-accordion-menu input[type=checkbox] {
+  /* hide native checkbox */
+  position: absolute;
+  opacity: 0;
+}
+.cd-accordion-menu label, .cd-accordion-menu a {
+    position: relative;
+    display: block;
+    padding: 18px 18px 18px 64px;
+    background: #4d5158;
+    box-shadow: inset 0 -1px #555960;
+    color: #ffffff;
+    font-size: 1.6rem;
+}
+
+
+.cd-accordion-menu input[type=checkbox]:checked + label + ul,
+.cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
+    /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
+    /* show children when item is checked */
+    display: block;
+}  
diff --git a/static/css/styles2.css b/static/css/styles2.css
index d5a28849..a82a759f 100644
--- a/static/css/styles2.css
+++ b/static/css/styles2.css
@@ -35,8 +35,175 @@
         list-style: none;
         margin: 0;
         padding: 0;
+
+
+    } 
+
+    aside a {
+        color: #a0f6aa;
+        text-decoration: none;
+    }
+    aside .cd-accordion-menu {
+        width: 90%;
+        max-width: 600px;
+        background: #4d5158;
+        margin: 4em auto;
+        box-shadow: 0 4px 40px #70ac76;
+    }
+    
+    aside .cd-accordion-menu ul {
+        /* by default hide all sub menus */
+        display: none;
     }
 
+    aside .cd-accordion-menu li {
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+
+    aside .cd-accordion-menu input[type=checkbox] {
+        /* hide native checkbox */
+        position: absolute;
+        opacity: 0;
+    }    
+
+    aside .cd-accordion-menu label, .cd-accordion-menu a {
+        position: relative;
+        display: block;
+        padding: 18px 18px 18px 64px;
+        background: #4d5158;
+        box-shadow: inset 0 -1px #555960;
+        color: #ffffff;
+        font-size: 1.6rem;
+    }
+
+    aside .no-touch .cd-accordion-menu label:hover, .no-touch .cd-accordion-menu a:hover {
+        background: #52565d;
+    }
+
+    aside .cd-accordion-menu label::before, .cd-accordion-menu label::after, .cd-accordion-menu a::after {
+        /* icons */
+        content: '';
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        position: absolute;
+        top: 50%;
+        -webkit-transform: translateY(-50%);
+        -moz-transform: translateY(-50%);
+        -ms-transform: translateY(-50%);
+        -o-transform: translateY(-50%);
+        transform: translateY(-50%);
+    }
+
+    aside .cd-accordion-menu label {
+        cursor: pointer;
+    }
+    
+    aside .cd-accordion-menu label::before, .cd-accordion-menu label::after {
+        background-image: url(/static/img/cd-icons.svg);
+        background-repeat: no-repeat;
+    }
+
+    aside .cd-accordion-menu label::before {
+        /* arrow icon */
+        left: 18px;
+        background-position: 0 0;
+        -webkit-transform: translateY(-50%) rotate(-90deg);
+        -moz-transform: translateY(-50%) rotate(-90deg);
+        -ms-transform: translateY(-50%) rotate(-90deg);
+        -o-transform: translateY(-50%) rotate(-90deg);
+        transform: translateY(-50%) rotate(-90deg);
+    }
+
+    aside .cd-accordion-menu label::after {
+        /* folder icons */
+        left: 41px;
+        background-position: -16px 0;
+    }
+    
+    aside .cd-accordion-menu a::after {
+        /* image icon */
+        left: 36px;
+        background: url(/static/img/cd-icons.svg) no-repeat -48px 0;
+    }
+
+    aside .cd-accordion-menu input[type=checkbox]:checked + label::before {
+        /* rotate arrow */
+        -webkit-transform: translateY(-50%);
+        -moz-transform: translateY(-50%);
+        -ms-transform: translateY(-50%);
+        -o-transform: translateY(-50%);
+        transform: translateY(-50%);
+    }
+    
+    aside .cd-accordion-menu input[type=checkbox]:checked + label::after {
+        /* show open folder icon if item is checked */
+        background-position: -32px 0;
+    }
+    
+    aside .cd-accordion-menu input[type=checkbox]:checked + label + ul,
+    aside .cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
+        /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
+        /* show children when item is checked */
+        display: block;
+    }
+    
+    aside .cd-accordion-menu ul label,
+    aside .cd-accordion-menu ul a {
+        background: #35383d;
+        box-shadow: inset 0 -1px #41444a;
+        padding-left: 82px;
+    }
+    
+    aside .no-touch .cd-accordion-menu ul label:hover, aside .no-touch
+                                                             .cd-accordion-menu ul a:hover {
+        background: #3c3f45;
+    }
+    
+    aside .cd-accordion-menu > li:last-of-type > label,
+    aside .cd-accordion-menu > li:last-of-type > a,
+    aside .cd-accordion-menu > li > ul > li:last-of-type label,
+    aside .cd-accordion-menu > li > ul > li:last-of-type a {
+        box-shadow: none;
+    }
+    
+    aside .cd-accordion-menu ul label::before {
+        left: 36px;
+    }
+    aside .cd-accordion-menu ul label::after,
+    aside .cd-accordion-menu ul a::after {
+        left: 59px;
+    }
+    
+    aside .cd-accordion-menu ul ul label,
+    .cd-accordion-menu ul ul a {
+        padding-left: 100px;
+    }
+    
+    aside .cd-accordion-menu ul ul label::before {
+        left: 54px;
+    }
+    
+    aside .cd-accordion-menu ul ul label::after,
+    .cd-accordion-menu ul ul a::after {
+        left: 77px;
+    }
+    
+    aside .cd-accordion-menu ul ul ul label,
+    aside .cd-accordion-menu ul ul ul a {
+        padding-left: 118px;
+    }
+    aside .cd-accordion-menu ul ul ul label::before {
+        left: 72px;
+    }
+    aside .cd-accordion-menu ul ul ul label::after,
+    aside .cd-accordion-menu ul ul ul a::after {
+        left: 95px;
+    }
+    
     user ul {
         list-style: none;
         margin: 0;
@@ -78,7 +245,11 @@
 }
 .side {
   grid-area: sidebar;
+  background-color: #a0f6aa;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;/*  background: #4d5158; */
 }
+
 .ad {
   grid-area: ad;
 }
@@ -155,6 +326,58 @@
 
    header ul {
      flex-direction: row; 
-   } 
+   }
+
+   aside .cd-accordion-menu label, .cd-accordion-menu a {
+       padding: 24px 24px 24px 82px;
+       font-size: 1.9rem;
+   }
+   aside .cd-accordion-menu label::before {
+       left: 24px;
+   }
+   aside .cd-accordion-menu label::after {
+       left: 53px;
+   }
+  aside .cd-accordion-menu ul label,
+  aside .cd-accordion-menu ul a {
+      padding-left: 106px;
+  }
+  aside .cd-accordion-menu ul label::before {
+      left: 48px;
+  }
+  aside .cd-accordion-menu ul label::after,
+  aside .cd-accordion-menu ul a::after {
+    left: 77px;
+  }
+  aside .cd-accordion-menu ul ul label,
+  aside .cd-accordion-menu ul ul a {
+    padding-left: 130px;
+  }
+  aside .cd-accordion-menu ul ul label::before {
+    left: 72px;
+  }
+  aside .cd-accordion-menu ul ul label::after,
+  aside .cd-accordion-menu ul ul a::after {
+    left: 101px;
+  }
+  aside .cd-accordion-menu ul ul ul label,
+  aside .cd-accordion-menu ul ul ul a {
+      padding-left: 154px;
+  }
+  aside .cd-accordion-menu ul ul ul label::before {
+      left: 96px;
+  }
+  aside .cd-accordion-menu ul ul ul label::after,
+  aside .cd-accordion-menu ul ul ul a::after {
+      left: 125px;
+  }
+
 
 }
+
+aside .cd-accordion-menu.animated label::before {
+  /* this class is used if you're using jquery to animate the accordion */
+  -webkit-transition: -webkit-transform 0.3s;
+  -moz-transition: -moz-transform 0.3s;
+  transition: transform 0.3s;
+}
diff --git a/static/img/cd-icons.svg b/static/img/cd-icons.svg
new file mode 100644
index 00000000..a6e5b2a4
--- /dev/null
+++ b/static/img/cd-icons.svg
@@ -0,0 +1,846 @@
+
+
+
+
+
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+  <link rel="dns-prefetch" href="https://assets-cdn.github.com">
+  <link rel="dns-prefetch" href="https://avatars0.githubusercontent.com">
+  <link rel="dns-prefetch" href="https://avatars1.githubusercontent.com">
+  <link rel="dns-prefetch" href="https://avatars2.githubusercontent.com">
+  <link rel="dns-prefetch" href="https://avatars3.githubusercontent.com">
+  <link rel="dns-prefetch" href="https://github-cloud.s3.amazonaws.com">
+  <link rel="dns-prefetch" href="https://user-images.githubusercontent.com/">
+
+
+
+  <link crossorigin="anonymous" media="all" integrity="sha512-/yZA7MGD9acBi5MmgjnivwjGeiNsmimsI/bhLlK7akrRuw+hMxNpJoQEMO9Zt0Nq6ZRu1m1NGV6r95Ib0zx7Qw==" rel="stylesheet" href="https://assets-cdn.github.com/assets/frameworks-1ca00d32d1a8adc78ae7bb6677410eb1.css" />
+  <link crossorigin="anonymous" media="all" integrity="sha512-pHF1luoMSUFxvz63bW3jEbbifYl/pruHUw+kljThAPi2g0nhgMdvWj4bQRh4O8MYp9NR60XYcylaLXmYA8YXSw==" rel="stylesheet" href="https://assets-cdn.github.com/assets/github-5043b3d96d50b119b971c2cdde4e0a62.css" />
+  
+  
+  
+  
+
+  <meta name="viewport" content="width=device-width">
+  
+  <title>multi-level-accordion-menu/cd-icons.svg at master · CodyHouse/multi-level-accordion-menu</title>
+    <meta name="description" content="Contribute to CodyHouse/multi-level-accordion-menu development by creating an account on GitHub.">
+    <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub">
+  <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">
+  <meta property="fb:app_id" content="1401488693436528">
+
+    
+    <meta property="og:image" content="https://avatars3.githubusercontent.com/u/7666518?s=400&amp;v=4" /><meta property="og:site_name" content="GitHub" /><meta property="og:type" content="object" /><meta property="og:title" content="CodyHouse/multi-level-accordion-menu" /><meta property="og:url" content="https://github.com/CodyHouse/multi-level-accordion-menu" /><meta property="og:description" content="Contribute to CodyHouse/multi-level-accordion-menu development by creating an account on GitHub." />
+
+  <link rel="assets" href="https://assets-cdn.github.com/">
+  <link rel="web-socket" href="wss://live.github.com/_sockets/VjI6MzE5NTU4NDMwOmY2ZTU0YTcxZjFmOTY2MTg4ZDRiMTJmMDA5YjEzOGEwYmM1YWZhYWE1NzgxNjhlMzEzNzk4NjlkYWRmZjc0YWI=--bd5d2f5f971dfd4387aa13e0d9ffea8d6ce58fbf">
+  <meta name="pjax-timeout" content="1000">
+  <link rel="sudo-modal" href="/sessions/sudo_modal">
+  <meta name="request-id" content="97DD:31EF:11F0D59:1CCEF11:5BA4F600" data-pjax-transient>
+
+
+  
+
+  <meta name="selected-link" value="repo_source" data-pjax-transient>
+
+      <meta name="google-site-verification" content="KT5gs8h0wvaagLKAVWq8bbeNwnZZK1r1XQysX3xurLU">
+    <meta name="google-site-verification" content="ZzhVyEFwb7w3e0-uOTltm8Jsck2F5StVihD0exw2fsA">
+    <meta name="google-site-verification" content="GXs5KoUUkNCoaAZn7wPN-t01Pywp9M3sEjnt_3_ZWPc">
+
+  <meta name="octolytics-host" content="collector.githubapp.com" /><meta name="octolytics-app-id" content="github" /><meta name="octolytics-event-url" content="https://collector.githubapp.com/github-external/browser_event" /><meta name="octolytics-dimension-request_id" content="97DD:31EF:11F0D59:1CCEF11:5BA4F600" /><meta name="octolytics-dimension-region_edge" content="iad" /><meta name="octolytics-dimension-region_render" content="iad" /><meta name="octolytics-actor-id" content="18240584" /><meta name="octolytics-actor-login" content="sanderroosendaal" /><meta name="octolytics-actor-hash" content="8795304c9e2dc0e11eac0bff02433321655e8a2b3ac6a2c3a5b953dcde10fdcf" />
+<meta name="analytics-location" content="/&lt;user-name&gt;/&lt;repo-name&gt;/blob/show" data-pjax-transient="true" />
+
+
+
+    <meta name="google-analytics" content="UA-3769691-2">
+
+  <meta class="js-ga-set" name="userId" content="a7b421d5fa76f24d335ab4c54ba906f5" %>
+
+<meta class="js-ga-set" name="dimension1" content="Logged In">
+
+
+
+  
+
+      <meta name="hostname" content="github.com">
+    <meta name="user-login" content="sanderroosendaal">
+
+      <meta name="expected-hostname" content="github.com">
+    <meta name="js-proxy-site-detection-payload" content="NDBjYTM5MDZjNWZmYTc5MjQzNjdiODQ0ZDliNjYyMmE5MTYyZThiNmIwYWYwMjQyZTk3ZGRkMmVlODZjMWNkMXx7InJlbW90ZV9hZGRyZXNzIjoiMTk5LjY0Ljc1LjE4NyIsInJlcXVlc3RfaWQiOiI5N0REOjMxRUY6MTFGMEQ1OToxQ0NFRjExOjVCQTRGNjAwIiwidGltZXN0YW1wIjoxNTM3NTM3NTM5LCJob3N0IjoiZ2l0aHViLmNvbSJ9">
+
+    <meta name="enabled-features" content="DASHBOARD_V2_LAYOUT,DASHBOARD_V2_LAYOUT_OPT_IN,EXPLORE_DISCOVER_REPOSITORIES,UNIVERSE_BANNER,MARKETPLACE_PLAN_RESTRICTION_EDITOR,MARKETPLACE_RETARGETING,QUOTE_MARKDOWN">
+
+  <meta name="html-safe-nonce" content="8f54fd646b0ae194614a477037e2a8ae9951b35c">
+
+  <meta http-equiv="x-pjax-version" content="9beeefc72f48fd4614f5dec07b40839d">
+  
+
+      <link href="https://github.com/CodyHouse/multi-level-accordion-menu/commits/master.atom" rel="alternate" title="Recent Commits to multi-level-accordion-menu:master" type="application/atom+xml">
+
+  <meta name="go-import" content="github.com/CodyHouse/multi-level-accordion-menu git https://github.com/CodyHouse/multi-level-accordion-menu.git">
+
+  <meta name="octolytics-dimension-user_id" content="7666518" /><meta name="octolytics-dimension-user_login" content="CodyHouse" /><meta name="octolytics-dimension-repository_id" content="43811396" /><meta name="octolytics-dimension-repository_nwo" content="CodyHouse/multi-level-accordion-menu" /><meta name="octolytics-dimension-repository_public" content="true" /><meta name="octolytics-dimension-repository_is_fork" content="false" /><meta name="octolytics-dimension-repository_network_root_id" content="43811396" /><meta name="octolytics-dimension-repository_network_root_nwo" content="CodyHouse/multi-level-accordion-menu" /><meta name="octolytics-dimension-repository_explore_github_marketplace_ci_cta_shown" content="false" />
+
+
+    <link rel="canonical" href="https://github.com/CodyHouse/multi-level-accordion-menu/blob/master/img/cd-icons.svg" data-pjax-transient>
+
+
+  <meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats">
+
+  <meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors">
+
+  <link rel="mask-icon" href="https://assets-cdn.github.com/pinned-octocat.svg" color="#000000">
+  <link rel="icon" type="image/x-icon" class="js-site-favicon" href="https://assets-cdn.github.com/favicon.ico">
+
+<meta name="theme-color" content="#1e2327">
+
+
+  <meta name="u2f-support" content="true">
+
+  <link rel="manifest" href="/manifest.json" crossOrigin="use-credentials">
+
+  </head>
+
+  <body class="logged-in env-production page-blob">
+    
+
+  <div class="position-relative js-header-wrapper ">
+    <a href="#start-of-content" tabindex="1" class="p-3 bg-blue text-white show-on-focus js-skip-to-content">Skip to content</a>
+    <div id="js-pjax-loader-bar" class="pjax-loader-bar"><div class="progress"></div></div>
+
+    
+    
+    
+
+
+
+        
+<header class="Header  f5" role="banner">
+  <div class="d-flex flex-justify-between px-3 container-lg">
+    <div class="d-flex flex-justify-between ">
+      <div class="">
+        <a class="header-logo-invertocat" href="https://github.com/" data-hotkey="g d" aria-label="Homepage" data-ga-click="Header, go to dashboard, icon:logo">
+  <svg height="32" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
+</a>
+
+      </div>
+
+    </div>
+
+    <div class="HeaderMenu d-flex flex-justify-between flex-auto">
+      <div class="d-flex">
+            <div class="">
+              <div class="header-search scoped-search site-scoped-search js-site-search position-relative js-jump-to"
+  role="combobox"
+  aria-owns="jump-to-results"
+  aria-label="Search or jump to"
+  aria-haspopup="listbox"
+  aria-expanded="false"
+>
+  <div class="position-relative">
+    <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-site-search-form" data-scope-type="Repository" data-scope-id="43811396" data-scoped-search-url="/CodyHouse/multi-level-accordion-menu/search" data-unscoped-search-url="/search" action="/CodyHouse/multi-level-accordion-menu/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="&#x2713;" />
+      <label class="form-control header-search-wrapper header-search-wrapper-jump-to position-relative d-flex flex-justify-between flex-items-center js-chromeless-input-container">
+        <input type="text"
+          class="form-control header-search-input jump-to-field js-jump-to-field js-site-search-focus js-site-search-field is-clearable"
+          data-hotkey="s,/"
+          name="q"
+          value=""
+          placeholder="Search or jump to…"
+          data-unscoped-placeholder="Search or jump to…"
+          data-scoped-placeholder="Search or jump to…"
+          autocapitalize="off"
+          aria-autocomplete="list"
+          aria-controls="jump-to-results"
+          data-jump-to-suggestions-path="/_graphql/GetSuggestedNavigationDestinations#csrf-token=DXMPru5IqDDUGmsI7bsQ/bjysV2hll6gl+SrhtGx7FgZlebTvBh/fj4y/ARh/tWmSKJEU77dWG93nUYFDi5lTA=="
+          spellcheck="false"
+          autocomplete="off"
+          >
+          <input type="hidden" class="js-site-search-type-field" name="type" >
+            <img src="https://assets-cdn.github.com/images/search-shortcut-hint.svg" alt="" class="mr-2 header-search-key-slash">
+
+            <div class="Box position-absolute overflow-hidden d-none jump-to-suggestions js-jump-to-suggestions-container">
+              <ul class="d-none js-jump-to-suggestions-template-container">
+                <li class="d-flex flex-justify-start flex-items-center p-0 f5 navigation-item js-navigation-item" role="option">
+                  <a tabindex="-1" class="no-underline d-flex flex-auto flex-items-center p-2 jump-to-suggestions-path js-jump-to-suggestion-path js-navigation-open" href="">
+                    <div class="jump-to-octicon js-jump-to-octicon mr-2 text-center d-none">
+                      <svg height="16" width="16" class="octicon octicon-repo flex-shrink-0 js-jump-to-octicon-repo d-none" title="Repository" aria-label="Repository" viewBox="0 0 12 16" version="1.1" role="img"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg>
+                      <svg height="16" width="16" class="octicon octicon-project flex-shrink-0 js-jump-to-octicon-project d-none" title="Project" aria-label="Project" viewBox="0 0 15 16" version="1.1" role="img"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1z"/></svg>
+                      <svg height="16" width="16" class="octicon octicon-search flex-shrink-0 js-jump-to-octicon-search d-none" title="Search" aria-label="Search" viewBox="0 0 16 16" version="1.1" role="img"><path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0 0 13 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 0 0 0-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"/></svg>
+                    </div>
+
+                    <img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none" alt="" aria-label="Team" src="" width="28" height="28">
+
+                    <div class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target">
+                    </div>
+
+                    <div class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none js-jump-to-badge-search">
+                      <span class="js-jump-to-badge-search-text-default d-none" aria-label="in this repository">
+                        In this repository
+                      </span>
+                      <span class="js-jump-to-badge-search-text-global d-none" aria-label="in all of GitHub">
+                        All GitHub
+                      </span>
+                      <span aria-hidden="true" class="d-inline-block ml-1 v-align-middle">↵</span>
+                    </div>
+
+                    <div aria-hidden="true" class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump">
+                      Jump to
+                      <span class="d-inline-block ml-1 v-align-middle">↵</span>
+                    </div>
+                  </a>
+                </li>
+              </ul>
+              <ul class="d-none js-jump-to-no-results-template-container">
+                <li class="d-flex flex-justify-center flex-items-center p-3 f5 d-none">
+                  <span class="text-gray">No suggested jump to results</span>
+                </li>
+              </ul>
+
+              <ul id="jump-to-results" role="listbox" class="js-navigation-container jump-to-suggestions-results-container js-jump-to-suggestions-results-container" >
+                <li class="d-flex flex-justify-center flex-items-center p-0 f5">
+                  <img src="https://assets-cdn.github.com/images/spinners/octocat-spinner-128.gif" alt="Octocat Spinner Icon" class="m-2" width="28">
+                </li>
+              </ul>
+            </div>
+      </label>
+</form>  </div>
+</div>
+
+            </div>
+
+          <ul class="d-flex pl-2 flex-items-center text-bold list-style-none" role="navigation">
+            <li>
+              <a class="js-selected-navigation-item HeaderNavlink px-2" data-hotkey="g p" data-ga-click="Header, click, Nav menu - item:pulls context:user" aria-label="Pull requests you created" data-selected-links="/pulls /pulls/assigned /pulls/mentioned /pulls" href="/pulls">
+                Pull requests
+</a>            </li>
+            <li>
+              <a class="js-selected-navigation-item HeaderNavlink px-2" data-hotkey="g i" data-ga-click="Header, click, Nav menu - item:issues context:user" aria-label="Issues you created" data-selected-links="/issues /issues/assigned /issues/mentioned /issues" href="/issues">
+                Issues
+</a>            </li>
+              <li>
+                <a class="js-selected-navigation-item HeaderNavlink px-2" data-ga-click="Header, click, Nav menu - item:marketplace context:user" data-octo-click="marketplace_click" data-octo-dimensions="location:nav_bar" data-selected-links=" /marketplace" href="/marketplace">
+                   Marketplace
+</a>              </li>
+            <li>
+              <a class="js-selected-navigation-item HeaderNavlink px-2" data-ga-click="Header, click, Nav menu - item:explore" data-selected-links="/explore /trending /trending/developers /integrations /integrations/feature/code /integrations/feature/collaborate /integrations/feature/ship showcases showcases_search showcases_landing /explore" href="/explore">
+                Explore
+</a>            </li>
+          </ul>
+      </div>
+
+      <div class="d-flex">
+        
+<ul class="user-nav d-flex flex-items-center list-style-none" id="user-links">
+  <li class="dropdown">
+    <span class="d-inline-block  px-2">
+      
+    <a aria-label="You have unread notifications" class="notification-indicator tooltipped tooltipped-s  js-socket-channel js-notification-indicator" data-hotkey="g n" data-ga-click="Header, go to notifications, icon:unread" data-channel="notification-changed:18240584" href="/notifications">
+        <span class="mail-status unread"></span>
+        <svg class="octicon octicon-bell" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M13.99 11.991v1H0v-1l.73-.58c.769-.769.809-2.547 1.189-4.416.77-3.767 4.077-4.996 4.077-4.996 0-.55.45-1 .999-1 .55 0 1 .45 1 1 0 0 3.387 1.229 4.156 4.996.38 1.879.42 3.657 1.19 4.417l.659.58h-.01zM6.995 15.99c1.11 0 1.999-.89 1.999-1.999H4.996c0 1.11.89 1.999 1.999 1.999z"/></svg>
+</a>
+    </span>
+  </li>
+
+  <li class="dropdown">
+    <details class="details-overlay details-reset d-flex px-2 flex-items-center">
+      <summary class="HeaderNavlink"
+         aria-label="Create new…"
+         data-ga-click="Header, create new, icon:add">
+        <svg class="octicon octicon-plus float-left mr-1 mt-1" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"/></svg>
+        <span class="dropdown-caret mt-1"></span>
+      </summary>
+      <details-menu class="dropdown-menu dropdown-menu-sw">
+        
+<a role="menuitem" class="dropdown-item" href="/new" data-ga-click="Header, create new repository">
+  New repository
+</a>
+
+  <a role="menuitem" class="dropdown-item" href="/new/import" data-ga-click="Header, import a repository">
+    Import repository
+  </a>
+
+<a role="menuitem" class="dropdown-item" href="https://gist.github.com/" data-ga-click="Header, create new gist">
+  New gist
+</a>
+
+  <a role="menuitem" class="dropdown-item" href="/organizations/new" data-ga-click="Header, create new organization">
+    New organization
+  </a>
+
+
+  <div class="dropdown-divider"></div>
+  <div class="dropdown-header">
+    <span title="CodyHouse/multi-level-accordion-menu">This repository</span>
+  </div>
+    <a role="menuitem" class="dropdown-item" href="/CodyHouse/multi-level-accordion-menu/issues/new" data-ga-click="Header, create new issue">
+      New issue
+    </a>
+
+      </details-menu>
+    </details>
+  </li>
+
+  <li class="dropdown">
+
+    <details class="details-overlay details-reset d-flex pl-2 flex-items-center">
+      <summary class="HeaderNavlink name mt-1"
+        aria-label="View profile and more"
+        data-ga-click="Header, show menu, icon:avatar">
+        <img alt="@sanderroosendaal" class="avatar float-left mr-1" src="https://avatars0.githubusercontent.com/u/18240584?s=40&amp;v=4" height="20" width="20">
+        <span class="dropdown-caret"></span>
+      </summary>
+      <details-menu class="dropdown-menu dropdown-menu-sw">
+        <ul>
+          <li class="header-nav-current-user css-truncate"><a role="menuitem" class="no-underline user-profile-link px-3 pt-2 pb-2 mb-n2 mt-n1 d-block" href="/sanderroosendaal" data-ga-click="Header, go to profile, text:Signed in as">Signed in as <strong class="css-truncate-target">sanderroosendaal</strong></a></li>
+          <li class="dropdown-divider"></li>
+          <li><a role="menuitem" class="dropdown-item" href="/sanderroosendaal" data-ga-click="Header, go to profile, text:your profile">Your profile</a></li>
+          <li><a role="menuitem" class="dropdown-item" href="/sanderroosendaal?tab=repositories" data-ga-click="Header, go to repositories, text:your repositories">Your repositories</a></li>
+          <li><a role="menuitem" class="dropdown-item" href="/sanderroosendaal?tab=stars" data-ga-click="Header, go to starred repos, text:your stars">Your stars</a></li>
+            <li><a role="menuitem" class="dropdown-item" href="https://gist.github.com/" data-ga-click="Header, your gists, text:your gists">Your gists</a></li>
+          <li class="dropdown-divider"></li>
+          <li><a role="menuitem" class="dropdown-item" href="https://help.github.com" data-ga-click="Header, go to help, text:help">Help</a></li>
+          <li><a role="menuitem" class="dropdown-item" href="/settings/profile" data-ga-click="Header, go to settings, icon:settings">Settings</a></li>
+          <li>
+            <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="logout-form" action="/logout" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="C/KS9lTghnA+MJ9aw9zsCLCqzzGAhf+moslCMwEdiQ93L3IqiFh37VCB5pH+logNl6tCbEshMyHPTIo8Llce/w==" />
+              <button type="submit" class="dropdown-item dropdown-signout" data-ga-click="Header, sign out, icon:logout" role="menuitem">
+                Sign out
+              </button>
+</form>          </li>
+        </ul>
+      </details-menu>
+    </details>
+  </li>
+</ul>
+
+
+
+        <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="sr-only right-0" action="/logout" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="o8/PrvlWg5JMcbfdLNqLBNfv8BQGan+5/kLmwaYHDxbfEi9yJe5yDyLAzhYRkO8B8O59Sc3Osz6Txy7OiU2Y5g==" />
+          <button type="submit" class="dropdown-item dropdown-signout" data-ga-click="Header, sign out, icon:logout">
+            Sign out
+          </button>
+</form>      </div>
+    </div>
+  </div>
+</header>
+
+      
+
+  </div>
+
+  <div id="start-of-content" class="show-on-focus"></div>
+
+    <div id="js-flash-container">
+
+
+</div>
+
+
+
+  <div role="main" class="application-main ">
+        <div itemscope itemtype="http://schema.org/SoftwareSourceCode" class="">
+    <div id="js-repo-pjax-container" data-pjax-container >
+      
+
+
+
+
+
+  
+
+
+
+  <div class="pagehead repohead instapaper_ignore readability-menu experiment-repo-nav  ">
+    <div class="repohead-details-container clearfix container">
+
+      <ul class="pagehead-actions">
+  <li>
+        <!-- '"` --><!-- </textarea></xmp> --></option></form><form data-autosubmit="true" data-remote="true" class="js-social-container" action="/notifications/subscribe" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="KOhAwEvZ9SGwCI+SV3wqbmXLU21H25GaS2ROzex2nnKkJZj84rrZWaiYCfKrWiZ3lT64OtIrViTFtLj9nQUSRw==" />      <input type="hidden" name="repository_id" id="repository_id" value="43811396" class="form-control" />
+
+        <div class="select-menu js-menu-container js-select-menu">
+          <a href="/CodyHouse/multi-level-accordion-menu/subscription"
+            class="btn btn-sm btn-with-count select-menu-button js-menu-target"
+            role="button"
+            aria-haspopup="true"
+            aria-expanded="false"
+            aria-label="Toggle repository notifications menu"
+            data-ga-click="Repository, click Watch settings, action:blob#show">
+            <span class="js-select-button">
+                <svg class="octicon octicon-eye v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
+                Watch
+            </span>
+          </a>
+          <a class="social-count js-social-count"
+            href="/CodyHouse/multi-level-accordion-menu/watchers"
+            aria-label="2 users are watching this repository">
+            2
+          </a>
+
+        <div class="select-menu-modal-holder">
+          <div class="select-menu-modal subscription-menu-modal js-menu-content">
+            <div class="select-menu-header js-navigation-enable" tabindex="-1">
+              <svg class="octicon octicon-x js-menu-close" role="img" aria-label="Close" viewBox="0 0 12 16" version="1.1" width="12" height="16"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/></svg>
+              <span class="select-menu-title">Notifications</span>
+            </div>
+
+              <div class="select-menu-list js-navigation-container" role="menu">
+
+                <div class="select-menu-item js-navigation-item selected" role="menuitem" tabindex="0">
+                  <svg class="octicon octicon-check select-menu-item-icon" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"/></svg>
+                  <div class="select-menu-item-text">
+                    <input type="radio" name="do" id="do_included" value="included" checked="checked" />
+                    <span class="select-menu-item-heading">Not watching</span>
+                    <span class="description">Be notified when participating or @mentioned.</span>
+                    <span class="js-select-button-text hidden-select-button-text">
+                      <svg class="octicon octicon-eye v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
+                      Watch
+                    </span>
+                  </div>
+                </div>
+
+                <div class="select-menu-item js-navigation-item " role="menuitem" tabindex="0">
+                  <svg class="octicon octicon-check select-menu-item-icon" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"/></svg>
+                  <div class="select-menu-item-text">
+                    <input type="radio" name="do" id="do_subscribed" value="subscribed" />
+                    <span class="select-menu-item-heading">Watching</span>
+                    <span class="description">Be notified of all conversations.</span>
+                    <span class="js-select-button-text hidden-select-button-text">
+                      <svg class="octicon octicon-eye v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"/></svg>
+                        Unwatch
+                    </span>
+                  </div>
+                </div>
+
+                <div class="select-menu-item js-navigation-item " role="menuitem" tabindex="0">
+                  <svg class="octicon octicon-check select-menu-item-icon" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"/></svg>
+                  <div class="select-menu-item-text">
+                    <input type="radio" name="do" id="do_ignore" value="ignore" />
+                    <span class="select-menu-item-heading">Ignoring</span>
+                    <span class="description">Never be notified.</span>
+                    <span class="js-select-button-text hidden-select-button-text">
+                      <svg class="octicon octicon-mute v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 2.81v10.38c0 .67-.81 1-1.28.53L3 10H1c-.55 0-1-.45-1-1V7c0-.55.45-1 1-1h2l3.72-3.72C7.19 1.81 8 2.14 8 2.81zm7.53 3.22l-1.06-1.06-1.97 1.97-1.97-1.97-1.06 1.06L11.44 8 9.47 9.97l1.06 1.06 1.97-1.97 1.97 1.97 1.06-1.06L13.56 8l1.97-1.97z"/></svg>
+                        Stop ignoring
+                    </span>
+                  </div>
+                </div>
+
+              </div>
+
+            </div>
+          </div>
+        </div>
+</form>
+  </li>
+
+  <li>
+    
+  <div class="js-toggler-container js-social-container starring-container ">
+    <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="starred js-social-form" action="/CodyHouse/multi-level-accordion-menu/unstar" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="sW7L4qkGGZdvKfoUvnLlMOAKWVR8eGbj/jTPm+hHfsJW1gU7VaCKsAVIViOC6fCTc5/QHiBBjZRN/FggZvYdAg==" />
+      <input type="hidden" name="context" value="repository"></input>
+      <button
+        type="submit"
+        class="btn btn-sm btn-with-count js-toggler-target"
+        aria-label="Unstar this repository" title="Unstar CodyHouse/multi-level-accordion-menu"
+        data-ga-click="Repository, click unstar button, action:blob#show; text:Unstar">
+        <svg class="octicon octicon-star v-align-text-bottom" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"/></svg>
+        Unstar
+      </button>
+        <a class="social-count js-social-count" href="/CodyHouse/multi-level-accordion-menu/stargazers"
+           aria-label="33 users starred this repository">
+          33
+        </a>
+</form>
+    <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="unstarred js-social-form" action="/CodyHouse/multi-level-accordion-menu/star" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="UNHd/LY5GVeg2s7HtGhNoEqfaOPnJP/fHvU73zxudOv4EbnY+573DgLhi+/Pu81mJZdRxExr6Ixqo8NHnRvbBg==" />
+      <input type="hidden" name="context" value="repository"></input>
+      <button
+        type="submit"
+        class="btn btn-sm btn-with-count js-toggler-target"
+        aria-label="Star this repository" title="Star CodyHouse/multi-level-accordion-menu"
+        data-ga-click="Repository, click star button, action:blob#show; text:Star">
+        <svg class="octicon octicon-star v-align-text-bottom" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"/></svg>
+        Star
+      </button>
+        <a class="social-count js-social-count" href="/CodyHouse/multi-level-accordion-menu/stargazers"
+           aria-label="33 users starred this repository">
+          33
+        </a>
+</form>  </div>
+
+  </li>
+
+  <li>
+          <details class="details-reset details-overlay details-overlay-dark d-inline-block float-left"
+            data-deferred-details-content-url="/CodyHouse/multi-level-accordion-menu/fork?fragment=1">
+            <summary class="btn btn-sm btn-with-count"
+              title="Fork your own copy of CodyHouse/multi-level-accordion-menu to your account"
+              data-ga-click="Repository, show fork modal, action:blob#show; text:Fork">
+              <svg class="octicon octicon-repo-forked v-align-text-bottom" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg>
+              Fork
+            </summary>
+            <details-dialog class="anim-fade-in fast Box Box--overlay d-flex flex-column">
+              <div class="Box-header">
+                <button class="Box-btn-octicon btn-octicon float-right" type="button" aria-label="Close dialog" data-close-dialog>
+                  <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/></svg>
+                </button>
+                <h3 class="Box-title">Where should we fork this repository?</h3>
+              </div>
+              <div class="Box-body overflow-auto text-center">
+                <include-fragment>
+                  <div class="octocat-spinner my-3" aria-label="Loading..."></div>
+                  <p class="f5 text-gray">If this dialog fails to load, you can visit <a href="/CodyHouse/multi-level-accordion-menu/fork">the fork page</a> directly.</p>
+                </include-fragment>
+              </div>
+            </details-dialog>
+          </details>
+
+    <a href="/CodyHouse/multi-level-accordion-menu/network/members" class="social-count"
+       aria-label="22 users forked this repository">
+      22
+    </a>
+  </li>
+</ul>
+
+      <h1 class="public ">
+  <svg class="octicon octicon-repo" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"/></svg>
+  <span class="author" itemprop="author"><a class="url fn" rel="author" href="/CodyHouse">CodyHouse</a></span><!--
+--><span class="path-divider">/</span><!--
+--><strong itemprop="name"><a data-pjax="#js-repo-pjax-container" href="/CodyHouse/multi-level-accordion-menu">multi-level-accordion-menu</a></strong>
+
+</h1>
+
+    </div>
+    
+<nav class="reponav js-repo-nav js-sidenav-container-pjax container"
+     itemscope
+     itemtype="http://schema.org/BreadcrumbList"
+     role="navigation"
+     data-pjax="#js-repo-pjax-container">
+
+  <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
+    <a class="js-selected-navigation-item selected reponav-item" itemprop="url" data-hotkey="g c" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches repo_packages /CodyHouse/multi-level-accordion-menu" href="/CodyHouse/multi-level-accordion-menu">
+      <svg class="octicon octicon-code" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"/></svg>
+      <span itemprop="name">Code</span>
+      <meta itemprop="position" content="1">
+</a>  </span>
+
+    <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
+      <a itemprop="url" data-hotkey="g i" class="js-selected-navigation-item reponav-item" data-selected-links="repo_issues repo_labels repo_milestones /CodyHouse/multi-level-accordion-menu/issues" href="/CodyHouse/multi-level-accordion-menu/issues">
+        <svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg>
+        <span itemprop="name">Issues</span>
+        <span class="Counter">0</span>
+        <meta itemprop="position" content="2">
+</a>    </span>
+
+  <span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
+    <a data-hotkey="g p" itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="repo_pulls checks /CodyHouse/multi-level-accordion-menu/pulls" href="/CodyHouse/multi-level-accordion-menu/pulls">
+      <svg class="octicon octicon-git-pull-request" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0 0 10 15a1.993 1.993 0 0 0 1-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v6.56A1.993 1.993 0 0 0 2 15a1.993 1.993 0 0 0 1-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"/></svg>
+      <span itemprop="name">Pull requests</span>
+      <span class="Counter">0</span>
+      <meta itemprop="position" content="3">
+</a>  </span>
+
+    <a data-hotkey="g b" class="js-selected-navigation-item reponav-item" data-selected-links="repo_projects new_repo_project repo_project /CodyHouse/multi-level-accordion-menu/projects" href="/CodyHouse/multi-level-accordion-menu/projects">
+      <svg class="octicon octicon-project" viewBox="0 0 15 16" version="1.1" width="15" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1z"/></svg>
+      Projects
+      <span class="Counter" >0</span>
+</a>
+
+
+    <a class="js-selected-navigation-item reponav-item" data-hotkey="g w" data-selected-links="repo_wiki /CodyHouse/multi-level-accordion-menu/wiki" href="/CodyHouse/multi-level-accordion-menu/wiki">
+      <svg class="octicon octicon-book" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M3 5h4v1H3V5zm0 3h4V7H3v1zm0 2h4V9H3v1zm11-5h-4v1h4V5zm0 2h-4v1h4V7zm0 2h-4v1h4V9zm2-6v9c0 .55-.45 1-1 1H9.5l-1 1-1-1H2c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h5.5l1 1 1-1H15c.55 0 1 .45 1 1zm-8 .5L7.5 3H2v9h6V3.5zm7-.5H9.5l-.5.5V12h6V3z"/></svg>
+      Wiki
+</a>
+  <a class="js-selected-navigation-item reponav-item" data-selected-links="repo_graphs repo_contributors dependency_graph pulse /CodyHouse/multi-level-accordion-menu/pulse" href="/CodyHouse/multi-level-accordion-menu/pulse">
+    <svg class="octicon octicon-graph" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M16 14v1H0V0h1v14h15zM5 13H3V8h2v5zm4 0H7V3h2v10zm4 0h-2V6h2v7z"/></svg>
+    Insights
+</a>
+
+</nav>
+
+
+  </div>
+
+<div class="container new-discussion-timeline experiment-repo-nav  ">
+  <div class="repository-content ">
+
+    
+  <a class="d-none js-permalink-shortcut" data-hotkey="y" href="/CodyHouse/multi-level-accordion-menu/blob/aaa363c89f1c7aa02d4c8da2a43acef0e250bc99/img/cd-icons.svg">Permalink</a>
+
+  <!-- blob contrib key: blob_contributors:v21:e1b9dd1fccbb119173dbb10fa35b8303 -->
+
+  
+
+  <div class="file-navigation">
+    
+<div class="select-menu branch-select-menu js-menu-container js-select-menu float-left">
+  <button class=" btn btn-sm select-menu-button js-menu-target css-truncate" data-hotkey="w"
+    
+    type="button" aria-label="Switch branches or tags" aria-expanded="false" aria-haspopup="true">
+      <i>Branch:</i>
+      <span class="js-select-button css-truncate-target">master</span>
+  </button>
+
+  <div class="select-menu-modal-holder js-menu-content js-navigation-container" data-pjax>
+
+    <div class="select-menu-modal">
+      <div class="select-menu-header">
+        <svg class="octicon octicon-x js-menu-close" role="img" aria-label="Close" viewBox="0 0 12 16" version="1.1" width="12" height="16"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/></svg>
+        <span class="select-menu-title">Switch branches/tags</span>
+      </div>
+
+      <div class="select-menu-filters">
+        <div class="select-menu-text-filter">
+          <input type="text" aria-label="Filter branches/tags" id="context-commitish-filter-field" class="form-control js-filterable-field js-navigation-enable" placeholder="Filter branches/tags">
+        </div>
+        <div class="select-menu-tabs">
+          <ul>
+            <li class="select-menu-tab">
+              <a href="#" data-tab-filter="branches" data-filter-placeholder="Filter branches/tags" class="js-select-menu-tab" role="tab">Branches</a>
+            </li>
+            <li class="select-menu-tab">
+              <a href="#" data-tab-filter="tags" data-filter-placeholder="Find a tag…" class="js-select-menu-tab" role="tab">Tags</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-tab-filter="branches" role="menu">
+
+        <div data-filterable-for="context-commitish-filter-field" data-filterable-type="substring">
+
+
+            <a class="select-menu-item js-navigation-item js-navigation-open selected"
+               href="/CodyHouse/multi-level-accordion-menu/blob/master/img/cd-icons.svg"
+               data-name="master"
+               data-skip-pjax="true"
+               rel="nofollow">
+              <svg class="octicon octicon-check select-menu-item-icon" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"/></svg>
+              <span class="select-menu-item-text css-truncate-target js-select-menu-filter-text">
+                master
+              </span>
+            </a>
+        </div>
+
+          <div class="select-menu-no-results">Nothing to show</div>
+      </div>
+
+      <div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-tab-filter="tags">
+        <div data-filterable-for="context-commitish-filter-field" data-filterable-type="substring">
+
+
+        </div>
+
+        <div class="select-menu-no-results">Nothing to show</div>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+    <div class="BtnGroup float-right">
+      <a href="/CodyHouse/multi-level-accordion-menu/find/master"
+            class="js-pjax-capture-input btn btn-sm BtnGroup-item"
+            data-pjax
+            data-hotkey="t">
+        Find file
+      </a>
+      <clipboard-copy for="blob-path" class="btn btn-sm BtnGroup-item">
+        Copy path
+      </clipboard-copy>
+    </div>
+    <div id="blob-path" class="breadcrumb">
+      <span class="repo-root js-repo-root"><span class="js-path-segment"><a data-pjax="true" href="/CodyHouse/multi-level-accordion-menu"><span>multi-level-accordion-menu</span></a></span></span><span class="separator">/</span><span class="js-path-segment"><a data-pjax="true" href="/CodyHouse/multi-level-accordion-menu/tree/master/img"><span>img</span></a></span><span class="separator">/</span><strong class="final-path">cd-icons.svg</strong>
+    </div>
+  </div>
+
+
+  <include-fragment src="/CodyHouse/multi-level-accordion-menu/contributors/master/img/cd-icons.svg" class="commit-tease commit-loader">
+    <div>
+      Fetching contributors&hellip;
+    </div>
+
+    <div class="commit-tease-contributors">
+        <img alt="" class="loader-loading float-left" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-32-EAF2F5.gif" width="16" height="16" />
+      <span class="loader-error">Cannot retrieve contributors at this time</span>
+    </div>
+</include-fragment>
+
+
+  <div class="file">
+    <div class="file-header">
+  <div class="file-actions">
+      <div class="BtnGroup">
+        <a class="btn btn-sm BtnGroup-item tooltipped tooltipped tooltipped-n source "
+          href="/CodyHouse/multi-level-accordion-menu/blob/master/img/cd-icons.svg?short_path=21dd230" aria-label="Display the source blob">
+          <svg class="octicon octicon-code" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"/></svg>
+        </a>
+        <a class="btn btn-sm BtnGroup-item tooltipped tooltipped-n rendered selected"
+          href="/CodyHouse/multi-level-accordion-menu/blob/master/img/cd-icons.svg" aria-label="Display the rendered blob">
+          <svg class="octicon octicon-file" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6 5H2V4h4v1zM2 8h7V7H2v1zm0 2h7V9H2v1zm0 2h7v-1H2v1zm10-7.5V14c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V2c0-.55.45-1 1-1h7.5L12 4.5zM11 5L8 2H1v12h10V5z"/></svg>
+        </a>
+      </div>
+
+    <div class="BtnGroup">
+      <a id="raw-url" class="btn btn-sm BtnGroup-item" href="/CodyHouse/multi-level-accordion-menu/raw/master/img/cd-icons.svg">Raw</a>
+        <a class="btn btn-sm js-update-url-with-hash BtnGroup-item" data-hotkey="b" href="/CodyHouse/multi-level-accordion-menu/blame/master/img/cd-icons.svg">Blame</a>
+      <a rel="nofollow" class="btn btn-sm BtnGroup-item" href="/CodyHouse/multi-level-accordion-menu/commits/master/img/cd-icons.svg">History</a>
+    </div>
+
+        <a class="btn-octicon tooltipped tooltipped-nw"
+           href="github-windows://openRepo/https://github.com/CodyHouse/multi-level-accordion-menu?branch=master&amp;filepath=img%2Fcd-icons.svg"
+           aria-label="Open this file in GitHub Desktop"
+           data-ga-click="Repository, open with desktop, type:windows">
+            <svg class="octicon octicon-device-desktop" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M15 2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 9H1V3h14v8z"/></svg>
+        </a>
+
+          <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="inline-form js-update-url-with-hash" action="/CodyHouse/multi-level-accordion-menu/edit/master/img/cd-icons.svg" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="UJQVa0cw0/sCBuf1NMJP3zfUyoTeNwEtALsGJB/V/e0vO8QW9n8nym38g5JiCTp4ZwdxRg0fxTvBTMODfGEl/A==" />
+            <button class="btn-octicon tooltipped tooltipped-nw" type="submit"
+              aria-label="Fork this project and edit the file" data-hotkey="e" data-disable-with>
+              <svg class="octicon octicon-pencil" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/></svg>
+            </button>
+</form>
+        <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="inline-form" action="/CodyHouse/multi-level-accordion-menu/delete/master/img/cd-icons.svg" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="Q8srAb1KqrObAJzQ+bFopqQAuOLGqx3zyo2Ly/b2AzS21slJvOK4grTt1NGmLWFiMlSyMb5OL71NSq4yooyhKQ==" />
+          <button class="btn-octicon btn-octicon-danger tooltipped tooltipped-nw" type="submit"
+            aria-label="Fork this project and delete the file" data-disable-with>
+            <svg class="octicon octicon-trashcan" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/></svg>
+          </button>
+</form>  </div>
+
+  <div class="file-info">
+      27 lines (26 sloc)
+      <span class="file-info-divider"></span>
+    1.68 KB
+  </div>
+</div>
+
+    
+
+  <div itemprop="text" class="blob-wrapper data type-svg">
+      
+  <div class="render-wrapper">
+    <div class="render-container is-render-pending js-render-target "
+      data-identity="4585af61-eb1a-4d6f-9245-5cdac9f8352a"
+      data-host="https://render.githubusercontent.com"
+      data-type="svg">
+      <img class="octospinner" alt="" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-128.gif" width="64" height="64" />
+      <div class="render-viewer-error">Sorry, something went wrong. <a href="https://github.com/CodyHouse/multi-level-accordion-menu/blob/master/img/cd-icons.svg">Reload?</a></div>
+      <div class="render-viewer-fatal">Sorry, we cannot display this file.</div>
+      <div class="render-viewer-invalid">Sorry, this file is invalid so it cannot be displayed.</div>
+      <iframe class="render-viewer" src="https://render.githubusercontent.com/view/svg?commit=aaa363c89f1c7aa02d4c8da2a43acef0e250bc99&amp;enc_url=68747470733a2f2f7261772e67697468756275736572636f6e74656e742e636f6d2f436f6479486f7573652f6d756c74692d6c6576656c2d6163636f7264696f6e2d6d656e752f616161333633633839663163376161303264346338646132613433616365663065323530626339392f696d672f63642d69636f6e732e737667&amp;nwo=CodyHouse%2Fmulti-level-accordion-menu&amp;path=img%2Fcd-icons.svg&amp;repository_id=43811396&amp;repository_type=Repository#4585af61-eb1a-4d6f-9245-5cdac9f8352a" sandbox="allow-scripts allow-same-origin allow-top-navigation ">Viewer requires iframe.</iframe>
+    </div>
+  </div>
+
+  </div>
+
+  </div>
+
+  <details class="details-reset details-overlay details-overlay-dark">
+    <summary data-hotkey="l" aria-label="Jump to line"></summary>
+    <details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast linejump" aria-label="Jump to line">
+      <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-jump-to-line-form Box-body d-flex" action="" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="&#x2713;" />
+        <input class="form-control flex-auto mr-3 linejump-input js-jump-to-line-field" type="text" placeholder="Jump to line&hellip;" aria-label="Jump to line" autofocus>
+        <button type="submit" class="btn" data-close-dialog>Go</button>
+</form>    </details-dialog>
+  </details>
+
+
+  </div>
+  <div class="modal-backdrop js-touch-events"></div>
+</div>
+
+    </div>
+  </div>
+
+  </div>
+
+        
+<div class="footer container-lg px-3" role="contentinfo">
+  <div class="position-relative d-flex flex-justify-between pt-6 pb-2 mt-6 f6 text-gray border-top border-gray-light ">
+    <ul class="list-style-none d-flex flex-wrap ">
+      <li class="mr-3">&copy; 2018 <span title="0.33395s from unicorn-67c4d5f744-r55dc">GitHub</span>, Inc.</li>
+        <li class="mr-3"><a data-ga-click="Footer, go to terms, text:terms" href="https://github.com/site/terms">Terms</a></li>
+        <li class="mr-3"><a data-ga-click="Footer, go to privacy, text:privacy" href="https://github.com/site/privacy">Privacy</a></li>
+        <li class="mr-3"><a href="https://help.github.com/articles/github-security/" data-ga-click="Footer, go to security, text:security">Security</a></li>
+        <li class="mr-3"><a href="https://status.github.com/" data-ga-click="Footer, go to status, text:status">Status</a></li>
+        <li><a data-ga-click="Footer, go to help, text:help" href="https://help.github.com">Help</a></li>
+    </ul>
+
+    <a aria-label="Homepage" title="GitHub" class="footer-octicon mr-lg-4" href="https://github.com">
+      <svg height="24" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="24" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
+</a>
+   <ul class="list-style-none d-flex flex-wrap ">
+        <li class="mr-3"><a data-ga-click="Footer, go to contact, text:contact" href="https://github.com/contact">Contact GitHub</a></li>
+        <li class="mr-3"><a href="https://github.com/pricing" data-ga-click="Footer, go to Pricing, text:Pricing">Pricing</a></li>
+      <li class="mr-3"><a href="https://developer.github.com" data-ga-click="Footer, go to api, text:api">API</a></li>
+      <li class="mr-3"><a href="https://training.github.com" data-ga-click="Footer, go to training, text:training">Training</a></li>
+        <li class="mr-3"><a href="https://blog.github.com" data-ga-click="Footer, go to blog, text:blog">Blog</a></li>
+        <li><a data-ga-click="Footer, go to about, text:about" href="https://github.com/about">About</a></li>
+
+    </ul>
+  </div>
+  <div class="d-flex flex-justify-center pb-6">
+    <span class="f6 text-gray-light"></span>
+  </div>
+</div>
+
+
+
+  <div id="ajax-error-message" class="ajax-error-message flash flash-error">
+    <svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"/></svg>
+    <button type="button" class="flash-close js-ajax-error-dismiss" aria-label="Dismiss error">
+      <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/></svg>
+    </button>
+    You can’t perform that action at this time.
+  </div>
+
+
+    
+    <script crossorigin="anonymous" integrity="sha512-IC5Ai6c7cUBfMx54JUAsIjA7VroipzkizlZ8F6/0efsGGyZStweZV7bX9bxSFL07nUNLfwrKSEysVIijX+CeUw==" type="application/javascript" src="https://assets-cdn.github.com/assets/frameworks-5874e38105ec062c740350eeb96bdd8a.js"></script>
+    
+    <script crossorigin="anonymous" async="async" integrity="sha512-MsXVzDqDi5b0jU60Tq39xkgfoNu3ehfnpdo2TPM99QKvNjrx0gSHZS5fvQ8PcxqMtHugMifkKyFfgMc9UUe6/Q==" type="application/javascript" src="https://assets-cdn.github.com/assets/github-f2f02359503c1eb68287242b53372803.js"></script>
+    
+    
+    
+  <div class="js-stale-session-flash stale-session-flash flash flash-warn flash-banner d-none">
+    <svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"/></svg>
+    <span class="signed-in-tab-flash">You signed in with another tab or window. <a href="">Reload</a> to refresh your session.</span>
+    <span class="signed-out-tab-flash">You signed out in another tab or window. <a href="">Reload</a> to refresh your session.</span>
+  </div>
+  <div class="facebox" id="facebox" style="display:none;">
+  <div class="facebox-popup">
+    <div class="facebox-content" role="dialog" aria-labelledby="facebox-header" aria-describedby="facebox-description">
+    </div>
+    <button type="button" class="facebox-close js-facebox-close" aria-label="Close modal">
+      <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/></svg>
+    </button>
+  </div>
+</div>
+
+  <template id="site-details-dialog">
+  <details class="details-reset details-overlay details-overlay-dark lh-default text-gray-dark" open>
+    <summary aria-haspopup="dialog" aria-label="Close dialog"></summary>
+    <details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast">
+      <button class="Box-btn-octicon m-0 btn-octicon position-absolute right-0 top-0" type="button" aria-label="Close dialog" data-close-dialog>
+        <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/></svg>
+      </button>
+      <div class="octocat-spinner my-6 js-details-dialog-spinner"></div>
+    </details-dialog>
+  </details>
+</template>
+
+  <div class="Popover js-hovercard-content position-absolute" style="display: none; outline: none;" tabindex="0">
+  <div class="Popover-message Popover-message--bottom-left Popover-message--large Box box-shadow-large" style="width:360px;">
+  </div>
+</div>
+
+<div id="hovercard-aria-description" class="sr-only">
+  Press h to open a hovercard with more details.
+</div>
+
+
+  </body>
+</html>
+

From ca58ceb6d4e6e071e221fa638e4cd2c0d12e90d3 Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Fri, 21 Sep 2018 16:32:01 +0200
Subject: [PATCH 10/15] somehow working

---
 static/css/styles2.css | 75 ++++++++++--------------------------------
 1 file changed, 17 insertions(+), 58 deletions(-)

diff --git a/static/css/styles2.css b/static/css/styles2.css
index a82a759f..836eadec 100644
--- a/static/css/styles2.css
+++ b/static/css/styles2.css
@@ -45,10 +45,10 @@
     }
     aside .cd-accordion-menu {
         width: 90%;
-        max-width: 600px;
+/*        max-width: 600px; */
         background: #4d5158;
-        margin: 4em auto;
-        box-shadow: 0 4px 40px #70ac76;
+/*        margin: 4em auto; */
+/*        box-shadow: 0 4px 40px #70ac76; */
     }
     
     aside .cd-accordion-menu ul {
@@ -72,18 +72,19 @@
     aside .cd-accordion-menu label, .cd-accordion-menu a {
         position: relative;
         display: block;
-        padding: 18px 18px 18px 64px;
+/*        padding: 18px 18px 18px 64px; */
         background: #4d5158;
-        box-shadow: inset 0 -1px #555960;
         color: #ffffff;
-        font-size: 1.6rem;
+/*        font-size: 1.6rem; */
     }
 
-    aside .no-touch .cd-accordion-menu label:hover, .no-touch .cd-accordion-menu a:hover {
+    aside .no-touch .cd-accordion-menu label:hover, aside .no-touch .cd-accordion-menu a:hover {
         background: #52565d;
     }
 
-    aside .cd-accordion-menu label::before, .cd-accordion-menu label::after, .cd-accordion-menu a::after {
+    aside .cd-accordion-menu label::before,
+    aside .cd-accordion-menu label::after,
+    aside .cd-accordion-menu a::after {
         /* icons */
         content: '';
         display: inline-block;
@@ -102,7 +103,7 @@
         cursor: pointer;
     }
     
-    aside .cd-accordion-menu label::before, .cd-accordion-menu label::after {
+    aside .cd-accordion-menu label::before, aside .cd-accordion-menu label::after {
         background-image: url(/static/img/cd-icons.svg);
         background-repeat: no-repeat;
     }
@@ -155,11 +156,11 @@
     aside .cd-accordion-menu ul a {
         background: #35383d;
         box-shadow: inset 0 -1px #41444a;
-        padding-left: 82px;
+        padding-left: 0;
     }
     
-    aside .no-touch .cd-accordion-menu ul label:hover, aside .no-touch
-                                                             .cd-accordion-menu ul a:hover {
+    aside .no-touch .cd-accordion-menu ul label:hover,
+    aside .no-touch .cd-accordion-menu ul a:hover {
         background: #3c3f45;
     }
     
@@ -179,7 +180,7 @@
     }
     
     aside .cd-accordion-menu ul ul label,
-    .cd-accordion-menu ul ul a {
+    aside .cd-accordion-menu ul ul a {
         padding-left: 100px;
     }
     
@@ -188,7 +189,7 @@
     }
     
     aside .cd-accordion-menu ul ul label::after,
-    .cd-accordion-menu ul ul a::after {
+    aside .cd-accordion-menu ul ul a::after {
         left: 77px;
     }
     
@@ -245,7 +246,8 @@
 }
 .side {
   grid-area: sidebar;
-  background-color: #a0f6aa;
+  background: #4d5158;
+
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;/*  background: #4d5158; */
 }
@@ -328,49 +330,6 @@
      flex-direction: row; 
    }
 
-   aside .cd-accordion-menu label, .cd-accordion-menu a {
-       padding: 24px 24px 24px 82px;
-       font-size: 1.9rem;
-   }
-   aside .cd-accordion-menu label::before {
-       left: 24px;
-   }
-   aside .cd-accordion-menu label::after {
-       left: 53px;
-   }
-  aside .cd-accordion-menu ul label,
-  aside .cd-accordion-menu ul a {
-      padding-left: 106px;
-  }
-  aside .cd-accordion-menu ul label::before {
-      left: 48px;
-  }
-  aside .cd-accordion-menu ul label::after,
-  aside .cd-accordion-menu ul a::after {
-    left: 77px;
-  }
-  aside .cd-accordion-menu ul ul label,
-  aside .cd-accordion-menu ul ul a {
-    padding-left: 130px;
-  }
-  aside .cd-accordion-menu ul ul label::before {
-    left: 72px;
-  }
-  aside .cd-accordion-menu ul ul label::after,
-  aside .cd-accordion-menu ul ul a::after {
-    left: 101px;
-  }
-  aside .cd-accordion-menu ul ul ul label,
-  aside .cd-accordion-menu ul ul ul a {
-      padding-left: 154px;
-  }
-  aside .cd-accordion-menu ul ul ul label::before {
-      left: 96px;
-  }
-  aside .cd-accordion-menu ul ul ul label::after,
-  aside .cd-accordion-menu ul ul ul a::after {
-      left: 125px;
-  }
 
 
 }

From dea2b5f0d710ec5eb70775cd49993cb067d558bc Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Fri, 21 Sep 2018 17:27:30 +0200
Subject: [PATCH 11/15] menu sort of working

---
 static/css/styles2.css | 155 +++++++++++------------------------------
 1 file changed, 41 insertions(+), 114 deletions(-)

diff --git a/static/css/styles2.css b/static/css/styles2.css
index 836eadec..ec3087b6 100644
--- a/static/css/styles2.css
+++ b/static/css/styles2.css
@@ -33,21 +33,29 @@
 
     aside ul {
         list-style: none;
-        margin: 0;
+        margin: 5px;
         padding: 0;
 
 
-    } 
+    }
+
+    aside li {
+        margin-left: 0;
+    }
+
+    aside li li {
+        margin-left: 30px;
+    }
 
     aside a {
         color: #a0f6aa;
         text-decoration: none;
     }
     aside .cd-accordion-menu {
-        width: 90%;
-/*        max-width: 600px; */
+        width: 100%;
+        max-width: 600px; 
         background: #4d5158;
-/*        margin: 4em auto; */
+/*        margin: 4em auto;  */
 /*        box-shadow: 0 4px 40px #70ac76; */
     }
     
@@ -69,81 +77,44 @@
         opacity: 0;
     }    
 
-    aside .cd-accordion-menu label, .cd-accordion-menu a {
+    aside .cd-accordion-menu label,
+    aside .cd-accordion-menu a {
         position: relative;
         display: block;
-/*        padding: 18px 18px 18px 64px; */
         background: #4d5158;
         color: #ffffff;
 /*        font-size: 1.6rem; */
     }
 
-    aside .no-touch .cd-accordion-menu label:hover, aside .no-touch .cd-accordion-menu a:hover {
-        background: #52565d;
-    }
-
-    aside .cd-accordion-menu label::before,
-    aside .cd-accordion-menu label::after,
-    aside .cd-accordion-menu a::after {
+    aside .cd-accordion-menu label::before
+    {
         /* icons */
-        content: '';
+        content: 'V';
         display: inline-block;
         width: 16px;
         height: 16px;
-        position: absolute;
-        top: 50%;
-        -webkit-transform: translateY(-50%);
-        -moz-transform: translateY(-50%);
-        -ms-transform: translateY(-50%);
-        -o-transform: translateY(-50%);
-        transform: translateY(-50%);
+        -webkit-transform: translateY(-50%)  rotate(-90deg);
+        -moz-transform: translateY(-50%) rotate(-90deg);
+        -ms-transform: translateY(-50%) rotate(-90deg);
+        -o-transform: translateY(-50%) rotate(-90deg);
+        transform: translateY(-50%) rotate(-90deg); 
+        
     }
 
     aside .cd-accordion-menu label {
         cursor: pointer;
     }
-    
-    aside .cd-accordion-menu label::before, aside .cd-accordion-menu label::after {
-        background-image: url(/static/img/cd-icons.svg);
-        background-repeat: no-repeat;
-    }
 
-    aside .cd-accordion-menu label::before {
-        /* arrow icon */
-        left: 18px;
-        background-position: 0 0;
-        -webkit-transform: translateY(-50%) rotate(-90deg);
-        -moz-transform: translateY(-50%) rotate(-90deg);
-        -ms-transform: translateY(-50%) rotate(-90deg);
-        -o-transform: translateY(-50%) rotate(-90deg);
-        transform: translateY(-50%) rotate(-90deg);
-    }
-
-    aside .cd-accordion-menu label::after {
-        /* folder icons */
-        left: 41px;
-        background-position: -16px 0;
-    }
-    
-    aside .cd-accordion-menu a::after {
-        /* image icon */
-        left: 36px;
-        background: url(/static/img/cd-icons.svg) no-repeat -48px 0;
-    }
 
     aside .cd-accordion-menu input[type=checkbox]:checked + label::before {
         /* rotate arrow */
-        -webkit-transform: translateY(-50%);
-        -moz-transform: translateY(-50%);
-        -ms-transform: translateY(-50%);
-        -o-transform: translateY(-50%);
-        transform: translateY(-50%);
+        -webkit-transform: translateY(0%) ;
+        -moz-transform: translateY(0%) ;
+        -ms-transform: translateY(0%) ;
+        -o-transform: translateY(0%) ;
+        transform: translateY(0%) ;
     }
     
-    aside .cd-accordion-menu input[type=checkbox]:checked + label::after {
-        /* show open folder icon if item is checked */
-        background-position: -32px 0;
-    }
     
     aside .cd-accordion-menu input[type=checkbox]:checked + label + ul,
     aside .cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
@@ -154,57 +125,10 @@
     
     aside .cd-accordion-menu ul label,
     aside .cd-accordion-menu ul a {
-        background: #35383d;
-        box-shadow: inset 0 -1px #41444a;
-        padding-left: 0;
+        background: #35383d; 
+        padding-left: 30px;
     }
-    
-    aside .no-touch .cd-accordion-menu ul label:hover,
-    aside .no-touch .cd-accordion-menu ul a:hover {
-        background: #3c3f45;
-    }
-    
-    aside .cd-accordion-menu > li:last-of-type > label,
-    aside .cd-accordion-menu > li:last-of-type > a,
-    aside .cd-accordion-menu > li > ul > li:last-of-type label,
-    aside .cd-accordion-menu > li > ul > li:last-of-type a {
-        box-shadow: none;
-    }
-    
-    aside .cd-accordion-menu ul label::before {
-        left: 36px;
-    }
-    aside .cd-accordion-menu ul label::after,
-    aside .cd-accordion-menu ul a::after {
-        left: 59px;
-    }
-    
-    aside .cd-accordion-menu ul ul label,
-    aside .cd-accordion-menu ul ul a {
-        padding-left: 100px;
-    }
-    
-    aside .cd-accordion-menu ul ul label::before {
-        left: 54px;
-    }
-    
-    aside .cd-accordion-menu ul ul label::after,
-    aside .cd-accordion-menu ul ul a::after {
-        left: 77px;
-    }
-    
-    aside .cd-accordion-menu ul ul ul label,
-    aside .cd-accordion-menu ul ul ul a {
-        padding-left: 118px;
-    }
-    aside .cd-accordion-menu ul ul ul label::before {
-        left: 72px;
-    }
-    aside .cd-accordion-menu ul ul ul label::after,
-    aside .cd-accordion-menu ul ul ul a::after {
-        left: 95px;
-    }
-    
+        
     user ul {
         list-style: none;
         margin: 0;
@@ -311,13 +235,13 @@
 
 @media (min-width: 768px) {
   .wrapper {
-    grid-template-columns: 1fr 5fr 1fr;
+    grid-template-columns: 1fr 4fr 1fr;
     grid-template-areas: 
-    "header header  header user"
-        "nav nav nav nav"
-      "sidebar    content content content"
-      "sidebar    content content content"
-      "ad footer  footer footer"
+    "header header  user"
+        "nav nav  nav"
+      "sidebar     content content"
+      "sidebar     content content"
+      "ad  footer footer"
    }
 
   nav ul {
@@ -334,9 +258,12 @@
 
 }
 
+
 aside .cd-accordion-menu.animated label::before {
   /* this class is used if you're using jquery to animate the accordion */
   -webkit-transition: -webkit-transform 0.3s;
   -moz-transition: -moz-transform 0.3s;
   transition: transform 0.3s;
 }
+
+ 

From 6a29211f9ec6724796f749f18c0fe002e95a89d9 Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Fri, 21 Sep 2018 21:43:31 +0200
Subject: [PATCH 12/15] correct hover behavior

---
 rowers/templates/redesign.html |   2 +-
 static/css/styles2.css         | 117 ++++++++++++++++++++++-----------
 static/js/menu.js              |  16 +++++
 templates/newbase.html         |  23 +++++++
 4 files changed, 117 insertions(+), 41 deletions(-)
 create mode 100644 static/js/menu.js

diff --git a/rowers/templates/redesign.html b/rowers/templates/redesign.html
index 4b3498e3..48e496e5 100644
--- a/rowers/templates/redesign.html
+++ b/rowers/templates/redesign.html
@@ -12,6 +12,7 @@
 
 {% block sidebar %}
 <ul class="cd-accordion-menu animated">
+  <li><a href="#0">Link</a></li>
   <li class="has-children">
     <input type="checkbox" name ="group-1" id="group-1" checked>
     <label for="group-1">Group 1</label>
@@ -24,7 +25,6 @@
 	<ul>
 	  <li><a href="#0">Link</a></li>
 	  <li><a href="#0">Link</a></li>
-	  <li><a href="#0">Link</a></li>
 	</ul>
       </li>
       <li class="has-children">
diff --git a/static/css/styles2.css b/static/css/styles2.css
index ec3087b6..74acb81a 100644
--- a/static/css/styles2.css
+++ b/static/css/styles2.css
@@ -8,8 +8,9 @@
 
     
     .wrapper > * {
-    /*    border: 2px solid #f08c00; */
-        padding: 5px;
+        /*    border: 2px solid #f08c00; */
+        border 0;
+        padding: 5px; 
     }
 
     a {
@@ -20,8 +21,8 @@
     nav ul {
         list-style: none;
         margin: 0;
-      display: flex;
-      justify-content: space-between;
+        display: flex;
+        justify-content: space-between;
         padding: 0.2em 0.2em 0.2em 0.2em;
     }
 
@@ -32,31 +33,69 @@
     }
 
     aside ul {
+        margin-bottom: 0;
+        left: 15px;
+    }
+
+    aside ul label,
+    aside ul a {
+        padding-left: 15px;
+    }
+
+    aside ul ul label,
+    aside ul ul a {
+        padding-left: 30px;
+    }
+    
+    aside ul ul ul label,
+    aside ul ul ul a {
+        padding-left: 45px;
+    }
+
+    aside ul ul ul ul label,
+    aside ul ul ul ul a {
+        padding-left: 60px;
+    }
+    
+    aside li,
+    aside a,
+    aside ul label,
+    aside ul li,
+    aside ul a,
+    aside ul ul label,
+    aside ul ul li,
+    aside ul ul a,
+    aside ul ul ul label,
+    aside ul ul ul li,
+    aside ul ul ul a {
         list-style: none;
-        margin: 5px;
-        padding: 0;
-
-
+        margin: 0;
+        background: #35383d;   
     }
 
-    aside li {
-        margin-left: 0;
+
+    aside ul label:hover,
+    aside ul a:hover,
+    aside ul ul label:hover,
+    aside ul ul a:hover,
+    aside ul ul ul label:hover,
+    aside ul ul ul a:hover {
+        background: #4d5158; 
     }
 
-    aside li li {
-        margin-left: 30px;
-    }
 
     aside a {
         color: #a0f6aa;
         text-decoration: none;
     }
+
+
+
+        
     aside .cd-accordion-menu {
         width: 100%;
-        max-width: 600px; 
-        background: #4d5158;
-/*        margin: 4em auto;  */
-/*        box-shadow: 0 4px 40px #70ac76; */
+        max-width: 600px;        
+        background: #35383d;   
     }
     
     aside .cd-accordion-menu ul {
@@ -81,38 +120,42 @@
     aside .cd-accordion-menu a {
         position: relative;
         display: block;
-        background: #4d5158;
         color: #ffffff;
-/*        font-size: 1.6rem; */
+        font-size: 1.2em; 
     }
 
     aside .cd-accordion-menu label::before
     {
         /* icons */
-        content: 'V';
+        font:  normal normal normal 1.2em/1 FontAwesome;
+        font-size: inherit;
+        text-rendering: auto;
+        content: '\f0da';
         display: inline-block;
         width: 16px;
         height: 16px;
-        -webkit-transform: translateY(-50%)  rotate(-90deg);
-        -moz-transform: translateY(-50%) rotate(-90deg);
-        -ms-transform: translateY(-50%) rotate(-90deg);
-        -o-transform: translateY(-50%) rotate(-90deg);
-        transform: translateY(-50%) rotate(-90deg); 
         
+        -webkit-transform: translateY(0%);
+        -moz-transform: translateY(0%);
+        -ms-transform:  translateY(0%);
+        -o-transform: translateY(0%);
+        transform: translateY(0%); 
     }
 
     aside .cd-accordion-menu label {
         cursor: pointer;
+        background: #35383d;
     }
 
 
     aside .cd-accordion-menu input[type=checkbox]:checked + label::before {
         /* rotate arrow */
-        -webkit-transform: translateY(0%) ;
-        -moz-transform: translateY(0%) ;
-        -ms-transform: translateY(0%) ;
-        -o-transform: translateY(0%) ;
-        transform: translateY(0%) ;
+        -webkit-transform: translateY(20%) rotate(90deg);
+        -moz-transform: translateY(20%) rotate(90deg);
+        -ms-transform:  translateY(20%) rotate(90deg);
+        -o-transform: translateY(20%) rotate(90deg);
+        transform: translateY(20%) rotate(90deg); 
+
     }
     
     
@@ -123,12 +166,8 @@
         display: block;
     }
     
-    aside .cd-accordion-menu ul label,
-    aside .cd-accordion-menu ul a {
-        background: #35383d; 
-        padding-left: 30px;
-    }
-        
+
+    
     user ul {
         list-style: none;
         margin: 0;
@@ -170,10 +209,8 @@
 }
 .side {
   grid-area: sidebar;
-  background: #4d5158;
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;/*  background: #4d5158; */
+  background: #35383d;
+  padding: 0;
 }
 
 .ad {
diff --git a/static/js/menu.js b/static/js/menu.js
new file mode 100644
index 00000000..e39f0702
--- /dev/null
+++ b/static/js/menu.js
@@ -0,0 +1,16 @@
+$(document).ready(function(){
+    var accordionsMenu = $('.cd-accordion-menu');
+    
+    if( accordionsMenu.length > 0 ) {
+	
+	accordionsMenu.each(function(){
+	    var accordion = $(this);
+	    //detect change in the input[type="checkbox"] value
+	    accordion.on('change', 'input[type="checkbox"]', function(){
+		var checkbox = $(this);
+		console.log(checkbox.prop('checked'));
+		( checkbox.prop('checked') ) ? checkbox.siblings('ul').attr('style', 'display:none;').slideDown(300) : checkbox.siblings('ul').attr('style', 'display:block;').slideUp(300);
+	    });
+	});
+    }
+});
diff --git a/templates/newbase.html b/templates/newbase.html
index 965e1248..0b0e2e94 100644
--- a/templates/newbase.html
+++ b/templates/newbase.html
@@ -91,6 +91,29 @@
       
       return t;
       }(document, "script", "twitter-wjs"));</script>
+
+    <script type='text/javascript'
+            src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
+    </script>
+    <script>
+      $(document).ready(function(){
+    var accordionsMenu = $('.cd-accordion-menu');
+    
+    if( accordionsMenu.length > 0 ) {
+	
+	accordionsMenu.each(function(){
+	    var accordion = $(this);
+	    //detect change in the input[type="checkbox"] value
+	    accordion.on('change', 'input[type="checkbox"]', function(){
+		var checkbox = $(this);
+		console.log(checkbox.prop('checked'));
+		( checkbox.prop('checked') ) ? checkbox.siblings('ul').attr('style', 'display:none;').slideDown(300) : checkbox.siblings('ul').attr('style', 'display:block;').slideUp(300);
+	    });
+	});
+    }
+});
+
+    </script> <!-- Resource jQuery -->
     {% analytical_head_bottom %}
   </head>
   

From 1f4fa74fb1ea973487c3ca2fd8a4b256c6766674 Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Fri, 21 Sep 2018 22:22:17 +0200
Subject: [PATCH 13/15] margins

---
 rowers/templates/menu_demo.html     | 77 ++++++++++++++++++++++++++++
 rowers/templates/menu_workouts.html | 19 +++++++
 rowers/templates/redesign.html      | 79 +----------------------------
 static/css/styles2.css              | 21 +++++++-
 4 files changed, 116 insertions(+), 80 deletions(-)
 create mode 100644 rowers/templates/menu_demo.html
 create mode 100644 rowers/templates/menu_workouts.html

diff --git a/rowers/templates/menu_demo.html b/rowers/templates/menu_demo.html
new file mode 100644
index 00000000..e742af16
--- /dev/null
+++ b/rowers/templates/menu_demo.html
@@ -0,0 +1,77 @@
+<ul class="cd-accordion-menu animated">
+  <li><a href="#0">Link</a></li>
+  <li class="has-children">
+    <input type="checkbox" name ="group-1" id="group-1" checked>
+    <label for="group-1">Group 1</label>
+    
+    <ul>
+      <li class="has-children">
+      	<input type="checkbox" name ="sub-group-1" id="sub-group-1">
+	<label for="sub-group-1">Sub Group 1</label>
+
+	<ul>
+	  <li><a href="#0">Link</a></li>
+	  <li><a href="#0">Link</a></li>
+	</ul>
+      </li>
+      <li class="has-children">
+      	<input type="checkbox" name ="sub-group-2" id="sub-group-2">
+	<label for="sub-group-2">Sub Group 2</label>
+        
+	<ul>
+	  <li class="has-children">
+	    <input type="checkbox" name ="sub-group-level-3" id="sub-group-level-3">
+	    <label for="sub-group-level-3">Sub Group Level 3</label>
+            
+	    <ul>
+	      <li><a href="#0">Link</a></li>
+	      <li><a href="#0">Link</a></li>
+	    </ul>
+	  </li>
+	  <li><a href="#0">Link</a></li>
+	</ul>
+      </li>
+      <li><a href="#0">Link</a></li>
+      <li><a href="#0">Link</a></li>
+    </ul>
+  </li>
+  
+  <li class="has-children">
+    <input type="checkbox" name ="group-2" id="group-2">
+    <label for="group-2">Group 2</label>
+    
+    <ul>
+      <li><a href="#0">Link</a></li>
+      <li><a href="#0">Link</a></li>
+    </ul>
+  </li>
+  
+  <li class="has-children">
+    <input type="checkbox" name ="group-3" id="group-3">
+    <label for="group-3">Group 3</label>
+    
+    <ul>
+      <li><a href="#0">Link</a></li>
+      <li><a href="#0">Link</a></li>
+    </ul>
+  </li>
+  
+  <li class="has-children">
+    <input type="checkbox" name ="group-4" id="group-4">
+    <label for="group-4">Group 4</label>
+    
+    <ul>
+      <li class="has-children">
+	<input type="checkbox" name ="sub-group-3" id="sub-group-3">
+	<label for="sub-group-3">Sub Group 3</label>
+        
+	<ul>
+	  <li><a href="#0">Link</a></li>
+	  <li><a href="#0">Link</a></li>
+	</ul>
+      </li>
+      <li><a href="#0">Link</a></li>
+      <li><a href="#0">Link</a></li>
+    </ul>
+  </li>
+</ul> <!-- cd-accordion-menu -->
diff --git a/rowers/templates/menu_workouts.html b/rowers/templates/menu_workouts.html
new file mode 100644
index 00000000..c414ff5a
--- /dev/null
+++ b/rowers/templates/menu_workouts.html
@@ -0,0 +1,19 @@
+<ul class="cd-accordion-menu animated">
+  <li><a href="#0"><i class="fas fa-clipboard-list fa-fw"></i>&nbsp;Workouts List</a></li>
+  <li><a href="#0"><i class="fas fa-chart-pie fa-fw"></i>&nbsp;Charts</a></li>
+  <li><a href="#0"><i class="fas fa-balance-scale fa-fw"></i>&nbsp;Compare</a></li>  
+  <li><a href="#0"><i class="fas fa-file-upload fa-fw"></i>&nbsp;Upload</a></li>
+  <li class="has-children">
+    <input type="checkbox" name ="group-1" id="group-1">
+    <label for="group-1"><i class="fas fa-cloud-download fa-fw"></i>&nbsp;Import</label>
+    
+    <ul>
+      <li><a href="#0">Concept2</a></li>
+      <li><a href="#0">Strava</a></li>
+      <li><a href="#0">RunKeeper</a></li>
+      <li><a href="#0">SportTracks</a></li>
+      <li><a href="#0">MapMyFitness</a></li>
+      <li><a href="#0">Polar</a></li>
+    </ul>
+  </li>
+</ul> <!-- cd-accordion-menu -->
diff --git a/rowers/templates/redesign.html b/rowers/templates/redesign.html
index 48e496e5..79779d35 100644
--- a/rowers/templates/redesign.html
+++ b/rowers/templates/redesign.html
@@ -11,82 +11,5 @@
 {% endblock %}
 
 {% block sidebar %}
-<ul class="cd-accordion-menu animated">
-  <li><a href="#0">Link</a></li>
-  <li class="has-children">
-    <input type="checkbox" name ="group-1" id="group-1" checked>
-    <label for="group-1">Group 1</label>
-    
-    <ul>
-      <li class="has-children">
-      	<input type="checkbox" name ="sub-group-1" id="sub-group-1">
-	<label for="sub-group-1">Sub Group 1</label>
-
-	<ul>
-	  <li><a href="#0">Link</a></li>
-	  <li><a href="#0">Link</a></li>
-	</ul>
-      </li>
-      <li class="has-children">
-      	<input type="checkbox" name ="sub-group-2" id="sub-group-2">
-	<label for="sub-group-2">Sub Group 2</label>
-        
-	<ul>
-	  <li class="has-children">
-	    <input type="checkbox" name ="sub-group-level-3" id="sub-group-level-3">
-	    <label for="sub-group-level-3">Sub Group Level 3</label>
-            
-	    <ul>
-	      <li><a href="#0">Link</a></li>
-	      <li><a href="#0">Link</a></li>
-	    </ul>
-	  </li>
-	  <li><a href="#0">Link</a></li>
-	</ul>
-      </li>
-      <li><a href="#0">Link</a></li>
-      <li><a href="#0">Link</a></li>
-    </ul>
-  </li>
-  
-  <li class="has-children">
-    <input type="checkbox" name ="group-2" id="group-2">
-    <label for="group-2">Group 2</label>
-    
-    <ul>
-      <li><a href="#0">Link</a></li>
-      <li><a href="#0">Link</a></li>
-    </ul>
-  </li>
-  
-  <li class="has-children">
-    <input type="checkbox" name ="group-3" id="group-3">
-    <label for="group-3">Group 3</label>
-    
-    <ul>
-      <li><a href="#0">Link</a></li>
-      <li><a href="#0">Link</a></li>
-    </ul>
-  </li>
-  
-  <li class="has-children">
-    <input type="checkbox" name ="group-4" id="group-4">
-    <label for="group-4">Group 4</label>
-    
-    <ul>
-      <li class="has-children">
-	<input type="checkbox" name ="sub-group-3" id="sub-group-3">
-	<label for="sub-group-3">Sub Group 3</label>
-        
-	<ul>
-	  <li><a href="#0">Link</a></li>
-	  <li><a href="#0">Link</a></li>
-	</ul>
-      </li>
-      <li><a href="#0">Link</a></li>
-      <li><a href="#0">Link</a></li>
-    </ul>
-  </li>
-</ul> <!-- cd-accordion-menu -->
-
+{% include 'menu_workouts.html' %}
 {% endblock %}
diff --git a/static/css/styles2.css b/static/css/styles2.css
index 74acb81a..b60a3658 100644
--- a/static/css/styles2.css
+++ b/static/css/styles2.css
@@ -34,6 +34,8 @@
 
     aside ul {
         margin-bottom: 0;
+        margin-top: 15px;
+        margin-bottom: 15px;
         left: 15px;
     }
 
@@ -87,6 +89,7 @@
     aside a {
         color: #a0f6aa;
         text-decoration: none;
+        padding: 0.2em 0em 0.2em 0em;
     }
 
 
@@ -120,10 +123,24 @@
     aside .cd-accordion-menu a {
         position: relative;
         display: block;
-        color: #ffffff;
+        color: #dddddd;
         font-size: 1.2em; 
     }
 
+    aside i {
+        font-size: 1.2em;
+    }
+
+    aside a::before {
+        content: '\00a0';
+        width: 16px;
+        height: 16px;
+        display: inline-block;
+        font-size: inherit;
+        text-rendering: auto;
+    }
+                 
+
     aside .cd-accordion-menu label::before
     {
         /* icons */
@@ -222,7 +239,7 @@
 
 .wrapper {
   display: grid;
-  grid-gap: 2px;
+/*  grid-gap: 2px; */
   grid-template-areas: 
   "header"
    "user"

From bf4a93f49698713e6bb609462dcd4e6c95938c04 Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Sat, 22 Sep 2018 16:33:17 +0200
Subject: [PATCH 14/15] added footer

---
 rowers/templates/menu_workouts.html | 30 +++++++----
 static/css/styles2.css              | 33 +++++++++++-
 templates/newbase.html              | 82 +++++++++++++++++++++++++++--
 3 files changed, 130 insertions(+), 15 deletions(-)

diff --git a/rowers/templates/menu_workouts.html b/rowers/templates/menu_workouts.html
index c414ff5a..dff2a0a3 100644
--- a/rowers/templates/menu_workouts.html
+++ b/rowers/templates/menu_workouts.html
@@ -1,19 +1,27 @@
 <ul class="cd-accordion-menu animated">
-  <li><a href="#0"><i class="fas fa-clipboard-list fa-fw"></i>&nbsp;Workouts List</a></li>
-  <li><a href="#0"><i class="fas fa-chart-pie fa-fw"></i>&nbsp;Charts</a></li>
-  <li><a href="#0"><i class="fas fa-balance-scale fa-fw"></i>&nbsp;Compare</a></li>  
-  <li><a href="#0"><i class="fas fa-file-upload fa-fw"></i>&nbsp;Upload</a></li>
-  <li class="has-children">
+  <li id="workouts-list">
+    <a href="#0"><i class="fas fa-clipboard-list fa-fw"></i>&nbsp;Workouts List</a>
+  </li>
+  <li id="charts">
+    <a href="#0"><i class="fas fa-chart-pie fa-fw"></i>&nbsp;Charts</a>
+  </li>
+  <li id="compare">
+    <a href="#0"><i class="fas fa-balance-scale fa-fw"></i>&nbsp;Compare</a>
+  </li>  
+  <li>
+    <a href="#0"><i class="fas fa-file-upload fa-fw"></i>&nbsp;Upload</a>
+  </li>
+  <li class="has-children" id="imports">
     <input type="checkbox" name ="group-1" id="group-1">
     <label for="group-1"><i class="fas fa-cloud-download fa-fw"></i>&nbsp;Import</label>
     
     <ul>
-      <li><a href="#0">Concept2</a></li>
-      <li><a href="#0">Strava</a></li>
-      <li><a href="#0">RunKeeper</a></li>
-      <li><a href="#0">SportTracks</a></li>
-      <li><a href="#0">MapMyFitness</a></li>
-      <li><a href="#0">Polar</a></li>
+      <li id="concept2"><a href="#0">Concept2</a></li>
+      <li id="strava"><a href="#0">Strava</a></li>
+      <li id="runkeeper"><a href="#0">RunKeeper</a></li>
+      <li id="sporttracks"><a href="#0">SportTracks</a></li>
+      <li id="mapmyfitness"><a href="#0">MapMyFitness</a></li>
+      <li id="polar"><a href="#0">Polar</a></li>
     </ul>
   </li>
 </ul> <!-- cd-accordion-menu -->
diff --git a/static/css/styles2.css b/static/css/styles2.css
index b60a3658..aab4ae5c 100644
--- a/static/css/styles2.css
+++ b/static/css/styles2.css
@@ -23,7 +23,32 @@
         margin: 0;
         display: flex;
         justify-content: space-between;
-        padding: 0.2em 0.2em 0.2em 0.2em;
+    }
+
+    footer ul {
+        list-style: none;
+        display: flex;
+        justify-content: flex-start;
+        flex-direction: row;
+    }
+
+    footer ul ul {
+        flex-direction: column;
+        padding-top: 0;
+        padding-bottom: 0;
+        padding-left: 0;
+        padding-right: 2em;
+    }
+
+    footer li {
+        margin: 0;
+        padding-bottom: 0.4em;
+    }
+
+    footer h1 {
+        font-weight: bold;
+        text-align: left;
+        font-size: 1.0em;
     }
 
     header ul {
@@ -219,6 +244,7 @@
 
 .content {
   grid-area: content;
+  padding:  1.2em 1.2em 1.2em 1.2em;
 }
 .main-nav {
     grid-area: nav;
@@ -232,9 +258,14 @@
 
 .ad {
   grid-area: ad;
+  background: #35383d;
+  color: #dddddd;
+  padding: 1em 1em 1em 1em;
 }
 .main-footer {
   grid-area: footer;
+  background: #ededed;
+  padding:  1.2em 1.2em 1.2em 1.2em;
 }
 
 .wrapper {
diff --git a/templates/newbase.html b/templates/newbase.html
index 0b0e2e94..bdf55e77 100644
--- a/templates/newbase.html
+++ b/templates/newbase.html
@@ -203,7 +203,7 @@
             </a>
           </li>
         </ul>
-   </nav>
+      </nav>
 
       <main class="content">
         {% block main %}
@@ -219,8 +219,84 @@
       <div class="ad">
         {% block ad %}
         Advertising
-        {% endblock %}</div>
-      <footer class="main-footer">Footer</footer>
+        {% endblock %}
+      </div>
+
+      <footer class="main-footer">
+        <p>Follow us on
+            <a href="">
+              <i class="fab fa-twitter"></i>
+            </a>&nbsp;
+            <a href="">
+              <i class="fab fa-instagram"></i>
+            </a>&nbsp;
+            <a href="">
+              <i class="fab fa-wordpress-simple"></i>
+            </a>&nbsp;
+            <a href="">
+              <i class="fab fa-facebook"></i>
+            </a>&nbsp;
+        </p>
+        <p>
+        <ul>
+          <li>
+            <h1>Help</h1>
+            <ul>
+              <li>
+                <a href="">Help</a>
+              </li>
+              <li>
+                <a href="">Rowing Analytics Blog</a>
+              </li>
+              <li>
+                <a href="">Rowing Data Facebook Group</a>
+              </li>
+              <li>
+                <a href="">Rowing Physics</a>
+              </li>
+            </ul>
+          </li>
+          <li>
+            <h1>About</h1>
+            <ul>
+              <li>
+                <a href="">Contact</a>
+              </li>
+              <li>
+                <a href="">Rowsandall s.r.o.</a>
+              </li>
+              <li>
+                <a href="">Brochure</a>
+              </li>
+              <li>
+                <a href="">Partnering?</a>
+              </li>
+              <li>
+                <a href="">Developers Info</a>
+              </li>
+            </ul>
+          </li>
+          <li>
+            <h1>Paid Plans</h1>
+            <ul>
+              <li>
+                <a href="">Paid Plans</a>
+              </li>
+            </ul>
+          </li>
+          <li>
+            <h1>Legal</h1>
+            <ul>
+              <li>
+                <a href="">Terms and Conditions</a>
+              </li>
+              <li>
+                <a href="">Privacy Policy</a>
+              </li>
+            </ul>
+        </ul>
+        </p>
+      </footer>
       {% analytical_body_bottom %}
       {% block body_bottom %}{% endblock %}
   </body>

From 1144d9b7f4e04a865bb40e038ce028ba6c628f3d Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Sat, 22 Sep 2018 16:35:59 +0200
Subject: [PATCH 15/15] changed alignment footer

---
 static/css/styles2.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/static/css/styles2.css b/static/css/styles2.css
index aab4ae5c..6cee6ed5 100644
--- a/static/css/styles2.css
+++ b/static/css/styles2.css
@@ -28,7 +28,8 @@
     footer ul {
         list-style: none;
         display: flex;
-        justify-content: flex-start;
+        justify-content: space-between;
+        /* justify-content: flex-start; */
         flex-direction: row;
     }
 
