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:
https://i.sstatic.net/2f2b0BcM.png
I want a layout that spans the full width, regardless of the Chrome window size.
https://i.sstatic.net/Tp16GYTJ.png
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>