Skip to content

Instantly share code, notes, and snippets.

@orlovmax
Last active November 21, 2016 12:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save orlovmax/5e59b8c6a4e127bdcda8 to your computer and use it in GitHub Desktop.
Save orlovmax/5e59b8c6a4e127bdcda8 to your computer and use it in GitHub Desktop.
Enhanced Jade templates - BEM blocks + pass some data
//LIVE EXAMPLE: http://codepen.io/orlovmax/pen/PZRXaN?editors=1000
// Define navigation mixin
mixin nav(args)
- items = args.items || {}
- active = args.active || {}
- nav = args.nav || {}
- list = args.list || {}
- item = args.item || {}
- item_active = args.item_active || {}
- link = args.__link || {}
- link_active = args.link_active || {}
//- Build menu and highlight active item
nav.nav&attributes(nav)
ul.nav__list&attributes(list)
each url, name in items
if name === active
li.nav__item&attributes(item_active)
a.nav__link&attributes(link_active)= name
else
li.nav__item&attributes(item)
a.nav__link(href=url)&attributes(link)= name
//- Call mixins with parameters
+nav({
active: 'Home',
items: {
'Home': 'index.html',
'Services': 'services.html',
'Blog': 'blog.html',
'Contacts': 'contacts.html'
},
nav: {
class: 'js-nav is-opened',
role: 'navigation'
},
item_active: {
class: 'is-active'
},
link_active: {
class: 'is-active'
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment