From 7809a8e9cdfcab3e5eb47d9224a015a0bc6b3fb5 Mon Sep 17 00:00:00 2001
From: Axel Hinrichs <hinrichs@bitscape.de>
Date: Fri, 15 Jul 2022 11:13:00 +0200
Subject: [PATCH] [webapp] close navbar when item is clicked

---
 webapp/src/components/NavBar.vue | 40 ++++++++++++++++++++------------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/webapp/src/components/NavBar.vue b/webapp/src/components/NavBar.vue
index af15b01..ec508f8 100644
--- a/webapp/src/components/NavBar.vue
+++ b/webapp/src/components/NavBar.vue
@@ -6,10 +6,10 @@
                 aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
-            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
-                <div class="navbar-nav">
+            <div class="collapse navbar-collapse" ref="navbarCollapse" id="navbarNavAltMarkup">
+                <ul class="navbar-nav">
                     <li class="nav-item">
-                        <router-link class="nav-link" to="/">Live Data</router-link>
+                        <router-link @click="onClick" class="nav-link" to="/">Live Data</router-link>
                     </li>
                     <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button"
@@ -18,26 +18,26 @@
                         </a>
                         <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
                             <li>
-                                <router-link class="dropdown-item" to="/settings/network">Network Settings</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/network">Network Settings</router-link>
                             </li>
                             <li>
-                                <router-link class="dropdown-item" to="/settings/ntp">NTP Settings</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/ntp">NTP Settings</router-link>
                             </li>
                             <li>
-                                <router-link class="dropdown-item" to="/settings/mqtt">MqTT Settings</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/mqtt">MqTT Settings</router-link>
                             </li>
                             <li>
-                                <router-link class="dropdown-item" to="/settings/inverter">Inverter Settings
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/inverter">Inverter Settings
                                 </router-link>
                             </li>
                             <li>
-                                <router-link class="dropdown-item" to="/settings/dtu">DTU Settings</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/dtu">DTU Settings</router-link>
                             </li>
                             <li>
                                 <hr class="dropdown-divider" />
                             </li>
                             <li>
-                                <router-link class="dropdown-item" to="/firmware/upgrade">Firmware Upgrade</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/firmware/upgrade">Firmware Upgrade</router-link>
                             </li>
                         </ul>
                     </li>
@@ -48,24 +48,34 @@
                         </a>
                         <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
                             <li>
-                                <router-link class="dropdown-item" to="/info/system">System</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/info/system">System</router-link>
                             </li>
                             <li>
-                                <router-link class="dropdown-item" to="/info/network">Network</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/info/network">Network</router-link>
                             </li>
                             <li>
-                                <router-link class="dropdown-item" to="/info/ntp">NTP</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/info/ntp">NTP</router-link>
                             </li>
                             <li>
-                                <router-link class="dropdown-item" to="/info/mqtt">MqTT</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/info/mqtt">MqTT</router-link>
                             </li>
                         </ul>
                     </li>
                     <li class="nav-item">
-                        <router-link class="nav-link" to="/about">About</router-link>
+                        <router-link @click="onClick" class="nav-link" to="/about">About</router-link>
                     </li>
-                </div>
+                </ul>
             </div>
         </div>
     </nav>
 </template>
+
+<script>
+export default {
+    methods: {
+        onClick() {
+            this.$refs.navbarCollapse && this.$refs.navbarCollapse.classList.remove("show");
+        }
+    },
+}
+</script>