import Link from 'next/link';
import NavLinks from '@/app/ui/dashboard/nav-links';
import TradeHubLogo from '@/app/ui/tradehub-logo';
import { PowerIcon } from '@heroicons/react/24/outline';
import { signOut } from '@/auth';

export default function SideNav() {
  return (
    <div className="flex h-full flex-col px-3 py-4 md:px-2">
      <Link
        className="mb-2 flex h-20 items-end justify-start rounded-md bg-sky-700 p-4 md:h-40"
        href="/"
      >
        <div className="w-32 text-white md:w-40">
          <TradeHubLogo />
        </div>
      </Link>
      <div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
        <NavLinks />
        <div className="bg-ne hidden h-auto w-full grow rounded-md  bg-neutral-900 md:block"></div>
        <form
          action={async () => {
            'use server';
            await signOut();
          }}
        >
          <button className="bg-ne flex h-[48px] w-full grow items-center justify-center gap-2 rounded-md bg-neutral-900  p-3 text-sm font-medium hover:bg-neutral-700 hover:text-white md:flex-none md:justify-start md:p-2 md:px-3">
            <PowerIcon className="w-8 text-white" />
            <div className=" hidden text-white md:block">Sign Out</div>
          </button>
        </form>
      </div>
    </div>
  );
}

Test it using the following credentials:

mail: user@mail.com;
password: 123456.

In Practice

Everything was clear?

Section 7. Chapter 8

Course Content

Next.js 14

1. Introduction

Welcome Project Overview Course Prerequisites How the Course Works

2. Basic Concepts

Project Set Up Project File-Folder Strcture Styling Approaches Adding the Global CSS File Tailwind Styling CSS Modules Conditionally Applying Styles Custom Google Fonts Challenge: Adding Custom Google Font Images

3. Pages and Layouts

How Routing Works Challenge: Creating Page Creating a Common Layout Navigation Optimization Creating Active Links

4. Deployment and Database

Accounts Set Up Project Deployment Project Database Data Population

5. Working with Data

How to Fetch Data Working with the Dashboard Page Practice and Challenge: Retrieving Data Dynamic vs Static Rendering Loaders Specific Parts Loaders Challenge: Skeleton Loader Grouping Components for Loaders

6. Advanced Features

Invoices Page Search Functionality Pagination Server Actions Creating Item Updating Item Deleting Item Challenge: Form Validation

7. Authentication

Understanding Authentication Login Route NextAuth.js Authentication Configuration & Route Protection Password Hashing & Credentials Sign-in Functionality Connecting UI & Functionality Logout Functionality What's Next?

Next.js 14

Logout Functionality

The final feature we need to develop is logging out.

Back to the Project

To implement the logout feature within the <SideNav /> component, invoke the signOut function from auth.ts within your <form> element:

app/ui/dashboard/sidenav.tsx

import Link from 'next/link';
import NavLinks from '@/app/ui/dashboard/nav-links';
import TradeHubLogo from '@/app/ui/tradehub-logo';
import { PowerIcon } from '@heroicons/react/24/outline';
import { signOut } from '@/auth';

export default function SideNav() {
  return (
    <div className="flex h-full flex-col px-3 py-4 md:px-2">
      <Link
        className="mb-2 flex h-20 items-end justify-start rounded-md bg-sky-700 p-4 md:h-40"
        href="/"
      >
        <div className="w-32 text-white md:w-40">
          <TradeHubLogo />
        </div>
      </Link>
      <div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
        <NavLinks />
        <div className="bg-ne hidden h-auto w-full grow rounded-md  bg-neutral-900 md:block"></div>
        <form
          action={async () => {
            'use server';
            await signOut();
          }}
        >
          <button className="bg-ne flex h-[48px] w-full grow items-center justify-center gap-2 rounded-md bg-neutral-900  p-3 text-sm font-medium hover:bg-neutral-700 hover:text-white md:flex-none md:justify-start md:p-2 md:px-3">
            <PowerIcon className="w-8 text-white" />
            <div className=" hidden text-white md:block">Sign Out</div>
          </button>
        </form>
      </div>
    </div>
  );
}

Test it using the following credentials:

mail: user@mail.com;
password: 123456.

In Practice

Everything was clear?

Section 7. Chapter 8