How can I make the <router link> element in my navbar component full width? I'm also looking for keywords related to achieving this layout.
Here is an image of the issue:
I want a layout that spans the full width, regardless of the Chrome window size.
I'm new to Bulma and struggling to customize the framework, even after referring to the NavBar Bulma official documentation.
NavBar.vue
......
<nav
class="navbar is-info is-fixed-top"
role="navigation"
aria-label="main navigation"
>
<div class="container is-max-desktop px-4">
<div class="navbar-brand">
<div class="navbar-item is-size-4 is-family-monospace">Noteballs</div>
<a
@click="showMobileNav = !showMobileNav"
role="button"
class="navbar-burger"
:class="{ 'is-active': showMobileNav }"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div
id="navbarBasicExample"
class="navbar-menu"
:class="{ 'is-active': showMobileNav }"
>
<div class="navbar-end">
<router-link to="/" class="navbar-item" active-class="is-active"
>Notes</router-link
>
<router-link to="/stats" class="navbar-item" active-class="is-active"
>Stats</router-link
>
</div>
</div>
</div>
.....
ViewNotes.vue
<template>
<div class="notes">
<div class="has-background-success-dark p-4 mb-5">
<div class="field">
<!-- <label class="label">Message</label> -->
<div class="control">
<textarea class="textarea" placeholder="Add a new note"></textarea>
</div>
</div>
<div class="field is-grouped is-grouped-right">
<div class="control">
<button class="button is-link has-background-success">Add New Note</button>
</div>
</div>
</div>
<div v-for="i in 3" class="card mb-4">
<div class="card-content">
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium
adipisci, odit saepe sequi rem animi odio? Vitae sequi ea dolorum
laboriosam a, quos, amet animi, esse id nobis vel ad.
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Edit</a>
<a href="#" class="card-footer-item">Delete</a>
</footer>
</div>
</div>
</template>