Added /users/me route, and handling auth in frontend

frontend/components/nav-user.tsx

@@ -25,17 +25,16 @@ import {
 	SidebarMenuItem,
 	useSidebar,
 } from "@/components/ui/sidebar";
+import { deleteCookie } from "cookies-next";
+import { useRouter } from "next/navigation";
+import IUser from "@/interfaces/IUser";
 
-export function NavUser({
-	user,
-}: {
-	user: {
-		name: string;
-		email: string;
-		avatar: string;
-	};
-}) {
+export const NavUser: React.FC<{ user: IUser }> = ({ user }) => {
 	const { isMobile } = useSidebar();
+	const router = useRouter();
+
+	const name = `${user.firstname} ${user.lastname}`;
+	const image = `https://avatar.vercel.sh/${name}`;
 
 	return (
 		<SidebarMenu>
@@ -47,17 +46,14 @@ export function NavUser({
 							className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
 						>
 							<Avatar className="h-8 w-8 rounded-lg">
-								<AvatarImage
-									src={user.avatar}
-									alt={user.name}
-								/>
+								<AvatarImage src={image} alt={name} />
 								<AvatarFallback className="rounded-lg">
 									CN
 								</AvatarFallback>
 							</Avatar>
 							<div className="grid flex-1 text-left text-sm leading-tight">
 								<span className="truncate font-semibold">
-									{user.name}
+									{name}
 								</span>
 								<span className="truncate text-xs">
 									{user.email}
@@ -75,17 +71,14 @@ export function NavUser({
 						<DropdownMenuLabel className="p-0 font-normal">
 							<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
 								<Avatar className="h-8 w-8 rounded-lg">
-									<AvatarImage
-										src={user.avatar}
-										alt={user.name}
-									/>
+									<AvatarImage src={image} alt={name} />
 									<AvatarFallback className="rounded-lg">
 										CN
 									</AvatarFallback>
 								</Avatar>
 								<div className="grid flex-1 text-left text-sm leading-tight">
 									<span className="truncate font-semibold">
-										{user.name}
+										{name}
 									</span>
 									<span className="truncate text-xs">
 										{user.email}
@@ -116,7 +109,12 @@ export function NavUser({
 							</DropdownMenuItem>
 						</DropdownMenuGroup>
 						<DropdownMenuSeparator />
-						<DropdownMenuItem>
+						<DropdownMenuItem
+							onClick={async () => {
+								await deleteCookie("auth_token");
+								router.push("/");
+							}}
+						>
 							<LogOut />
 							Log out
 						</DropdownMenuItem>
@@ -125,4 +123,4 @@ export function NavUser({
 			</SidebarMenuItem>
 		</SidebarMenu>
 	);
-}
+};