Skip to content

Instantly share code, notes, and snippets.

@MelSumner
Created February 26, 2018 18:03
Show Gist options
  • Save MelSumner/4ae0f8f32f39f094c91a9e860ebfac68 to your computer and use it in GitHub Desktop.
Save MelSumner/4ae0f8f32f39f094c91a9e860ebfac68 to your computer and use it in GitHub Desktop.
contextual-navbar
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'nav',
actions:{
pathSelected: function(path){
this.set('pathToGo', path);
}
}
});
import Ember from 'ember';
export default Ember.Component.extend({
classNames:['cx-navdropdown', 'navbar-li'],
options: false,
tagName:'li',
click(e){
},
actions: {
toggleDropdown: function(){
this.toggleProperty('options');
},
optionSelected: function(path){
this.sendAction("optionSelected", path);
}
}
});
import Ember from 'ember';
export default Ember.Component.extend({
tagName:'',
actions:{
pillSelected: function(path){
this.sendAction('pillSelected', path);
}
}
});
import Ember from 'ember';
export default Ember.Component.extend({
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
import Ember from 'ember';
export default Ember.Controller.extend({
navItems: [{
"name":"Fish",
"id":"fish",
"path":"fish"
},{
"name":"Birds",
"id":"bird",
"path":"birds"
},{
"name":"Insects",
"id":"inse",
"path":"insects"
}],
navDropdownItems:{
"name":"Mammals",
"options":[{"name":"Herbivores", "path":"herbivores"},{"name":"Carnivores", "path":"carnivores"},{"name":"Omnivores", "path":"omnivores"}]
},
navItemsTwo:[{
"name":"Amphibians",
"id":"amph",
"path":"amphibians"
}],
navDropdownTwo:{
"name":"Reptiles",
"options":[{"name":"Snakes", "path":"snakes"},{"name":"Crocodiles", "path":"crocodiles"},{"name":"Omnivores", "path":"omnivores"}]
}
});
import Ember from 'ember';
export default Ember.Route.extend({
});
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.fa-icon{display: inline}
li.nav-pill {
display: inline;
padding:10px;
margin:0;
transition: 0.5s ease;
}
li.nav-option {
display: block;
}
a {
color:inherit;
text-decoration: none;
}
nav {
padding: 10px;
//border: 1px solid brown;
}
.navbar-ul {
display: flex;
flex-direction: row;
//justify-content: space-around;
//background-color:gray;
}
.navbar-li {
}
.nav-pill.active {
background-color:#77EDF4;
}
.cx-navdropdown {
padding:10px;
display: flex;
flex-direction: column;
}
.cx-navdropdown ul{
border: 1px solid black;
padding: 5px;
//margin: 5px;
}
<br>
{{outlet}}
<br>
<br>
<ul class="navbar-ul">
{{yield
(hash
pill=(component 'navbar/cx-navpill' pillSelected=(action "pathSelected"))
dropdown=(component 'navbar/cx-navdropdown' optionSelected=(action "pathSelected"))
)
}}
</ul>
<a class="" {{action "toggleDropdown"}} tabindex="0">{{dropdown.name}} <i class="fa-icon fa {{if options "fa-chevron-up" "fa-chevron-down"}}"></i></a>
{{#if options}}
<ul class="navdropdown-dropdown ">
{{#each dropdown.options as |option|}}
<li class="nav-option"><a tabindex="0" href="" {{action "optionSelected" option.path}}>{{option.name}}</a></li>
{{/each}}
</ul>
{{/if}}
{{#each navItems as |pill|}}
<li class="nav-pill navbar-li"><a href="" {{action "pillSelected" pill.path}}>{{pill.name}}</a></li>
{{/each}}
{{#cx-navbar pathToGo=pathToGo as |navbar|}}
{{navbar.pill navItems=navItems}}
{{navbar.dropdown dropdown=navDropdownItems}}
{{navbar.pill navItems=navItemsTwo}}
{{navbar.dropdown dropdown=navDropdownTwo}}
{{/cx-navbar}}
<p>The selection was made to go to route <strong style="background-color:yellow;">/{{pathToGo}}</strong></p>
{
"version": "0.13.0",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"devDependencies": {
"ember-font-awesome": "^3.0.5"
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.16.2",
"ember-template-compiler": "2.16.2",
"ember-testing": "2.16.2",
"ember-font-awesome": "https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
},
"addons": {
"ember-data": "2.16.3"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment