Here's the navigation bar code:
<nav class="navbar bg-body-tertiary navbar-expand-lg"
data-bs-theme="dark" :class="{'navbar-expand-lg navbar-dark bg-dark ' : useDarkNavbar, 'navbar-expand-lg bg-light' : !useDarkNavbar}" >
<div class="container-fluid">
<a class="navbar-brand" href="#">My Vue</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li v-for="(page, index) in pages" class="nav-item" :key="index" >
<a class="nav-link"
:class ='{active : activePage == index }'
aria-current="page"
v-bind:href="page.link.url"
:title="`This is ${page.link.text} page`"
@click.prevent="activePage = index"
>{{page.link.text}}</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li> -->
</ul>
<form class="d-flex">
<button class="btn btn-outline-success"
@click.prevent="useDarkNavbar = !useDarkNavbar"
>
Toggle Navbar
</button>
</form>
</div>
</div>
</nav>
This is the form for the button that toggles the navbar color:
<form class="d-flex">
<button class="btn btn-outline-success"
@click.prevent="useDarkNavbar = !useDarkNavbar"
>
Toggle Navbar
</button>
</form>
And here is the Vue setup:
const app = Vue.createApp({
// template: '<h2>Hey there</h2>',
data(){//Options object
return {
useDarkNavbar:true,
activePage : 0,
pages : [
{ link : {text:'Home',url:'index.html'},
pageTitle : 'Home page',
content:'This is the home content'
},
{
link : {text:'About',url:'about.html'},
pageTitle : 'About page',
content:'This is the about content'
},
{
link : {text:'Contact',url:'contact.html'},
pageTitle : 'Contact page',
content:'This is the contact content'
}
],
}
} }) app.mount('body')
When the button is clicked, the theme alternates between light and dark, but the navbar disappears when switching to dark theme. How can this issue be resolved?