Created a collection nav menu on essay page

admin/models/essay.coffee

@@ -6,7 +6,7 @@ utils = require('lib/utils')
 BaseModel = require('models/base')
 
 class Essay extends BaseModel
-  @configure "Essay", "site", "slug", "title", "intro", "body", "photo", "published", "published_at", "updated_at", "author_id", "sponsor_id", "sponsor_start", "sponsor_end", "collections", "_attachments"
+  @configure "Essay", "site", "slug", "title", "intro", "body", "photo", "published", "published_at", "updated_at", "author_id", "sponsor_id", "sponsor_start", "sponsor_end", "sponsors_history", "collections", "_attachments"
   
   @extend Spine.Model.CouchAjax
   

site/lib/app.coffee

@@ -13,11 +13,16 @@ exports.initialize = (config) ->
   $tocNavIcon = $tocNav.find('> .icon')
   $tocNavList = $tocNav.find('> ul')
   
+  $collectionNav = $('.collection-nav')
+  $collectionNavIcon = $collectionNav.find('> .icon')
+  $collectionNavList = $collectionNav.find('> ul')
+  
   $article = $('.container > article')
 
   hidePopups = (exceptMe) ->
     $mainNavList.hide() unless $mainNavList is exceptMe
     $tocNavList.hide() unless $tocNavList is exceptMe
+    $collectionNavList.hide() unless $collectionNavList is exceptMe
 
   $('html').on 'click', (e) ->
     hidePopups()
@@ -41,3 +46,15 @@ exports.initialize = (config) ->
       e.stopPropagation()
       hidePopups($tocNavList)
       $tocNavList.toggle()
+
+  # Setup the Collection menu
+  if $collectionNav
+    $collectionNavId = $collectionNav.attr('data-id')
+    if $collectionNavId
+      for c in [1...5]
+        $collectionNavList.append "<li><a href=\"#\">Essay Number #{c}</a></li>"
+
+    $collectionNavIcon.on 'click', (e) ->
+      e.stopPropagation()
+      hidePopups($collectionNavList)
+      $collectionNavList.toggle()

site/static/css/responsive.styl

@@ -30,7 +30,8 @@
     margin-bottom: 2em
 
   .main-nav,
-  .toc-nav
+  .toc-nav,
+  .collection-nav
     margin: 4px 4px 0 0
 
   article
@@ -39,9 +40,10 @@
       left: -14px
 
 // Odd one
-@media (max-width: 600px)
+@media (max-width: 650px)
 
-  .toc-nav
+  .toc-nav,
+  .collection-nav
     display: none
   
   article
@@ -74,8 +76,9 @@
     margin-bottom: 2.5em
 
   .main-nav,
-  .toc-nav
-    margin: 12px 12px 0 0
+  .toc-nav,
+  .collection-nav
+    margin: 8px 8px 0 0
 
   article
 

site/static/css/theme.styl

@@ -8,7 +8,7 @@
   border-left: 20px solid $primaryColor
 
 .site-name
-  margin: 0 0 5px -0.05em
+  margin: 0 0 8px -0.05em
   font-size: 5.25em
   line-height: 0.8em
   font-weight: $normalFont
@@ -34,7 +34,8 @@
   font-weight: $boldFont
 
 .main-nav,
-.toc-nav
+.toc-nav,
+.collection-nav
   position: fixed
   top: 0
   right: 0
@@ -65,8 +66,9 @@
       margin-bottom: 5px
       background: #fff
     i
-      margin: -7px 9px 0 9px
       arrow('top', 12px, #fff, 12px, 7px)
+      margin: 0 auto
+      display: block
       top: 0
 
   > ul
@@ -102,6 +104,11 @@
         border-bottom: 1px solid rgba(255,255,255,0.5)
         white-space: nowrap
 
+        small
+          color: #fff
+          font-weight: $normalFont
+          line-height: 1em
+
       a
         display: block
         padding: 10px 20px
@@ -125,8 +132,9 @@
           color: $textColor
           background: #fff
 
-.toc-nav
-  // see .main-nav above
+.toc-nav,
+.collection-nav
+  // see above
   right: 70px
 
   .icon
@@ -150,6 +158,29 @@
         font-size: 1em
         line-height: 1em
 
+.collection-nav
+  // see above
+  right: 140px
+
+  .icon
+    width: auto
+
+    div
+      width: auto
+      height: 30px
+      color: #fff
+      font-size: 26px
+      font-weight: $normalFont
+      line-height: 1em
+      text-align: center
+      margin: 3px 6px
+      overflow: hidden
+
+  > ul
+
+    &:before
+      width: 144px
+
 
 article
   

site/templates/essay.html

@@ -84,4 +84,14 @@
     <li class="heading">Essay's Table of Content</li>
     <li><a href="#TOC-Introduction">Introduction</a></li>
   </ul>
+</nav>
+
+<nav class="collection-nav" data-id="{{collections.[0]._id}}">
+  <div class="icon"><div>Collection</div><i></i></div>
+  <ul>
+    <li class="heading">
+      <small>5 Essays in Collection:</small><br>
+      {{collections.[0].name}}
+    </li>
+  </ul>
 </nav>