diff --git a/README.md b/README.md
index 67c1150..53c2ca0 100644
--- a/README.md
+++ b/README.md
@@ -42,7 +42,7 @@ This one-click [Heroku deploy button](https://github.com/bumi/listmonk-heroku) p
 
 [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/bumi/listmonk-heroku)
 
-Please note that [configuration options](https://listmonk.app/docs/configuration) must be set using [environment configruation variables](https://devcenter.heroku.com/articles/config-vars).
+Please note that [configuration options](https://listmonk.app/docs/configuration) must be set using [environment configuration variables](https://devcenter.heroku.com/articles/config-vars).
 
 
 
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 770639f..18a08d2 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -32,6 +32,8 @@
                 </b-menu-item><!-- dashboard -->
 
                 <b-menu-item :expanded="activeGroup.lists"
+                  :active="activeGroup.lists"
+                  v-on:update:active="(state) => toggleGroup('lists', state)"
                   icon="format-list-bulleted-square" label="Lists">
                   <b-menu-item :to="{name: 'lists'}" tag="router-link"
                     :active="activeItem.lists"
@@ -43,6 +45,8 @@
                 </b-menu-item><!-- lists -->
 
                 <b-menu-item :expanded="activeGroup.subscribers"
+                  :active="activeGroup.subscribers"
+                  v-on:update:active="(state) => toggleGroup('subscribers', state)"
                   icon="account-multiple" label="Subscribers">
                   <b-menu-item :to="{name: 'subscribers'}" tag="router-link"
                     :active="activeItem.subscribers"
@@ -54,7 +58,9 @@
                 </b-menu-item><!-- subscribers -->
 
                 <b-menu-item :expanded="activeGroup.campaigns"
-                    icon="rocket-launch-outline" label="Campaigns">
+                  :active="activeGroup.campaigns"
+                  v-on:update:active="(state) => toggleGroup('campaigns', state)"
+                  icon="rocket-launch-outline" label="Campaigns">
                   <b-menu-item :to="{name: 'campaigns'}" tag="router-link"
                     :active="activeItem.campaigns"
                     icon="rocket-launch-outline" label="All campaigns"></b-menu-item>
@@ -138,11 +144,18 @@ export default Vue.extend({
       this.activeItem = { [to.name]: true };
       if (to.meta.group) {
         this.activeGroup = { [to.meta.group]: true };
+      } else {
+        // Reset activeGroup to collapse menu items on navigating
+        // to non group items from sidebar
+        this.activeGroup = {};
       }
     },
   },
 
   methods: {
+    toggleGroup(group, state) {
+      this.activeGroup = state ? { [group]: true } : {};
+    },
     reloadApp() {
       this.$api.reloadApp().then(() => {
         this.$utils.toast('Reloading app ...');
diff --git a/frontend/vue.config.js b/frontend/vue.config.js
index 0fc3d38..a339bb9 100644
--- a/frontend/vue.config.js
+++ b/frontend/vue.config.js
@@ -8,7 +8,7 @@ module.exports = {
   // and the URI for assets are tightly coupled. This is handled in the Go app
   // by using stuffbin aliases.
   assetsDir: 'frontend',
-  
+
   // Move the index.html file from dist/index.html to dist/frontend/index.html
   indexPath: './frontend/index.html',