Add navigation_

Add navigation to your app.

1 min read

To help our users navigate the app we want it to have a navigation bar that's visible on all pages. We will once again use the useUserSession() composable for information about the current user.

With this piece of information we will show a login button when no user is logged in and a logout button when one is. We will also put the user's e-mail address next to the logout button.

From the components directory, create the file navbar.vue and add the code below.

Markup

<!-- components/navbar.vue -->
<script setup>
const user = useUserSession();
</script>

<template>
  <div>
 <!--- Navbar -->
    <nav class="main-header u-padding-inline-end-0">
      <h3 class="u-stretch eyebrow-heading-1">Idea Tracker</h3>
      <!-- Email and logout button if logged in user -->
      <div
        class="main-header-end u-margin-inline-end-16"
        v-if="user.current.value"
        >
        <p>{{ user.current.providerUid }}</p>
        <button class="button" type="button" @click="user.logout()">
          Logout
        </button>
      </div>
      <!-- Login button if no user logged in -->
      <NuxtLink v-else href="/login" class="button u-margin-inline-end-16">
        Login
      </NuxtLink>
    </nav>
  </div>
</template>

Open app.vue from the root directory and add the navigation bar.

Markup

<!-- app.vue -->

<script setup>
import "@appwrite.io/pink";
import "@appwrite.io/pink-icons";
</script>

<template>
  <div>
    <NuxtLayout>
      <!-- Add navbar -->
      <Navbar />
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

Have a look in the browser at both the main page and the login page to test the new functionality.

Was this page helpful?

Share what worked or what we should fix. Once approved, our agents automatically apply suggested updates to the docs.