Maintaining State for User Navigation

[stravid87]

Description Currently the forward / back buttons of the application are hard coded.

    <div class="navigation-buttons">
      <router-link class="nav-button left-button" :to="{ name: 'imaginary-world' }">
        <span>&#9664;</span>  
      </router-link>
      <router-link class="nav-button right-button" :to="{ name: 'second-imaginary' }">
        <span>&#9654;</span>  
      </router-link>
    </div>

I feel like Pinia could be used to maintain the state of the user's current location so that these could be dynamically coded.

Acceptance Criteria

[NJavokhir]

Implement Dynamic Navigation Using Mitt

Create dynamic navigation buttons ("Next" and "Previous") in the Vue application that adapt based on the user's current page.

Acceptance Criteria

1. Event Bus: Create an event bus using Mitt instead of PINIA to handle page change events.
2. Route Change Handling: Emit a pageChange event whenever the user navigates to a new page.
3. Dynamic Logic: Update the navigation component to show the "Previous" button only if not on the first page and the "Next" button only if not on the last page.
4. Code Quality: Ensure adherence to Vue best practices.

[NJavokhir]

Implement Dynamic Navigation Using Mitt

Create dynamic navigation buttons ("Next" and "Previous") in the Vue application that adapt based on the user's current page.

Acceptance Criteria

1. Event Bus: Create an event bus using Mitt instead of PINIA to handle page change events.
2. Route Change Handling: Emit a pageChange event whenever the user navigates to a new page.
3. Dynamic Logic: Update the navigation component to show the "Previous" button only if not on the first page and the "Next" button only if not on the last page.
4. Code Quality: Ensure adherence to Vue best practices.

@stravid87 Can I move this task to Specification Done with this description?