Merge pull request #24 from Plume-org/left-menu

Fold sections of the left menu

source/_nav_item.erb

@@ -1,15 +1,26 @@
 <% if items.size > 0 %>
     <ul>
         <% items.each do |i| %>
-            <li>
-                <a href="<%= i.url %>"><%= i.data.title %></a>
-                <%= partial :nav_item, :locals => {
-                    :items => resources.select{ |r|
+            <li title="<%= i.data.summary || '' %>">
+                <% children = resources
+                    .select{ |r|
                         r.url.split("/").size == i.url.split("/").size + 1 &&
                         r.url.start_with?(i.url)
-                    },
-                    :resources => resources
-                } %>
+                    }
+                    .sort{ |a, b| a.data.title <=> b.data.title }
+                    .sort{ |a, b| -(a.data.priority || 0) <=> -(b.data.priority || 0) }
+                %>
+                <% if children.size == 0 %>
+                    <a href="<%= i.url %>"><%= i.data.title %></a>
+                <% else %>
+                    <details>
+                    <summary><a href="<%= i.url %>"><%= i.data.title %></a></summary>
+                    <%= partial :nav_item, :locals => {
+                        :items => children,
+                        :resources => resources
+                    } %>
+                    </details>
+                <% end %>
             </li>
         <% end %>
     </ul>

source/stylesheets/site.css.scss

@@ -60,14 +60,8 @@ nav {
 
     li {
       a {
-        display: block;
         padding: 2em 0em;
-        border-bottom: 2px solid transparent;
         transition: all ease-in 0.2s;
-
-        &:hover {
-          border-bottom-color: $plume;
-        }
       }
     }
   }
@@ -83,6 +77,12 @@ main nav li {
     display: flex;
     align-items: center;
     justify-content: center;
+    border-bottom: 2px solid transparent;
+
+    &:hover {
+      border-bottom-color: $plume;
+    }
+
     img {
       margin: 0px 20px;
     }
@@ -153,15 +153,17 @@ aside {
       li {
         display: inline;
 
-        a {
+        & > a, & > details {
           display: block;
           padding: 2em;
           border-bottom: none;
-          border-left: 5px solid transparent;
-          transition: all ease-in 0.2s;
+        }
+
+        & > a, & > details > summary > a {
+          opacity: 0.6;
 
           &:hover {
-            border-left-color: $plume;
+            opacity: 1;
           }
         }
       }