Skip to content

Commit

Permalink
feat(navbar): dropdown directive
Browse files Browse the repository at this point in the history
smartapant committed Feb 27, 2017
1 parent 62707bb commit e420c1c
Showing 3 changed files with 26 additions and 2 deletions.
1 change: 1 addition & 0 deletions build/webpack.base.conf.js
Original file line number Diff line number Diff line change
@@ -29,6 +29,7 @@ module.exports = {
'src': resolve('src'),
'assets': resolve('src/assets'),
'components': resolve('src/components'),
'directives': resolve('src/directives'),
'vuex-store': resolve('src/store')
}
},
20 changes: 18 additions & 2 deletions src/components/layout/navbar/Navbar.vue
Original file line number Diff line number Diff line change
@@ -16,8 +16,13 @@
<li class="nav-item">
<a class="nav-link" href="#"><span class="i-nav-messages notify"></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="i-nav-notification notify"></span></a>
<li class="nav-item dropdown" v-dropdown>
<a class="nav-link dropdown-toggle" href="#"><span class="i-nav-notification notify"></span></a>
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
@@ -31,10 +36,15 @@

<script>
import { mapGetters, mapActions } from 'vuex'
import Dropdown from 'directives/Dropdown'
export default {
name: 'navbar',
directives: {
dropdown: Dropdown
},
computed: mapGetters([
'sidebarOpened'
]),
@@ -68,6 +78,12 @@
margin-right: 28px;
}
.dropdown-toggle {
&:after {
display: none;
}
}
.notify {
position: relative;
7 changes: 7 additions & 0 deletions src/directives/Dropdown.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export default function (el) {
let ddToggle = el.querySelector('.dropdown-toggle')

ddToggle.addEventListener('click', function () {
el.classList.toggle('show')
})
}

0 comments on commit e420c1c

Please sign in to comment.