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

Все було зрозуміло?

Секція 7. Розділ 8

Зміст курсу

Next.js 14

1. Introduction

Welcome Project Overview Course Prerequisites How the Course Works

2. Basic Concepts

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

6. Advanced Features

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

7. Authentication

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

Все було зрозуміло?

Секція 7. Розділ 8