hierarchical nav

bernabe21 · Sep 3, 2014 · 031f625 · 031f625
1 parent f20f32f
commit 031f625
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -9,6 +9,9 @@ npm install
 npm start
 ```
 
+If you add or rename pages, add them to [_data.json](/_data.json) so they'll
+show up in the sidebar.
+
 Open [localhost:9000](https://localhost:9000)
 
 ## Deployment

diff --git a/_data.json b/_data.json
@@ -2,13 +2,26 @@
   "index": {
     "title": "Installing npme"
   },
-  "publish": {
-    "title": "Publishing a Module"
-  },
   "scoped-modules": {
-    "title": "Scoped Modules"
+    "title": "Scoped Modules",
+    "subpages": {
+      "deux": {
+        "title": "Start Scoping"
+      },
+      "trois": {
+        "title": "Finish Scoping"
+      }
+    }
   },
   "enterprise": {
-    "title": "Enterprise"
+    "title": "Enterprise",
+    "subpages": {
+      "foo": {
+        "title": "Always be Enterprising"
+      },
+      "trois": {
+        "title": "Fin"
+      }
+    }
   }
 }
diff --git a/_layout.jade b/_layout.jade
@@ -22,7 +22,10 @@ html
     nav
       h2 Contents
       for doc, slug in public._data
-        a(href="/#{slug}" class=(current.source === slug ? "active" : ""))= doc.title
+        a(href="/#{slug}" class=(current.path[0] === slug ? "active" : ""))= doc.title
+        if doc.subpages
+          for subpage, subslug in doc.subpages
+            a.subpage(href="/#{slug}/#{subslug}" class=(current.source === subslug && current.path[0] === slug ? "active" : ""))= subpage.title
 
     section
       != yield

diff --git a/enterprise/foo.md b/enterprise/foo.md
@@ -0,0 +1 @@
+## Foo
diff --git a/enterprise.md → enterprise/index.md b/enterprise.md → enterprise/index.md
diff --git a/enterprise/trois.md b/enterprise/trois.md
@@ -0,0 +1 @@
+# Enterprise Trois
diff --git a/scoped-modules/deux.md b/scoped-modules/deux.md
diff --git a/scoped-modules.md → scoped-modules/index.md b/scoped-modules.md → scoped-modules/index.md
diff --git a/scoped-modules/trois.md b/scoped-modules/trois.md
@@ -0,0 +1 @@
+# Scoped Trois
diff --git a/styles/index.styl b/styles/index.styl
@@ -2,6 +2,8 @@ fonts = 'Source Sans Pro', 'Lucida Grande', sans-serif
 codefonts = 'Source Code Pro', 'Courier', sans-serif
 
 npmred = #cb3837
+subpage-link-color = #999
+subpage-link-color-active = #333
 
 sectionWidth = 600px
 navWidth = 200px
@@ -16,6 +18,7 @@ body
   color #333
   margin 0
   padding 0
+  font-size 16px
 
 a
   color npmred
@@ -66,6 +69,17 @@ nav
     &.active, &:hover
       border-left 3px solid npmred
       color rgba(npmred, 1)
+    &.subpage
+      color subpage-link-color
+      border-left-color transparent
+      padding-left 20px
+      font-size 14px
+      // &:before
+      //   content: "\2022"
+      //   padding-right 6px
+      &:hover, &.active
+        color: subpage-link-color-active
+        border-left-color subpage-link-color
 
 
 @media only screen and (max-width: navWidth + sectionWidth)