website/src/routes/docs/tutorials/nextjs/step-5/+page.markdoc at fe2725f98f07e4fbc2bfb9e81c9ce1e5d89ec257 · appwrite/website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
---
layout: tutorial
title: Add navigation
description: Add navigation to your app.
step: 5
---

To help our users navigate the app we want it to have a navigation bar that's visible on all pages.
We will use the `useAuth()` hook 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 email address next to the logout button.

Create a new file called `src/components/Navbar.tsx` and add the following code.

```tsx
// src/components/Navbar.tsx
'use client';

import Link from 'next/link';
import { useAuth } from '../hooks/useAuth';

export default function Navbar() {
    const { current, logout } = useAuth();

    return (
        <nav className="main-header u-padding-inline-end-0">
            <h3 className="u-stretch eyebrow-heading-1">Idea Tracker</h3>
            {current ? (
                <div className="main-header-end u-margin-inline-end-16">
                    <p>{current.providerUid}</p>
                    <button
                        className="button"
                        type="button"
                        onClick={logout}
                    >
                        Logout
                    </button>
                </div>
            ) : (
                <Link
                    href="/login"
                    className="button u-margin-inline-end-16"
                >
                    Login
                </Link>
            )}
        </nav>
    );
}
```

Now we need to add the navigation bar to our app layout. Update `src/app/layout.tsx` to include the navbar.

```tsx
// src/app/layout.tsx
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import Navbar from '../components/Navbar';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
    title: 'Ideas Tracker',
    description: 'Track your side project ideas',
};

export default function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        <html lang="en">
            <body className={inter.className}>
                <Navbar />
                {children}
            </body>
        </html>
    );
}
```

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