dynamic selecting nav

This commit is contained in:
Alex Wolfe 2015-03-01 16:39:17 -08:00
parent b4d3a06c07
commit 210c2a39b2
4 changed files with 88 additions and 70 deletions

View File

@ -2,10 +2,9 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
.side-nav-search .side-nav-search
input(type="search" placeholder="SEARCH DOCS...") input(type="search" placeholder="SEARCH DOCS...")
ul.side-nav-primary ul.side-nav-primary
for page, slug in public.docs[current.path[1]][current.path[2]]._data for page, slug in public.docs[current.path[1]][current.path[2]]._data
if slug == "index" name = page.menuTitle || page.title
li <a href="/docs/#{current.path[1]}/#{current.path[2]}/#{slug}.html" md-button>Docs Home</a> selected = current.path[3] == slug ? 'is-selected':''
else
li <a href="/docs/#{current.path[1]}/#{current.path[2]}/#{slug}.html" md-button>#{page.title}</a> li <a class="#{selected}" href="/docs/#{current.path[1]}/#{current.path[2]}/#{slug}.html" md-button><span class="side-nav-icon icon-#{page.icon}"></span> #{name}</a>

View File

@ -1,9 +1,3 @@
//- if lang == 'js'
//- h2 I like JavaScript
//- else if lang == 'dart'
//- h2 I like Dart
// STEP 1 - Install Angular ########################## // STEP 1 - Install Angular ##########################
.content-block.content-number.clearfix .content-block.content-number.clearfix
i.number.icon-number.large i.number.icon-number.large
@ -95,8 +89,7 @@
section.docs-sub-section section.docs-sub-section
h4 Component Annotations h4 Component Annotations
p p A component annotation provides meta-data about the <code>component</code>. An annotation can always identified by its at-sign — <code>@</code>.
| A component annotation provides meta-data about the <code>component</code>. An annotation can always identified by its at-sign — <code>@</code>.
p p
| The <code>@Component</code> annotation defines the HTML tag for the component. The selector property specifies the tag. The <code>selector</code> property is a CSS selector. | The <code>@Component</code> annotation defines the HTML tag for the component. The selector property specifies the tag. The <code>selector</code> property is a CSS selector.
p p

View File

@ -1,22 +1,28 @@
{ {
"index": { "index": {
"icon": "home",
"title": "Angular Docs", "title": "Angular Docs",
"menuTitle": "Docs Home",
"banner": "Angular 2 is currently in Alpha Preview. We reccomend using <a href='https://docs.angularjs.org/guide'>Angular 1.X</a> for production applications." "banner": "Angular 2 is currently in Alpha Preview. We reccomend using <a href='https://docs.angularjs.org/guide'>Angular 1.X</a> for production applications."
}, },
"quickstart": { "quickstart": {
"icon": "query-builder",
"title": "5 Min Quickstart" "title": "5 Min Quickstart"
}, },
"resources": { "resources": {
"icon": "play-circle-fill",
"title": "Angular Resources" "title": "Angular Resources"
}, },
"api": { "api": {
"icon": "book",
"title": "API Proposal" "title": "API Proposal"
}, },
"help": { "help": {
"icon": "chat",
"title": "Help & Support" "title": "Help & Support"
} }
} }

View File

@ -37,12 +37,32 @@
> a { > a {
line-height: $unit * 6; line-height: $unit * 6;
padding: 0px ($unit * 2); padding: 0px ($unit * 2) 0px ($unit * 6);
color: $metal; color: $metal;
font-size: 14px; font-size: 14px;
text-transform: uppercase; text-transform: uppercase;
text-align: left; text-align: left;
font-weight: 400; font-weight: 400;
position: relative;
&.is-selected {
background: $fog;
color: $regal;
.side-nav-icon {
color: $regal;
}
}
}
.side-nav-icon {
position: absolute;
top: 0px;
left: 16px;
z-index: $layer-1;
font-size: 19px;
color: $cloud;
line-height: 47px;
} }
} }
} }