Started to work the shortcodes

frontend/components/nav-bar.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { Book, Menu, Sunset, Trees, Zap } from "lucide-react";
 
 import { cn } from "@/lib/utils";
@@ -18,6 +19,8 @@ import {
 	SheetTrigger,
 } from "@/components/ui/sheet";
 import Link from "next/link";
+import { deleteCookie, getCookie } from "cookies-next";
+import { useEffect, useState } from "react";
 
 const subMenuItemsOne = [
 	{
@@ -67,6 +70,11 @@ const subMenuItemsTwo = [
 ];
 
 const Navbar = () => {
+	const [cookie, setCookie] = useState<string | null>(null);
+	useEffect(() => {
+		const _cookie = getCookie("auth_token");
+		setCookie(_cookie?.toString() ?? null);
+	}, []);
 	return (
 		<section className="sticky top-0 z-50 bg-background p-4">
 			<div>
@@ -133,11 +141,26 @@ const Navbar = () => {
 							</a>
 						</div>
 					</div>
-					<div className="flex gap-2">
+					<div className="flex gap-2 animate-in ease-in-out">
 						<Button variant="outline">
-							<Link href="/login">Se connecter</Link>
+							{cookie ? (
+								<Link href="/dashboard">Compte</Link>
+							) : (
+								<Link href="/login">Se connecter</Link>
+							)}
 						</Button>
-						<Button>Sign up</Button>
+						{cookie ? (
+							<Button
+								onClick={() => {
+									deleteCookie("auth_token");
+									setCookie(null);
+								}}
+							>
+								Se déconnecter
+							</Button>
+						) : (
+							<Button>Créer un compte</Button>
+						)}
 					</div>
 				</nav>
 				<div className="block lg:hidden">