patrick/OpenDTU-old
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[webapp] close navbar when item is clicked

Browse Source
This commit is contained in:
Axel Hinrichs 2022-07-15 11:13:00 +02:00
parent 05c478d1f2
commit 7809a8e9cd
1 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
webapp/src/components/NavBar.vue
View File

@ -6,10 +6,10 @@
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="collapse navbar-collapse" ref="navbarCollapse" id="navbarNavAltMarkup">
<div class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item"> <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>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button"
@ -18,26 +18,26 @@
</a> </a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown"> <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<li> <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>
<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>
<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>
<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> </router-link>
</li> </li>
<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>
<li> <li>
<hr class="dropdown-divider" /> <hr class="dropdown-divider" />
</li> </li>
<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> </li>
</ul> </ul>
</li> </li>
@ -48,24 +48,34 @@
</a> </a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown"> <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<li> <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>
<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>
<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>
<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> </li>
</ul> </ul>
</li> </li>
<li class="nav-item"> <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> </li>
</div> </ul>
</div> </div>
</div> </div>
</nav> </nav>
</template> </template>
<script>
export default {
methods: {
onClick() {
this.$refs.navbarCollapse && this.$refs.navbarCollapse.classList.remove("show");
}
},
}
</script>