Close sidebar when dropdown toggle below 992px width

sahibhuseyn · Aug 5, 2017 · 7eed832 · 7eed832
1 parent b78a006
commit 7eed832
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/src/components/layout/navbar/Navbar.vue b/src/components/layout/navbar/Navbar.vue
@@ -20,7 +20,7 @@
 
       <div class="offset-lg-8"></div>
       <div class="col nav-item dropdown navbar-dropdown d-flex align-items-center justify-content-center" v-dropdown>
-        <a class="nav-link dropdown-toggle d-flex align-items-center justify-content" href="#">
+        <a class="nav-link dropdown-toggle d-flex align-items-center justify-content" href="#" @click.prevent="toggleDropdown">
           <span class="i-nav-messages notify"></span>
         </a>
         <div class="dropdown-menu">
@@ -36,7 +36,7 @@
         </div>
       </div>
       <div class="col nav-item dropdown navbar-dropdown d-flex align-items-center justify-content-center" v-dropdown>
-        <a class="nav-link dropdown-toggle d-flex align-items-center justify-content" href="#">
+        <a class="nav-link dropdown-toggle d-flex align-items-center justify-content" href="#" @click.prevent="toggleDropdown">
           <span class="i-nav-notification notify"></span>
         </a>
         <div class="dropdown-menu">
@@ -55,7 +55,7 @@
         </div>
       </div>
       <div class="col nav-item dropdown navbar-dropdown d-flex align-items-center justify-content-center" v-dropdown>
-        <a class="nav-link dropdown-toggle d-flex align-items-center justify-content" href="#">
+        <a class="nav-link dropdown-toggle d-flex align-items-center justify-content" href="#" @click.prevent="toggleDropdown">
           <span class="avatar-container">
             <img src="http://i.imgur.com/UTc7Fne.png" />
           </span>
@@ -91,6 +91,7 @@
     methods: {
       ...mapActions([
         'toggleSidebar',
+        'toggleDropdown',
         'isToggleWithoutAnimation'
       ])
     }

diff --git a/src/store/modules/app.js b/src/store/modules/app.js
@@ -30,6 +30,11 @@ const mutations = {
   [types.TOGGLE_SIDEBAR] (state, opened) {
     state.sidebar.opened = opened
   },
+  [types.TOGGLE_DROPDOWN] (state) {
+    if (document.documentElement.clientWidth < 992) {
+      state.sidebar.opened = false
+    }
+  },
   [types.TOGGLE_WITHOUT_ANIMATION] (state, value) {
     state.sidebar.withoutAnimation = value
   },
@@ -42,6 +47,9 @@ const actions = {
   toggleSidebar ({ commit }, opened) {
     commit(types.TOGGLE_SIDEBAR, opened)
   },
+  toggleDropdown ({ commit }) {
+    commit(types.TOGGLE_DROPDOWN)
+  },
   isToggleWithoutAnimation ({ commit }, value) {
     commit(types.TOGGLE_WITHOUT_ANIMATION, value)
   }

diff --git a/src/store/mutation-types.js b/src/store/mutation-types.js
@@ -2,4 +2,6 @@ export const TOGGLE_EXPAND_MENU_ITEM = 'TOGGLE_EXPAND_MENU_ITEM'
 
 export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR'
 
+export const TOGGLE_DROPDOWN = 'TOGGLE_DROPDOWN'
+
 export const TOGGLE_WITHOUT_ANIMATION = 'TOGGLE_WITHOUT_ANIMATION'
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,4 +2,6 @@ export const TOGGLE_EXPAND_MENU_ITEM = 'TOGGLE_EXPAND_MENU_ITEM'

		export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR'

		export const TOGGLE_DROPDOWN = 'TOGGLE_DROPDOWN'

		export const TOGGLE_WITHOUT_ANIMATION = 'TOGGLE_WITHOUT_ANIMATION'